3

Our team is creating a Service Portal page within ServiceNow and is running into formatting issues with flexboxes. We have a container with a row with three columns and each column will contain a widget. Currently, it looks like this:

enter image description here

We want all three widgets to be the same height and width. You can see that the Maps and Youtube widgets are the same exact size but the Open task widget on the left will not expand to fill the space. Here's how I defined the classes:

enter image description here

.wrap {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}

.wrap_item {
  background-color: yellow;
  border: black 1px solid;
  padding: 10px;
  display: flex;
  flex-direction:column;
}

It looks like the wrap and wrap_items are working correctly since the yellow portions extend the entire space, but for some reason I cannot get the Open Task widget itself to fill the entire space.

The Map and Youtube widgets are enclosed in bootstrap responsive tags: <div class="content embed-responsive embed-responsive-16by9">

The Open Tasks widget's code looks like this: 

<div id="something" class="{{::c.options.class_name}} wrapper label-{{::c.options.color}}" ng-if="c.options.table">  
    <a ng-href="?id={{::c.options.sp_page_dv}}&table={{::c.options.table}}&filter={{::c.options.filter}}">
        <h1><i class="fa fa-{{::c.options.glyph}}" aria-hidden="true" ></i>&nbsp;{{c.data.count}}</h1>
        <h3>{{::c.options.title}}</h3>
    </a>
</div>

.wrap_item #something {
  background-color: $white; 
  text-align: center;
}

I've tried everything with defining height =100% for the div, body, html, but nothing works. Any ideas on how to rectify this?

Thanks!

@Michael_B, this is what it looks like (i added in some text below)

enter image description here

Dave
  • 1,257
  • 2
  • 27
  • 58
  • Does the Open Tasks box extend full height when `.wrap-item` is a row-direction flex container? – Michael Benjamin Feb 03 '17 at 23:39
  • Hi Michael, no it doesn't. I pasted the screenshot of what it looks like above. Thanks! – Dave Feb 04 '17 at 02:00
  • Have you set `flex: 1` on the widget? – Asons Feb 04 '17 at 06:38
  • Here is a sample how it differs if `flex: 1` is not set, which appears similar to your issue description: https://jsfiddle.net/192wn62z/3/ ... or with `height: 100%`: https://jsfiddle.net/192wn62z/4/ – Asons Feb 04 '17 at 07:14
  • Thanks @LGSon, your examples both look like it works, but for some reason it isn't working for me in ServiceNow. I'm pretty convinced that ServiceNow has some weird default stylings that is preventing the widget from expanding to full height... – Dave Feb 04 '17 at 19:23

1 Answers1

1

The flex box is working correctly,you can see that by inspecting element with wrap_item class, but your widget isn't expanding, this occurs because there are few more nodes in between your widget and container item.

Generally this would be a span and a div. But this could change later(unlikely) in some future release.

You have to make each child display flex until your widget.

.wrap_item, .wrap_item > span, .wrap_item > span > div {
    display: flex;
    flex: 1 0 auto;
}

Thanks

Rahul R
  • 111
  • 6