Peter Peter - 4 years ago 260
HTML Question

Fieldset breaks layout in Edge, FF, Chrome but not IE11?

If i run this in IE11 the

fieldset
stays at 300px width, but in Edge, FF and Chrome it just expands until it can fit the entire content is there any way to make this behave the same way in Edge, FF and Chrome as it does in IE11?
(the idea here was that I define the LabelWidth with one class and the total width with one and the UI just adapts).

Note: if you remove the
fieldset
and
legend
it just works out of the box in all browsers, also if you replace the fieldset with a div it works?

I would prefer a solution that's css based with no modification to the html.



* {
box-sizing: border-box;
}
.Width300 {
width: 300px;
padding: 5px;
}
fieldset {
border: black 1px solid;
}
.Field {
white-space: nowrap;
min-height: 26px;
padding: 1px 0;
}
label {
float: left;
display: inline-block;
}
input,
span {
display: inline-block;
width: 100%;
}
span {
text-overflow: ellipsis;
overflow-x: hidden;
white-space: nowrap;
}
.LabelSize100 .Field {
margin-right: 100px;
}
.LabelSize100 label {
width: 100px;
}

<div class="LabelSize100 Width300">
<fieldset>
<legend>Test</legend>
<div class="Fields">
<div class="Field">
<label>test:</label>
<input type="text" />
</div>
<div class="Field">
<label>test:</label>
<input type="text" />
</div>
<div class="Field">
<label>test2:</label>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lectus velit.</span>
</div>
</div>
</fieldset>
</div>




Answer Source

Reading more carefully specs I think you can just add min-width: 0 to fieldset element:

* {
  box-sizing: border-box;
}
.Width300 {
  width: 300px;
  padding: 5px;
}
fieldset {
  border: black 1px solid;
  min-width: 0;
}
.Field {
  white-space: nowrap;
  min-height: 26px;
  padding: 1px 0;
}
label {
  float: left;
  display: inline-block;
}
input,
span {
  display: inline-block;
  width: 100%;
}
span {
  text-overflow: ellipsis;
  overflow-x: hidden;
  white-space: nowrap;
}
.LabelSize100 .Field {
  margin-right: 100px;
}
.LabelSize100 label {
  width: 100px;
}
<div class="LabelSize100 Width300">
  <fieldset>
    <legend>Test</legend>
    <div class="Fields">
      <div class="Field">
        <label>test:</label>
        <input type="text" />
      </div>
      <div class="Field">
        <label>test:</label>
        <input type="text" />
      </div>
      <div class="Field">
        <label>test2:</label>
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lectus velit.</span>
      </div>
    </div>
  </fieldset>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download