[Music] welcome back to code creative I'm Travis Olsen today we're taking a look at how to get flexbox layouts to work with widgets and service portal so a typical flexbox layout is going to look like this top example here where the content stretched the full height of the Flex box and this is using mostly default CSS for flex box using a similar layout for widgets you get something that looks like this one here where the widgets don't actually extend the full height the width on this last one here is set manually so let's take a quick look at what I've got set up in this particular demo to get an understanding of what's going on to start with we'll take a look at the style sheets and I'm using just some very basic classes here the dot wrap class is my Flex container so you can see I've got display set Flex and you've got the Flex box item which is marked with the wrap item class now of course with Flex box the immediate child is always the Flex item but I've gone ahead and added some custom Styles here to help it stand out so the yellow blocks that you see are the Flex items and I've gone ahead and added the Flex Gro you see they're set with one in order to get it to take up the full width now we'll take a look at the configuration of the widgets you can see in here that I've got a single container two rows a single column on the first row which contains the Flex test widget this widget actually contains all three items in a single wrapper so essentially this is what you would expect using the flexbox layout in a typical HTML setup where you've got full control over the HTML so you can see the wrap and wrap items or direct parent-child relationship to one and we're also able to set the Flex box item as the widget itself in the second setup we've got three separate columns to indicate using our service portal row column layout and our Flex items are three individual widgets which each contain basically the same div with the text that you see in the three individual items and flex tests so the two the two examples are meant to mirror one another as closely as possible now of course I have to point out that I've marked bootstrap alternatives on the container that removes the standard bootstrap classes so that you can leverage the flexbox layout on the second setup I've also added the wrap class to that row and to each of the columns I've added the wrap item now when we jump back over to our rendered version here you can see that there are some clear differences in the initial example the Flex items are stretching the entire height of the container and this is all because this last item is being set to a height of 200 pixels if I disable that you can see that they grow and shrink to the same size as one another in the second example though that's not happening and if we do an inspect element on this one we can quickly see that there's a very significant difference between the two so down here we've got the wrap item which is inside of our wrap but when we get down to the widget we have this span and div in the way before we get to this final div that contains the text if we compare that to the above what we have is the wrath the wrath item and the text there straight in line with one another there's no other nodes in between it and that's very important with flexbox because flexbox requires that your container be a direct parent of your item and that there be nothing in between so if we take a look here what you see is you've got the wrap which is full height the wrap items which are also full height you can see in the highlighted sections that it does actually extend all the way down but our border is unable to extend all the way down because we're actually going farther down the tree these are no longer flexbox items so if we want to extend that behavior all the way down let's take this one as an example what we have to do is we have to extend the flexbox behavior all the way down so for example our flexbox item or wrap item must also be a flexbox container itself but that's not enough because our span has to be a flexbox container as well and we have to go another step further and now you see that the widget contents had stretched the full height going all the way down but you can also see that our flexbox items have shrunk up in the width so we have to go back up to our item and you remember we put the Flex grow on this particular item so now our span which is also an item it's a it's a flex container and a flex item we have to add the grow to it and we have to grow this one and we have to grow this one and now our content is going to stretch all the way across so to make this behavior permanent we're going to come back to the CSS and we need the wrap item to be display flex and flex one zero auto to set the Flex grow in order to make the in order to make it full width so we can remove it from there now we need to extend this behavior to the wrap item with the immediate child span and we need to extend this behavior to wrap item span and the first immediate child div so we'll go ahead and save this and lastly we need to adjust the CSS of B flex item widget in order to add that Flex grow behavior to it so flex one zero auto and that will cause this div to act as a flex item that will grow and so we'll come down here and save it and wait for the little loader okay and now we'll come back over here refresh our widgets are stretching to the full heights of the Flex container as desired so I hope this has helped clarify some of the issues that you might be encountering when you're dealing with flexbox layouts in the service portal the important thing to keep in mind is that when traditionally writing flexbox layouts you only have to worry about your flexbox container and your Flex box item but in service portal there are additional HTML nodes that are added to the structures of your layouts automatically and you need to keep those in mind when you're building out your layouts so I hope this is help then I'll see you next time