Project

General

Profile

Bootstrap mode boot can cause inconsistent layout with theme components that set padding

Added by Bruce Toll about 3 years ago

The WLayout documentation notes that, "When applying a layout manager to a WContainerWidget, you may not define any padding for the container widget. Instead, use setContentsMargins()."

However, some themes included with Wt have padding on components that a user might inadvertently use to style a WContainerWidget that has a layout, e.g. a Bootstrap 3 "well".

In many cases, a Bootstrap "well" seems to work as expected in a layout. One exception, though, is when the "request=script" request arrives before the "request=style" when an app starts up in bootstrap mode. In that case, the css for the Bootstrap theme is added to the DOM by Javascript and it seems that the layout may not account for the padding. In any case, this situation can result in elements that extend beyond their normal locations.

A possible workaround is to override the padding supplied by the theme and set it to zero, while also using setContentsMargins on the container to compensate for the lost padding. I've done some testing with this and I think it may be a workable solution. In practice, though, it seems quite unusual for the script request to arrive before the style request, and the application remains usable though it looks a little strange. So, a workaround may not be worth the complexity. The case where I typically encounter this is when opening a number of client sessions rapidly from a script, e.g. as a rough performance test.

I mention this minor issue because it is something that I have encountered intermittently over the years, and it was only recently that I began to understand what was happening. Future Wt development may make this a non-issue, but it may be helpful to document in the meantime.

This note applies to Wt-4.5.0. Other thoughts and workarounds are welcome.


Replies (4)

RE: Bootstrap mode boot can cause inconsistent layout with theme components that set padding - Added by Roel Standaert about 3 years ago

Our usual recommendation is to not put a Bootstrap class on the container in the layout, and instead nest an extra container in the container that's in the layout, and apply the class to that.

Bootstrap classes and layouts are not intended to mix like that. I think that finding some way to make them mix is not worth the effort.

RE: Bootstrap mode boot can cause inconsistent layout with theme components that set padding - Added by Bruce Toll about 3 years ago

Thanks, Roel! I appreciate the recommendation and clarification. Your suggestion to place the bootstrap class on a nested container works reliably when the "request=script" arrives first.

The problem (which I did not adequately explain) is that I am also trying to use a nested layout within the "well" container, and I think that requires the "well" container to also have a layout so that the size constraint gets carried through. I should probably simplify this layout!

As a note, though, I subsequently found that applying the "well" style class to a container using the Flex implementation seems to work reliably when the "request=script" arrives first -- although a Flex implementation may not always be available.

Thanks, again, for all of your help!

RE: Bootstrap mode boot can cause inconsistent layout with theme components that set padding - Added by Mark Travis about 3 years ago

I think the best is to pick bootstrap OR WLayout, but don't use both. I think that is what Roel meant.

I got bit by this initially where I was using sample code that had some of the WLayout code and it was stepping on the bootstrap code when I pulled it up on the browser's code inspector. The classes weren't doing what I expected.

RE: Bootstrap mode boot can cause inconsistent layout with theme components that set padding - Added by Bruce Toll about 3 years ago

Hi Mark,

Thanks for taking the time to share your experience. I appreciate the suggestion -- it is probably the surest way to avoid this type of problem. As a note, the Wt widgetgallery example, which works with Bootstrap, does use layout in the GoogleMap.cpp and LeafletMap.cpp examples, so it is probably safe to mix Bootstrap and layout in some circumstances. However, it isn't always clear which combinations are supported and your approach avoids the issue entirely.

    (1-4/4)