不能设置高度：0； 如果图例可用，则到字段集

Question

Background

I have a form with collapsible fieldsets. In this example, each checkbox opens a fieldset with help of Bootstrap-Collapse.

https://codepen.io/vacoxudelpen/full/LYjOryP

The Odd

The fieldset with legend don't (un)collapse smoothly. The fieldset without legend is fine.

The Known

Bootstrap animates the collapse-elements with overflow: hidden; height: 0; overflow: hidden; height: 0; .

Apparently the browsers don't like to set the fieldset height to actually 0 (zero), if a legend exists.

So the animations runs till only the legend is visible and then show/hide the fieldset.

Answer 1

This is an old topic. <legend> elements were always very vague and there were very many browser inconsistencies around <legend> .

I funny enough had a similar task once and managed to fix it by floating the legend element and making sure it has the right width.

In your case I think something like this would do the job:

legend.col-form-label {
    float: left;
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
}