Bug or feature fieldset?

    Do you know, dear readers, about such a wonderful and, I would say, cool fieldset tag ? I think, of course you know! Do you often use it? I think very rarely. Okay, okay, you persuaded - it’s you, dear, you use it quite often, but the layout designer Vasya from a neighboring company is definitely rare, and maybe only “tasted” it once when you found out about it. Well, okay, that's not the point. If you used it often, then you might come across an unusual fieldset behavior , namely ignoring width , if the nested element is wider and no overflow helps. I will give an example right away. See this and subsequent examples in the current versions of FF (32) and Chrome (35); IE11, oddly enough, proved to be the best and worked correctly; I did not check other browsers.

    Attention! In the article, all examples are simplified to the maximum - to one nested element!

    Well, now let's go back a little bit. It often happens in life that we need to hide extra elements that did not fit into the block allocated to them, for example, to make a carousel. Everything is clear here:
    1. Assign the given width / height to the block and overflow hidden or scroll
    2. Inside, if this is the case with a carousel, set the width / height with a margin.
    3. Profit

    It seems nothing complicated. An example .

    But there was a situation that we needed a form and a sick brain decided to use fieldset to group elements . Well, it’s not a sick brain, but rather a healthy one, because it is semantic and cool, everything is like in adults. We are trying to do the same as usual.

    First, an example with a height restriction . Everything works as it should in height. You can set scroll or just hidden , if we want to work out scrolling in JS, the result makes us happy.

    But at the same time, it immediately catches the eye that the fieldset is 100% wide and causes a little perplexity. I think everyone will immediately exclaim: “So ask him the width!” Well, let'sset this width ! What do we see? .. Oh the omnipresent html take you, what kind of Hindu bug? Fieldset has shrunk, but to the size of the elements embedded in it. This is an incomprehensible feature of fieldset , either a bug or a feature.

    Of course there is a simple solution - wrap your insides back in one unit and have it set overflow and a fixed width ( width ).

    I tried to look for a solution to the problem, but Google did not say anything cheerful, only a long dialogue on bugzilla.mozilla.org , but there I did not find a discussion of this particular problem. Specificationon this occasion, too, does not tell anything intelligible. Or I did not find, in view of poor knowledge of the English language.

    The specification shows that fieldset refers to:
    • flow content , that is, it does not tell us about any features and does not distinguish it from, for example, the beloved by all, div .
    • sectioning root , which means some distinctive styles that are not inherited by descendants, for example, TD and our hero fieldset border , and some others have their own. It is to us too that does not give, and can be checked on the "nearby" elements blockquote
    • Listed elements and form-associated elements are elements that can / must have a parent form . Here you can also check on the "neighboring element", for example button . I think you guessed the result.
    • Palpable content - this tells us that this element should be filled. This is not a prerequisite, as this element can be prepared empty for subsequent filling with child elements, but it is recommended not to leave it empty. There are a lot of such elements, so this is also not the case.


    Next comes a standard description of the attributes and a couple of examples.

    Since they did not help me, we will try to figure it out ourselves.

    Everything turned out to be simple for Chrome. It has a vendor min-width: -webkit-min-content sewn in , which, as it were, hints and says a lot, even if you don’t know, just translate the words. This was easy to figure out through the built-in Developer Tools. Therefore, this problem is solved simply, for this it is enough to set the min-width equal to width .

    But for FF, this method did not help. And here the poking method, widely known in narrow circles, was called to help. The first thing that comes to mind is to set display: block . This thought probably visited you more than once from the very beginning of the article? However neitherblock , neither inline , nor even table is suitable. However, the train of thought is correct. By enumerating all sorts of modes, several, not understandably, working ones were found. These are table-cell or table-column modes . Options for table-column-group , table-footer-group or table-header-group are also possible , but this is already overkill. What does the cell mode of the cell have to do with it? Don’t even ask. However, I consider this a hack for FF and I would like to find a more reasonable and correct solution.

    Solving the problem with fieldset

    Maybe there are experts who solved this problem by other methods or are more familiar with the specification and tell what is what? Or is it worth writing to the bugtrackers of both browsers?

    Link to jsfiddle with examples to play around .

    That's all I think, now you can start throwing slippers. Thanks for attention.

    Also popular now: