Semantic-ui: [Form] Add Fieldset / Legend

[Dayjo]

I feel like maybe I've missed something here.

I'm doing my first form with semantic-ui and using <fieldset> with <legend> to group fields together, but they appear to have no styling, plus can't find any documentation or other raised issues on either fieldset or legend tags.

Is there a reason that there's no support for these tags?

[Anachron]

How would you like to have them styled?
As far as I know, IE < 10 is buggy as hell for fieldset and legend. Just check the legendary bleeding background bug: http://social.msdn.microsoft.com/Forums/ie/en-US/15c8100c-50d1-419d-afcb-c0a048b393c2/ie8-bug-the-html-fieldset-tag-displays-incorrectly-when-a-legend-and-a-background-color-is-used?forum=iewebdevelopment

Also, you could just use headlines and other stuff if you are interested in them. And if you don't force fieldsets, you could just use divs. If you force semantic-ui-users to use them, people will get mad.

[Dayjo]

I understand that there are classes for divs to 'group' fields together for columns e.t.c. I was just surprised there was no basic styling of them by default (i.e. they look horrible as default browser style).

I have written some css for them myself (though I've not followed any of the semantic style guide regarding dimensions e.t.c.) and have not done very much in regards to cross browser testing.

I'd be happy to attempt to provide what I have when it's done and see people's thoughts! Or to collaborate if anyone else has done anything similar!

[Anachron]

I vote for manually overwriting divs with fieldset/legend classes to make them look like it.
Legends and fieldsets will never look similiar, due to problems in modern web browsers and different opinions on how to implement them.

Basically, a fieldset just has a border and the legend should be positioned relative to the fieldset with a non-transparent background color.

[Dayjo]

Non-transparent backgrounds on the legend unfortunately won't always work (textured/gradient background behind). This is no doubt a problem with the fieldset and legend tags in HTML in general, as you can't really replicate their functionality, nor consistently style them cross-browser.

Despite there being issues with the fieldset and legend tags. I don't think the solution is just 'replacing' them with divs.

I just think some 'basic' styling (maintaining border radius, colours, font sizes) could make a bit of a difference if you do happen to be using them.

[Anachron]

This is because this library has no css-reset. You can use twitter bootstraps css-reset if you wish. Such things will never be implemented since its one of the features of semantic-ui not to break existing styles.

So, either request for custom classes or use any css-reset.

[miquelbrazil]

I'd really like to see Semantic UI implement support for the use of fieldset within forms as an alternative to using divs. I believe fieldset is the more semantic way of grouping form elements.

I did try my hand at modifying the base layout of the fieldset element as per @Dayjo and @Anachron's conversation. Have guys seen any further progress on this path?

[amingilani]

For one, increased margins would be nice.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.