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,

Sorry for the delay in response, I had to find time to set up a scenario in my dev instance.   In short, yes, the issue is the span tag (and possibly some others going down the chain.   You need to set display: flex on every tag all the way down the tree until the one that should be full height (similar to setting height: 100%).

Slightly longer: I was off base on flex: 1 0 auto, that is for growth in the same direction as the flex (row or column).   The align-items: stretch; is the declaration that works in the perpendicular axis and it actually defaults to stretch.   Stand by, I'm putting together a video for deeper explanation.

[tltoulson · Accepted solution]

Hi David,

As promised, here is the video.   I put together a quick screencast demo in my dev instance to show Flexbox used with widgets.   Hopefully it covers what you need!   Let me know if I missed anything.   And sorry for the length, I didn't have much time for scripting / editing so I just kinda slapped it together.

[yundlu316]

Travis, I can't thank you enough for this video.   Super thorough and it worked!   Thanks so much for this.

[daveadreom]

Have you gotten this to work with Color boxes?

[ChrisBurks]

HI David,

I'm not sure if this will help but I thought that if a height is given to the flex box container by default all of it's flex items will "stretch" to the same size unless specifically set.

<style>

.wrap {

  display: flex;

  flex-flow: row wrap;

  justify-content: space-around;

  height: 300px;

}

.wrap-item {

  width: 350px;

  background-color: yellow;

  border: black 1px solid;

  padding: 5px;

}

.regular {

  border: 1px solid #000;

  width:100%;

  height:100%;

}

.ifr {

  width: 100%;

  height: 100%;

}

</style>

<div class="wrap">

      <div class="wrap-item">

          <div class="regular"></div>

      </div>

      <div class="wrap-item">

            <iframe class="ifr"></iframe>

      </div>

      <div class="wrap-item">

              <iframe class="ifr"></iframe>

      </div>

</div>