Service Portal widgets equal height

[yundlu316]

I have a row in Service Portal with three columns, each holding a widget.   I want to make those columns the same exact size (height and width).   On the main page, I have the following CSS:

.wrap {

  display: flex;

  flex-wrap: wrap;

  flex-direction:row;

}

.wrap_item {

  text-align:center;

}

I applied the CSS class "wrap" to the row container and then applied class "wrap_item" to each of the columns.   The first widget is a Count widget and the content isn't as tall as the other two widgets.   I want the Count widget height to expand so it matches the other two widgets.   What am I missing in this code?

[Community Alums]

Hi David,

Did you figure this one out? I'm also having some issues with the layout and css of Service Portal pages.

[yundlu316]

Hi Leigh,

Travis answered the question for me with this very helpful video:   https://youtu.be/P_6Ywdx5RvM.

Hope this helps!

[Community Alums]

Thanks David, that video was quite helpful.

Regards,

Leigh Barnes

Technical Consultant

Service Potential

0416 139 513

leigh@servicepotential.com.au

servicepotential.com.au

know your options...

On 30 March 2017 at 01:36, yundlu316 <community-no-reply@servicenow.com>

[gjb]

I just added a css on the widget

.whatever {

  padding: 100px 50px 0px 10px;  

}

and in the widget html add that to the div (the kb search widget in this case) play with the padding values for your best result

<div id="homepage-search" class="hidden-xs whatever">

  <div>

      <sp-widget widget="data.typeahead"></sp-widget>

  </div>

</div>