Service Portal - need help with panels

[Shane J]

I'm trying to modify the SC Popular Items widget so it sucks less. See below for what I'm getting when I try to take advantage of pictures:

Cutoff pics depending on the length of the title.   I'm not sure what I can do to prevent this, without throwing off the entire layout.   Any advice here?

Here is the HTML from the widget:

<h1 class="font-thin m-t-none">{{::options.title}}</h1>

<div class="row" >          

  <div class="col-sm-6 col-md-4" ng-repeat="item in data.items">

      <div class="panel panel-default">

          <a href="?id={{item.type}}&sys_id={{item.sys_id}}" class="panel-body block">

              <div class="overflow-100">

                  <h4 class="m-t-none m-b-xs">{{::item.name}}</h4>

                  <img ng-src="{{item.picture}}" ng-if="item.picture" class="m-r-sm m-b-sm item-image pull-left" />

                  <div class="text-muted item-short-desc">{{::item.short_description}}</div>

              </div>

          </a>

      <!--   <div class="panel-footer">

              <a href="?id={{item.type}}&sys_id={{item.sys_id}}" class="pull-left text-muted">${View Details}</a> <span ng-if="data.showPrices && item.price != '$0.00'" class="pull-right item-price font-bold">{{::item.price}}</span>  

          </div> -->

      </div>

  </div>

</div>

[Gaurav Sharma11]

That is why they have used overflow classes which defines a particular height to make the boxes layout consistent. Boxes size depends on the text/summary length. As a solution we can fix the height by increasing it by some pixels which will result in white space for boxes having small summary.

For other solution which will provide both layout and text size freedom, we need to create a custom widget where we can have show more/ read less kind of toggle at the end of paragraph. This way the default layout will remain same and users can use these toggles to see more text for items having long summary.

Thanks,

Gaurav 

[Rani11]

or instead fixing like this .can we do like this?

Like the image will show as top and bottom text will be shown ?

Is that possible?

[Gaurav Sharma11]

Yes with some tweaks to CSS but still at some point of time the boxes size will get different from each other. Only solution is a custom widget which will fulfill all your requirements.