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]

Hi,

This widget uses a class on these boxes which is below:

.overflow-100 {
 height: 100px;
 overflow: hidden;
}

You can add this CSS to you theme CSS file or you can add it to the page CSS.

Just increase the height with !important;

.overflow-100 {
 height: 180px !important;
 overflow: hidden;
}​

 

Please mark it as helpful,correct if it helps you.

Thanks,

Gaurav

[Rani11]

it is working fine. by any chance the height will be adjusted automatically based on picture and text?

[Gaurav Sharma11]

Hi Keerthi,

As it is using overflow-100 class so it will not go above that specified height for the container which holds text and picture. You need to define it either in theme or the page CSS as I have mentioned in previous reply.

Please mark the answer as helpful if that solves your issue.

Thanks,

Gaurav

[Gaurav Sharma11]

Hi Shane,

Please try below code in your theme or page CSS:

.overflow-100 {
    height: auto !important;
    overflow: inherit;
    min-height: 100px;
}

This will auto adjust the text if it goes beyond the specified height and we can put min-height as 100px to maintain layout of boxes.

Please mark answer as correct if I have answered your question.

Thanks,

Gaurav

[Rani11]

i have used it but the boxes size is not same, it is in different shape and it not looking good.