Overflow problem nesting fluid Containers

[f310bParticipant]

Hi,
I am trying to nest widgets within other widgets which all need to be fluid.

I am seeing this problem across most widgets I’ve tried but I have extended one of the jqxTabs jsFiddle examples to demonstrate:
http://jsfiddle.net/Graham7K/suq1sgng/

I am using a tab Container as the parent with ‘100%’ height and width.
If I nest another widget (here another tab container) inside it, and ALSO set it to have ‘100%’ height and width I am seeing unnecessary scrollbars.

My only option is to hand code a style “overflow:hidden;” on each container I want to “fix”.
This is difficult for a few reasons. New elements will be dynamically added on user interaction. It is possible a scrollbar is valid, I can’t have a general show or hide scrollbar styling. It needs to be smart enough to know when to show a scrollbar like a regular div would.

Even if I DO hide the overflow, the alignment is still incorrect, as it’s not correctly sizing the container, but rather, just clipping off some pixels (probably just the border) to the left and bottom.

Is there a better way to initialize the widgets to make this work?

Thank you.

[Peter StoevKeymaster]

Hi f310b,

When you set width and height of a widget, we set these options to its HTML Element. Then the web browser’s rendering engine renders the HTML Element. With the default box sizing, when you set the width or height of HTML Element, the browser will set that value to the element’s content height. If that element has border, the browser will add the additional pixels for the border. Which means that 100% width of element with border 1px will be 100% width + 1px left border and 1px right border. You don’t need to set overflow hidden. What you need to do is to either use border-box box sizing or hide the borders by setting border: none;

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[f310bParticipant]

Hi Peter,
Thank you, I seem to have resolved most issues I’ve encountered by setting the following in my css files:

.jqx-widget-content {
  box-sizing: border-box;
}

What I’m wondering is. jqx seems to explicitly set it to content-box in css files. But the child element size is calculated as though it assumes it’s border-box.
Is there a reason it is explicitly set this way and the above is not done by default?

It seems like the child elements size is calculated using the border-box style.

[Peter StoevKeymaster]

Hi f310b,

We use the web browsers’ default box-sizing which by default is content-box. More info: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[f310bParticipant]

Peter,
JQX does not inherit the browser default.
It explicitly sets this property… i.e. even if the browser default is over-ridden (like when also using Bootstrap) then JQX has explicitly made the decision to retain this property.

.jqx-widget-content {
-moz-box-sizing: content-box;
box-sizing: content-box;
-ms-touch-action: none;
-moz-background-clip: padding;
-webkit-text-size-adjust: none;
background-clip: padding-box;
-webkit-background-clip: padding-box;
-webkit-tap-highlight-color: rgba(0,0,0,0);
font-family: Verdana,Arial,sans-serif;
font-style: normal;
font-size: 13px;
border-color: #C7C7C7;
background: #FFF;
}

However, it is inconsistent with how containers are sized.

This seems like a bug to me. Or could you help me understand the reason this is explicitly set in JQX CSS above?
This is causing a lot of issues for us. We have to manually set the css property on every container to ensure it sizes correctly.

For examples, with the over-ride for my code on last post…
jqxPanels add 2% to fluid Panels.

Could you help me understand the reasoning and how to resolve or is this a bug?

[Peter StoevKeymaster]

Hi f310b,

The web browser’s default box-sizing is content-box. This is a fact. We use its default value which is content-box. This is a fact, too. We don’t inherit the web page’s box-sizing as our Themes don’t inherit backgrounds, colors, font-size etc. No, this is not a bug. There are help topics on the documentation page and also examples which you may look to understand how to use these widgets in responsive layouts. A simple solution also for nesting elements with border without changing their box sizing is to simply set their border to none – http://jsfiddle.net/cory1m95/. By doing that, you will avoid also the double borders – the border of the container and the border of the nested element.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[LlorxParticipant]

But if you are going to add borders and such by default too, the you should add border-box, because when you specify a width in your widgets (user defined or width by default) you don’t count the border that you add and this leads to a lot of problems, because when someone specifies a widget to be 100px width, it wants the widget be 100px width, and not 102px width, like now. This leads to a lot of problems because, for example, I had a splitter with 100% width and height, but because of your default border and your default content-box, it was 100% width + 2 pixels per side. Obviously this shown an scrollbar with 2 pixel movement.

We could add a “border: none” or “box-sizing: border-box”, but on the splitter widget this lead to a graphical bug with the splitter bar until the bar was dragged around.

content-box is a browser default, yes, but not having any border is a browser default too, so if you change things to not being a default, do it completely please, to avoid a lot of layout problems. content-box is a bad decision, always. Nowadays there is not a reason for it to exist: https://pressupinc.com/blog/2014/01/whats-wrong-css-box-model-fix/

[LlorxParticipant]

PD: A new bug regarding borders (but I think that not content-box), for example. I updated jqWidgets and that added a border around jqxTree. I don’t want any border if I don’t specify it, so remove it with:

.jqx-tree {
border: none!important;
}

Now, the tree don’t renders wll. Renders with heigh 0. If I remove the “border: none” directly in Chrome devtools, it renders visible again.

[Peter StoevKeymaster]

Hi Llorx,

jQWidgets uses the default box-sizing which is content-box. If you’re using CSS that overrides it, then make sure it does not affect the widgets.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[LlorxParticipant]

But, if jqWidgets size control is inconsistent because of all the reasons we stated above, how can I avoid overriding content-box but have a real 100% size instead of a 100% + 2 pixels size because of borders?

Because removing the border leads to bugs, like I said above too.

[adminKeymaster]

Hi Llorx,

It does not lead to bugs as we have also jqxTree without borders in some samples. I think you have an issue with your specific scenario and think that this is a general problem, but it is not. If you have an issue with jqxTree, then please write a topic in the jqxTree Forum, provide a sample which demonstrates your issue and we will look at it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts