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>

[lakshminarayan4]

hi ,

you use css line-height property

.panel h1 {

line-height: 1.2em;

max-height: 1.2em;

overflow: hidden;

}

basically you are restricting the height

Thanks

- YLN

[Shane J]

I just put that into the CSS right?   If so, it doesn't seem to be doing anything.

[lakshminarayan4]

could you please open and check dev tools , whether css is getting applied to that element

[codes_mahoney]

It kind of depends what you want to happen here, do you want the pictures to become smaller and the titles to remain full, or do you want the titles to get cut off and the pics to remain the size they currently are?

A correction to Lakshminarayana Yamarthy
The h1 element is outside the .panel, the headings we're trying to adjust are h4

.panel h4 {

        line-height: 1.2em;

        max-height: 1.2em;

        overflow: hidden;

}

if you want the pic to adjust smaller when the title is longer you might almost need to use some sort of javascript to get the height of the title, and size the picture accordingly. I don't think there is a way to base the size of an object off of it's containers height without javascript. (so going with the above method is probably the simplist)