MozillaZine

What exactly means width:auto ? (importance: low)

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
ueli
 
Posts: 2
Joined: July 22nd, 2018, 3:07 am

Post Posted July 22nd, 2018, 3:34 am

I have created a page with a form. I want the form to have a defined height, so I put a div with a defined height in the form. If there is insufficient space for the inputs, I want a vertical scroll bar. I want this overflow thing only for the vertical dimension, not for the horizontal one, so I set width to auto.

Now I see that I also get a horizontal scroll bar with the vertical one. My conclusion is that Firefox calculates the auto width without taking the vertical scroll bar into consideration.

This may be right, or it may be wrong. To find out, I had different browsers vote on the issue. Result:
- Firefox and Edge both show the horizontal scroll bar
- Chrome and Opera don't show the horizontal scroll bar

Does anyone know if the standards have a clear definition of how to calculate auto width?

Picture: http://uelissimo.bplaced.net/temp/autowidth.png
Code: http://uelissimo.bplaced.net/temp/autowidth.html
Note: The picture shows the Firefox way of rendering.
If you click on the link with the code, the display depends on your browser, as explained above.

DanRaisch
Moderator

User avatar
 
Posts: 120448
Joined: September 23rd, 2004, 8:57 pm
Location: Somewhere on the right coast

Post Posted July 22nd, 2018, 4:40 am

Moving to Web Development forum.

Benjamin Markson

User avatar
 
Posts: 365
Joined: November 19th, 2011, 3:57 am
Location: en-GB

Post Posted July 22nd, 2018, 5:44 am

ueli wrote:I want a vertical scroll bar. I want this overflow thing only for the vertical dimension, not for the horizontal one, so I set width to auto.

Overflow has a pair of siblings, overflow-x and overflow-y, for horizontal and vertical scrollbars.

Try replacing overflow:auto with: overflow-x:hidden; overflow-y:auto; ...this works for me for your example at http://uelissimo.bplaced.net/temp/autowidth.html.

Ben
XUL is dead. Long live the Google Chrome Clones.

therube

User avatar
 
Posts: 19162
Joined: March 10th, 2004, 9:59 pm
Location: Maryland USA

Post Posted July 22nd, 2018, 5:49 am

What versions of FF?

I recently read a Bug, maybe it was something to do with autowidth, where FF/Edge handled things one way, Chrome & others another, oh, in this case it was video... I should be able to find it ... now...

Maybe, Bug 958714 Flex items treat percentage padding & margin values in vertical axis as 0, if the flex container lacks an explicit height (was allowed by spec, but perhaps not interoperable?)
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.1.19) Gecko/20110420 SeaMonkey/2.0.14 Pinball CopyURL+ FetchTextURL FlashGot NoScript

ueli
 
Posts: 2
Joined: July 22nd, 2018, 3:07 am

Post Posted July 22nd, 2018, 11:01 am

I just realized that the effect depends on the monitor size. On a different monitor with a better horizontal resolution FF doesn't create a horizontal scroll bar. This is because of the div that surrounds the form. It's width depends on the window size, and it constrains the space available to the form. I have replaced my original code with a slightly modified version where the surrounding div has a fixed size (px).

With the modified version I still get the described effects for all browsers I tried. However, I tend to believe that the different results with different browsers depend on some subtle parameters like font size in pixels (I use rem) or the width of scroll bars in the overflow case or window border widths ...

I therefore think the case should be closed.

Ueli

Return to Web Development / Standards Evangelism


Who is online

Users browsing this forum: No registered users and 1 guest