Is there any way to have a fieldset width only be as wide as the controls in them?
HtmlCssFieldsetHtml Problem Overview
It seems that fieldset defaults to 100% width of its container. Is there any way that you can have the field set just be as big as the widest control inside the fieldset?
Html Solutions
Solution 1 - Html
Use display: inline-block
, though you need to wrap it inside a DIV to keep it from actually displaying inline. Tested in Safari.
<style type="text/css">
.fieldset-auto-width {
display: inline-block;
}
</style>
<div>
<fieldset class="fieldset-auto-width">
<legend>Blah</legend>
...
</fieldset>
</div>
Solution 2 - Html
fieldset {display:inline}
or fieldset {display:inline-block}
If you want to separate two fieldsets vertically, use a single <br/>
between them. This is semantically correct and no harder than it has to be.
Solution 3 - Html
You could float it, then it will only be as wide as its contents, but you'll have to make sure you clear those floats.
Solution 4 - Html
This also works.
fieldset {
width:0px;
}
Solution 5 - Html
Unfortunately neither display:inline-block
nor width:0px
works in Internet Explorer up to version 8. I have not tried Internet Explorer 9. Much as I would like to ignore Internet Explorer, I can't.
The only option that works on Firefox and Internet Explorer 8 is float:left
. The only slight drawback is that you have to remember to use clear:both
on the element that follows the form. Of course, it will be very obvious if you forget ;-)
Solution 6 - Html
You can always use CSS to constrain the width of the fieldset, which would also constrain the controls inside.
I find that I often have to constrain the width of select
controls, or else really long option text will make it totally unmanageable.
Solution 7 - Html
fieldset {
min-width: 0;
max-width: 100%;
width: 100%;
}
Solution 8 - Html
try this
<fieldset>
<legend style="max-width: max-content;" >Blah</legend>
</fieldset>
Solution 9 - Html
i fixed my issue by override legend style as Below
.ui-fieldset-legend
{
font-size: 1.2em;
font-weight: bold;
display: inline-block;
width: auto;`enter code here`
}
Solution 10 - Html
Going further of Mihai solution, cross-browser left aligned:
<TABLE>
<TR>
<TD>
<FORM>
<FIELDSET>
...
</FIELDSET>
</FORM>
</TD>
</TR>
</TABLE>
Cross-browser right aligned:
<TABLE>
<TR>
<TD WIDTH=100%></TD>
<TD>
<FORM>
<FIELDSET>
...
</FIELDSET>
</FORM>
</TD>
</TR>
</TABLE>
Solution 11 - Html
<table style="position: relative; top: -0px; left: 0px;">
<tr>
<td>
<div>
<fieldset style="width:0px">
<legend>A legend</legend>
<br/>
<table cellspacing="0" align="left">
<tbody>
<tr>
<td align='left' style="white-space: nowrap;">
</td>
</tr>
</tbody>
</table>
</fieldset>
</div>
</td>
</tr>
</table>
Solution 12 - Html
You can also put the fieldset inside a table, like so:
<table>
<tr>
<td>
<fieldset>
.......
</fieldset>
</td>
</tr>
</table>