HTML Fieldset content overflows at 100% height (Chrome)

Question

I have a problem with the HTML fieldset element in Chrome.

I want to have a fixed-height fieldset, and within it a scrollable div. Everything looks fine until I put a legend in - when I do so, the div spills out from the bottom of the fieldset. I also checked in Firefox, and it does not do this (i.e. does exactly what I would expect).

Anyone else seeing this? Is it a Chrome bug? Anyone know if there is a hack for this?

<!DOCTYPE HTML>
<html>
    <head>
        <title>a</title>
        <style>
            fieldset {
                height: 80px;
            }
            fieldset div {
                height: 100%;
                overflow-y: scroll;
            }
        </style>
    </head>
    <body>
        <fieldset>
            <legend>Test</legend>
            <div>
                Foo!<br/>
                Foo!<br/>
                Foo!<br/>
                Foo!<br/>
                Foo!<br/>
                Foo!<br/>
            </div>
        </fieldset>
    </body>
</html>

Screenshot

@DanielB: Doh, of course it is! Sorry, it's late and I'm being retarded; I'll edit it. But it does not change my problem. Tested on Chrome 11.0.696.57 on Ubuntu. I'll see about doing a screenie. — Amadan, May 16 '11 at 14:33
Test this [fiddle](http://jsfiddle.net/uCRzJ/) I use Win Chrome 11.0.696.65 — DanielB, May 16 '11 at 14:35
First, jsfiddle removes the default `fieldset` styling, so you have to add `border: 1px solid black` at least, to even notice the effect. It may work on a Win build, but on my Ubuntu I am getting pretty much the same as in the screenshot above (modulo margins, stripped by jsfiddle's reset script). — Amadan, May 16 '11 at 14:43
I have Windows 7 with Chrome 11.0.696.68 and it looks similar to the screenshot, so I guess it's not the fault of the platform it's released for. — rhino, May 16 '11 at 14:45

score 1 · Answer 1 · edited Apr 10 '14 at 22:11

I was able to get it working by adding padding-bottom to the fieldset for Chrome only. This balances out some of the extra height %. It's nice in that it works (relatively consistently) even when resizing.

if (navigator.userAgent.toLowerCase().indexOf('chrome')) { // Replace this with your preferred way of checking userAgent
    $('fieldset').css('padding-bottom', '4%'); // Exact percent may vary
}

Just as a note, I found this to be an issue in at least IE8 - IE11 as well, so the fix can be applied to IE.

score 1 · Accepted Answer · answered May 16 '11 at 15:24

Another solution, if you do not need to use the legend element, is to use an h1 and style appropriately. This works for me in both Chrome and FF.

<!DOCTYPE HTML>
<html>
<head>
    <title>a</title>
    <style>
        fieldset {
            height: 80px;
        }
            h1 {
                margin:0;
                margin-top:-1em;
                font-size:1em;
                background:white;
                width:33px;
            }   
        fieldset div {
            height: 100%;
            overflow-y: scroll;
        }

    </style>
</head>
<body>
    <fieldset>
        <h1>Test</h1>
        <div>
            Foo!<br/>
            Foo!<br/>
            Foo!<br/>
            Foo!<br/>
            Foo!<br/>
            Foo!<br/>
        </div>
    </fieldset>
</body>

Yeah, this hack seems to be exactly what I wanted. Thanks! (actually, I'd prefer `legend` worked as it should, but can't have everything :) ) — Amadan, May 16 '11 at 15:52
On second thought - still not doing everything I want. Having to specify width for the `h1` is a problem. — Amadan, May 16 '11 at 16:51

score 0 · Answer 3 · answered May 16 '11 at 14:34

0

I see the overflow.

It looks as if the fieldset div has too much height applied to it. Try

fieldset div {
            height: 85%;
            overflow-y: scroll;
        }

Works for me in Chrome.

Of course, without the code for the legend, I am not sure if there are other issues.

answered May 16 '11 at 14:34

Jason Gennaro

34,535
8
65
86

Of course, reducing the height would work, but then if I resize the `fieldset` it would not do what I want (i.e. always fill the entire inner area of the `fieldset`). Besides, `height: 100%` renders correctly on at least Firefox, so it would fall apart with `85%`. Thus, I can't accept this answer. – Amadan May 16 '11 at 14:40
I checked in Firefox 3.6.6 and the same problem occurs at 100%... the `div` overflows the `fieldset`. However, both Chrome and FF work at 85% for me. – Jason Gennaro May 16 '11 at 14:55
`85%` "works", just doesn't do what I want. It's kind of like telling a mechanic that your engine hood pops up whenever you speed over 20 km/h, and he tells you that the solution is to only drive very slowly. – Amadan May 16 '11 at 15:03
Gotcha. See another solution below. – Jason Gennaro May 16 '11 at 15:25

HTML Fieldset content overflows at 100% height (Chrome)

3 Answers3

Linked

Related