Service Portal flexbox

[yundlu316]

I'm building a Service Portal page in ServiceNow and am having issues styling flexboxes. Currently, the flexboxes look like this:

The Map and Youtube widgets are taller so they determine the height of the flexbox. I want all three widgets to have the same height and cannot seem to do it.

My CSS looks like this:

.wrap { 
display: flex; 
flex-flow: row wrap;   
}   
.wrap_item { 
background-color: yellow; 
border: black 1px solid; 
padding: 5px; 
}

The class "wrap" is applied to the row container and each column has class "wrap-item". The Map and Youtube widgets are both in iframes so the CSS/HTML for those two look like this:

<div class="fluidMedia"> 
         <iframe src="https://www.youtube.com/embed/JS7duITSEO8" frameborder="0" allowfullscreen class="media"></iframe> 
</div>   

.fluidMedia { 
position: relative; 
width: 100%; 
height: 0; 
padding-bottom: 56.25%; 
overflow: hidden; 
} 

.media { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
}

The Open Tasks widget looks like this:

       <div id="content" 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}}"> 
                     <div class="h1 count"><i class="fa fa-{{::c.options.glyph}}" aria-hidden="true"></i>  {{c.data.count}}</div>   
                     <div class="h3 text_title">{{::c.options.title}}</div> 
                   </a> 
         </div>   

#content { 
background-color:$white; 
text-align: center; 
}   

.count   { 
color: $royal-blue; 
}   

.text_title { 
color: $gray-dark; 
}

Any suggestions on how I can make the Open Tasks widget extend its height to match the others?

Thanks!

[tltoulson]

Hi David,

I think the issue is in your flex box config.   Since you are trying to achieve equal columns, you will want to use column as your flex direction instead of row.   Then your flex-item will need to be specified to grow (flex: 1;).   The resulting CSS would look like:

.wrap { 
display: flex; 
flex-flow: column wrap;   
}   
.wrap_item { 
flex: 1;
background-color: yellow; 
border: black 1px solid; 
padding: 5px; 
}

Of course, this may change how the widths are working though.   The thing to keep in mind with flex box layouts is that you can flex horizontally or vertically within a flex wrapper, not both.   If you want to flex in both row and column directions, you will need to do some flex container nesting.  

[yundlu316]

Hi Travis, thanks!   I tried your code above and the flexbox just turned into a column:

The good news is everything shows up now although it looks like the heights are still inconsistent...I'll look into the link you provided.

[tltoulson]

Whoops, sorry bout that.   Try sticking with the row direction but add the flex: 1 declaration.   I believe the default for flex is flex: 0 1 auto which won't allow for the items to grow.   If that doesn't solve it, there are two causes I can think of:

1.   wrap_item class has not been added to the Open Task widget

2.   Service Portal is adding additional HTML nodes between the wrap and wrap_item.   This means wrap_item isn't actually the flex item.   If this is the case, you might need to do some fancy footwork to move wrap_item up the Service Portal layout nodes and you may even have to add some other classes to fill the height.

Because of Service Portal adding layout nodes throughout the HTML, cross widget flex box can be challenging to achieve but it can be done with persistence.   Feel free to share the rendered mark up if you are still struggling.

[yundlu316]

Hey Travis, I tried a bunch of different things and nothing seems to work.   Wrap_item class is definitely applied to the Open Task widget column because the background color is yellow.   I checked the page elements and it doesn't seem like there's additional HTML nodes between wrap and wrap_item. I think the flexbox and flex items are all working as expected, but the actual widget's height isn't changing.   I did some research and made wrap_item flex as well since the widget is basically a child element within wrap_item:

.wrap {    

display: flex;    

flex-direction: row;      

}

.wrap_item {

  display: flex;

  flex-direction: column;

  background-color: yellow;    

  border: black 1px solid;    

  padding: 5px;    

}  

I then added flex:1 into the widget CSS:

#content {

  background-color:$white;

  text-align: center;

  padding: 10px;

  flex: 1;

}

However this still doesn't work.   I checked the page elements again and noticed that within wrap_item, there's a <span> element, do you think this may be causing the widget to not have a flexible height?