Is there any way to have a fieldset width only be as wide as the controls in them

Question

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

User · Answer

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.

User · Answer

Going further of Mihai solution  cross-browser left aligned    lt TABLE gt     lt TR gt       lt TD gt         lt FORM gt           lt FIELDSET gt                         lt  FIELDSET gt         lt  FORM gt       lt  TD gt     lt  TR gt   lt  TABLE gt    Cross-browser right aligned    lt TABLE gt     lt TR gt       lt TD WIDTH 100  gt  lt  TD gt       lt TD gt         lt FORM gt           lt FIELDSET gt                         lt  FIELDSET gt         lt  FORM gt       lt  TD gt     lt  TR gt   lt  TABLE gt

User · Answer

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

User · Answer

Use display  inline-block  though you need to wrap it inside a DIV to keep it from actually displaying inline   Tested in Safari    lt style type  text css  gt       fieldset-auto-width            display  inline-block         lt  style gt   lt div gt     lt fieldset class  fieldset-auto-width  gt         lt legend gt Blah lt  legend gt               lt  fieldset gt   lt  div gt

User · Answer

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

User · Answer

fieldset  display inline  or fieldset  display inline-block   If you want to separate two fieldsets vertically  use a single  lt br  gt  between them  This is semantically correct and no harder than it has to be

User · Answer

lt table style  position  relative  top  -0px  left  0px   gt                   lt tr gt                       lt td gt                           lt div gt                                  lt fieldset style  width 0px  gt                                   lt legend gt A legend lt  legend gt                                   lt br  gt                                   lt table cellspacing  0  align  left  gt                                       lt tbody gt                                           lt tr gt                                               lt td align  left  style  white-space  nowrap   gt                                               lt  td gt                                           lt  tr gt                                       lt  tbody gt                                   lt  table gt                               lt  fieldset gt                           lt  div gt                       lt  td gt                   lt  tr gt               lt  table gt

User · Answer

fieldset        min-width  0       max-width  100        width  100

User · Answer

This also works  nbsp   fieldset     width 0px

User · Answer

try this   lt fieldset gt      lt legend style  max-width  max-content    gt Blah lt  legend gt   lt  fieldset gt

User · Answer

You can also put the fieldset inside a table  like so    lt table gt       lt tr gt          lt td gt              lt fieldset gt                                 lt  fieldset gt          lt  td gt       lt  tr gt   lt  table gt

User · Answer

Unfortunately neither display inline-block nor width 0px works in Internet nbsp Explorer up to version 8  I have not tried Internet nbsp Explorer nbsp 9  Much as I would like to ignore Internet nbsp Explorer  I can t     The only option that works on Firefox and Internet nbsp Explorer nbsp 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  -

[html] Is there any way to have a fieldset width only be as wide as the controls in them?

Examples related to html

Examples related to css

Examples related to fieldset