Flexbox column layout not showing correctly in designer

I wanted to use flexbox to design a side navigation along with the existing components, Nav in this case. This menu has a top and bottom section, both Nav components, and each link in both sections contain a span for the label and along with an icon. For the most part the flexbox layouts are shown correctly in the designer. But when adding flex as the display for the tag the children Label<i>icon<i> do not show the span growing to fill the remain contained space. This essentially pushes the icon to the right of the link. This renders correctly in the browser but it would be nice to see the initial design relfected correctly in the deaigner as well.


I'm sure that this will be working better when they have added Bootstrap 4 after it's release. Until then you'll most likely not find that many of the newer Bootstrap 4 settings will visually look correct in the app.

@jo True, I would expect that as well. Flexbox is not dependent on B4 though. I would think that normal and mostly common browser features, regardless of the bootstrap framework, would display properly in the designer. It's not the end of the world since the browser preview provided the correct view. But it's makes it hard to trust what I'm seeing in the designer while I'm creating my layouts.

Yeah I would agree there that it would be nice if all things displayed properly in the app too. I have some issues with some external gallery setups as well that don't display correctly as well as some of the background settings. One of these days I'll get around to emailing the project to Martin with the info on what I have issues with and hopefully those will be resolved as well. :)