Format Fields In Twitter Bootstrap To Show Like A Table
Solution 1:
As you requested a CSS / JS only solution..
You will need to wrap your label & select elements with a element (.control-group)
$("#DOB_picker").find("label").each(function(){
$(this).nextUntil("label").andSelf().wrapAll("<div class='control-group'></div>");
});
Your .control-group will need the following css, or similar
#DOB_picker.control-group {
display: inline-block;
zoom:1;
float: left;
}
#DOB_picker.control-grouplabel {
text-align:left;
}
You really want to put this CSS under custom, semantic classes so it doesn't trash the rest of your site.
Working Example
Solution 2:
surround your fields with a <row></row> like so:
<div class="span12">
<divid="DOB_picker"class="DOB_picker"><fieldsetclass="birthday-picker"><row><labelfor="birth[month]">Month</label><selectclass="birth-month"name="birth[month]"></select><labelfor="birth[day]">Day</label><selectclass="birth-day"name="birth[day]"><labelfor="birth[year]">Year</label><selectclass="birth-year"name="birth[year]"></select></row></fieldset></div></div>That should make them all be inline (and if it doesn't it's because your inputs and/or labels are too wide to all be inline.
Solution 3:
try with:
<div class="span12">
<divid="DOB_picker"class="DOB_picker"><fieldsetclass="row-fluid birthday-picker"><divclass="span4"><labelfor="birth[month]">Month</label><selectclass="birth-month"name="birth[month]"></select></div><divclass="span4"><labelfor="birth[day]">Day</label><selectclass="birth-day"name="birth[day]"></div><divclass="span4"><labelfor="birth[year]">Year</label><selectclass="birth-year"name="birth[year]"></select></div></fieldset></div></div>Solution 4:
Okay, here is the jQuery to wrap your content in rows:
$(document).ready(function () {
...
$("#DOB_picker").wrap("<div class='row' />");
...
});
The one thing that you're going to have to play around with is what class you give the div that you're going to wrap with (I used row, as it is the likely case). The reason I can't give you this answer is because your page layout could be different and could require a 'row-fluid'. You will know when you see it. Here is a link to the Bootstrap Documentation in case you need to use a different class.
Let me know if you ahve any questions.
Post a Comment for "Format Fields In Twitter Bootstrap To Show Like A Table"