I am currently using twitter bootstrap, which is working nicely, but I would like to add a legend to the "well" elements that are used in a form (so that I can have multiple wells, denoting sub-sections on a form).
An example of what my form looks like now is:
I would like to add a legend so that I can have two separate sections beneath the "Details" heading, for example, but be able to denote what they are for. A legend seems the best way to do this.
The relevant section of the html looks like:
<form>
<div class="row">
<div class="span6">
<div class="nonboxy-widget">
<div class="widget-head">
<h5>Details</h5>
</div>
<div class="widget-content">
<div class="widget-box">
<div class = 'form-horizontal well'>
<fieldset>
<div class="control-group">
<label class="control-label">Sale Type</label>
<div class="controls">
When I attempt to add a legend tag to either the fieldset or the div
with class form-horizontal well
it renders like a heading inside the box, not like a normal html legend. It renders like:
with the code
<div class = 'form-horizontal well'>
<fieldset>
<legend>Details</legend>
<div class="control-group">
Can anyone recommend a way to get this to render like a normal legend, on the border of the box?
EDIT: Thanks to the code from Simbirsk, I now have:
This is pretty close, but what I wanted was to have the legend look like a normal html legend on a fieldset (i.e. for it to sit in the border), so I changed the CSS to:
legend {
padding: 0;
margin-left: 10px;
margin-bottom: -9px;
border: 0;
color: #999999;
background-color: #333333;
}
but that resulted in this:
How can I ensure that the border on the well "breaks" (is not displayed behind the text) like a normal fieldset legend?
EDIT 2: Following the edit to the first answer, I applied the code to my css and ended up with:
You will note this is not quite what I was looking for - I am trying to get the legend on the border of the well div, not on the fieldset itself (because this is a nested form, there could be multiple fieldsets within one well, so I can't put the border on the fieldset itself).
I seemed to have achieved this with the code above, the only problem was putting a break in the border where the legend is - can this be done with some kind of opacity to the background of the legend text, and a bit of padding?
Any further suggestions?
Thanks!
You should not use the <fieldset> and <legend> when: You have a single form field that asks for a single piece of information.
HTML | <legend> align Attribute The <legend> align attribute in HTML is used to specify the alignment of the caption in a <fieldset> element. The left and right alignment of <legend> element are supported by major browsers except Opera 12 and earlier versions. The bottom alignment are not supported by any browsers.
The <legend> tag defines a caption for the <fieldset> element.
Put the .well
on the fieldset
and override Bootstrap's legend
and fieldset
styles.
HTML
<form>
<fieldset class="well the-fieldset">
<legend class="the-legend">Your legend</legend>
... your inputs ...
</fieldset>
</form>
CSS
.the-legend {
border-style: none;
border-width: 0;
font-size: 14px;
line-height: 20px;
margin-bottom: 0;
}
.the-fieldset {
border: 2px groove threedface #444;
-webkit-box-shadow: 0px 0px 0px 0px #000;
box-shadow: 0px 0px 0px 0px #000;
}
NOTE: I've ommited Bootstrap classes like rows, spans, controls, etc. Use them to fit your layout.
EDIT: Changed code to include fieldset
styles "reset".
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With