Bug or fieldset feature?
Do you know, dear readers, about such a wonderful and, I would say, cool fieldset tag? I think of course you know! And how often do you use it? I think very rarely. Well, okay, okay, persuaded - it was you, dear, that you use it quite often, but the coder Vasya from a neighboring company - surely rarely, and maybe only once “tasted it” when he learned about it. Well, okay, not about this. If you have used it often, you may have come across an unusual fieldset behavior, namely, ignoring the width , if the nested element is wider and no overflow can help the cause. Immediately give an example . This and subsequent examples look in current versions of FF (32) and Chrome (35); IE11, oddly enough, showed its best and worked correctly; I did not check the other browsers.
Attention! In the article, all the examples are simplified to the maximum - to one nested element!
Well, now let's go back a little bit. It happens often in life that we need to hide unnecessary elements that did not fit into the block allotted to them, for example, to make a carousel. Everything is clear:
It seems nothing complicated. An example .
But then there was a situation that we needed a form and the diseased brain decided to use a fieldset to group the elements. Well, not a sick brain, but on the contrary - healthy, because it is semantic and cool, everything is like in adults. We try to do the same as usual.
')
First an example with height restriction . Everything works as it should in height. You can put scroll or just hidden , if we want to work out the scrolling on 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 bewilderment. I think everyone will immediately exclaim: "So ask him the width!" Well, let's set this width ! What do we see? .. About omnipresent html take you, what kind of Hindu beetle? Fieldset shrank, but to the size of the elements enclosed in it. This is an incomprehensible feature of the fieldset , or a bug, or a feature.
Of course, there is a simple solution - to wrap the insides in one more block and to put an overflow and a fixed width for it.
I tried to look for a solution to the problem, but Google doesn’t say anything cheerful, just a long dialogue on bugzilla.mozilla.org , but there I didn’t find a discussion of this particular problem. The specification on this subject also does not tell anything intelligible. Or I did not find, in view of the poor knowledge of the English language.
The specification shows that the fieldset refers to:
Next comes the standard attribute description and a couple of examples.
If they did not help me, we will try to figure it out for ourselves.
Everything turned out to be simple for Chrome. He has a vendor min-width: -webkit-min-content sewn into it, which hints and says a lot, even if he doesn’t know, just translate words. It was easy to find 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 the width .
But for FF, this method did not help. And here the well-known spear method 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, neither block , nor inline , nor even the table is suitable. However, the train of thought is correct. Using the search of various modes were found several, not clear way, working. These are the modes table-cell or table-column . It is also possible options table-column-group , table-footer-group or table-header-group , but this is too much. What does it have to do with the table cell mode in general? However, I think this is 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 you what's what? Or is it worth writing to both browsers?
Link to jsfiddle with examples for play.
I think that's all, now you can start throwing slippers. Thanks for attention.
Attention! In the article, all the examples are simplified to the maximum - to one nested element!
Well, now let's go back a little bit. It happens often in life that we need to hide unnecessary elements that did not fit into the block allotted to them, for example, to make a carousel. Everything is clear:
- Assign the block a specified width / height and overflow hidden or scroll
- Inside, if this is the case with the carousel, set the width / height with a margin.
- Profit
It seems nothing complicated. An example .
But then there was a situation that we needed a form and the diseased brain decided to use a fieldset to group the elements. Well, not a sick brain, but on the contrary - healthy, because it is semantic and cool, everything is like in adults. We try to do the same as usual.
')
First an example with height restriction . Everything works as it should in height. You can put scroll or just hidden , if we want to work out the scrolling on 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 bewilderment. I think everyone will immediately exclaim: "So ask him the width!" Well, let's set this width ! What do we see? .. About omnipresent html take you, what kind of Hindu beetle? Fieldset shrank, but to the size of the elements enclosed in it. This is an incomprehensible feature of the fieldset , or a bug, or a feature.
Of course, there is a simple solution - to wrap the insides in one more block and to put an overflow and a fixed width for it.
I tried to look for a solution to the problem, but Google doesn’t say anything cheerful, just a long dialogue on bugzilla.mozilla.org , but there I didn’t find a discussion of this particular problem. The specification on this subject also does not tell anything intelligible. Or I did not find, in view of the poor knowledge of the English language.
The specification shows that the fieldset refers to:
- flow content , that is, it does not tell us about any features and does not distinguish it from, for example, beloved by all, div .
- sectioning root , which means some distinctive styles that are not inherited by descendants, for example, the border for TD and our hero's fieldset , and some others of their own. This does not give us anything either, and you can check on the “neighboring” element of blockquote
- Listed elements and form-associated elements are elements that can / must have a parent form . Here, too, you can check on the "next element", for example button . About the result, I think you guessed it.
- Palpable content - this tells us that this element must be filled. This is not a prerequisite, since this element can be prepared empty for subsequent filling with children, 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 the standard attribute description and a couple of examples.
If they did not help me, we will try to figure it out for ourselves.
Everything turned out to be simple for Chrome. He has a vendor min-width: -webkit-min-content sewn into it, which hints and says a lot, even if he doesn’t know, just translate words. It was easy to find 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 the width .
But for FF, this method did not help. And here the well-known spear method 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, neither block , nor inline , nor even the table is suitable. However, the train of thought is correct. Using the search of various modes were found several, not clear way, working. These are the modes table-cell or table-column . It is also possible options table-column-group , table-footer-group or table-header-group , but this is too much. What does it have to do with the table cell mode in general? However, I think this is 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 you what's what? Or is it worth writing to both browsers?
Link to jsfiddle with examples for play.
I think that's all, now you can start throwing slippers. Thanks for attention.
Source: https://habr.com/ru/post/239467/
All Articles