Display: Block and Flex

Added by Mark Travis over 1 year ago

I’m making great progress building a Flex based interface. My favorite UI presentation is to create a container that expands to 100%, and fill it with smaller “cards” that “flow” from left to right to fill up the container.

The problem I’m running in to are the DIVs that Wt uses when building the widgets from WContainerWidgets, WTemplates, WPushButtons, etc.

I’m spending a tedious amount of time in the web-browser developer view trying to understand why widgets are stacking up vertically instead of flowing left to right like I want.

The call tree looks like the following:

<div class=“flex”>.  // I specify a StyleClass for the container - comes through as Display: Flex;
<div class=“someWtDynamicCode”>  // Internal Wt generated - comes through as Display: Block;
<div class=“anotherWtDynamicCode”>  // internal Wt generated - comes through as Display: Block;
<div class=“flex:1”> // My “child” container that I want to float - comes through as ~~Display: Flex;~~ (strikethrough)

The interpretation of the styleclass rules according to the web-browser debugger have most of the controlling “flex” rules crossed out. When I click on the “hint” icon next to the crossed out rule it tells me that the parent divs are specified as “display: block” which are preventing the flex rules from propagating and suggests I change them to “display: flex”.

Now, I realize “display: block” is set by the browser as the default. But I can’t ask my potential users to set anything with their browsers. I need to override it somehow.

I feel like I’m playing Whack-A-Mole applying StyleClasses to anything that I think might produce an internally generated div to a Flex StyleClass. Sometimes it works, most times it doesn’t.

Is there a place I can set a global to get around this? Or is this something left-over from the pre-Bootstrap 5/HTML5 specs?

All else fails, is there a particular Wt class I can override?

I try to take care of this all in the WTemplate, but as soon as I bind a widget, a display: block gets thrown in to the mix.

Replies (1)

RE: Display: Block and Flex - Added by Mark Travis 4 months ago

I was just hunting for something else and ran across an old post of mine.

Here's how you do it. (Ignore all the stuff in the previous post.)

Create a WContainerWidget to hold the smaller WContainerWidgets (Or WTemplates) and assign it a style class of d-flex.

setStyleClass("row d-flex")