javascript - Format fields in twitter bootstrap to show like a table

Question

I'm not the best when it comes to CSS to here goes.

I'm trying to format fields in twitter bootstrap by strictly using CSS / javascript (or jQuery)

Here is my HTML:

<div class="span12">
    <div id="DOB_picker" class="DOB_picker">
        <fieldset class="birthday-picker">
            <label for="birth[month]">Month</label>
            <select class="birth-month" name="birth[month]"></select>

            <label for="birth[day]">Day</label>
            <select class="birth-day" name="birth[day]">

            <label for="birth[year]">Year</label>
            <select class="birth-year" name="birth[year]"></select>         
        </fieldset>
    </div>
</div>

I can not change the HTML as it is auto generated and therefore the only way for me to style it is CSS or javascript.

This is what it looks like right now

EDIT: After trying reagan's Solution

var html = $('.birthday-picker').html();
$('.birthday-picker').html('<row>' + html + '</row>');

I used the following code to try to implement reagan's solution but had no luck :(

Answer 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>");
});

​</p>

Your .control-group will need the following css, or similar

   #DOB_picker .control-group {
    display: inline-block;
    zoom:1;
    float: left;
    }

    #DOB_picker .control-group label {
    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

http://jsfiddle.net/blowsie/nJm2C/

Answer 2

surround your fields with a <row></row> like so:

<div class="span12">
    <div id="DOB_picker" class="DOB_picker">
        <fieldset class="birthday-picker">
            <row>
                <label for="birth[month]">Month</label>
                <select class="birth-month" name="birth[month]"></select>

                <label for="birth[day]">Day</label>
                <select class="birth-day" name="birth[day]">

                <label for="birth[year]">Year</label>
                <select class="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.

Answer 3

try with:

<div class="span12">
    <div id="DOB_picker" class="DOB_picker">
        <fieldset class="row-fluid birthday-picker">
            <div class="span4">
              <label for="birth[month]">Month</label>
              <select class="birth-month" name="birth[month]"></select>
            </div>
            <div class="span4">
              <label for="birth[day]">Day</label>
              <select class="birth-day" name="birth[day]">
            </div>
            <div class="span4">
              <label for="birth[year]">Year</label>
              <select class="birth-year" name="birth[year]"></select>
            </div>         
        </fieldset>
    </div>
</div>

Answer 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.