Question

I am using jQuery to create a set of combo buttons in my Chrome extension:

for( var i = 0, format; format = phoneFormats[i]; ++i ) {
    var input = $('<input>', {
        style: 'width: 400',
        type: 'radio',
        name: 'phone-format-radio',
        value: i,
        text: GetDisplayNumber( format )
    }).after( '<br/>' );

    $(id + ' > button').before( input );
}

There are two major issues with the current output. First of all, unless I explicitly set the width of each input element, their width does not account for the text next to the combo box. Secondly, the combo buttons appear to the right of the text instead of to the left of it.

If I manually create these combo buttons in HTML, they structure just fine. Am I doing something wrong with jQuery?

Answer 1

As far as your question in the comment goes (i.e. “why my radio button is not being given a default width (the size of its text) and why the radio button is on the right of the text instead of the left.”), radio buttons (or any <input> elements for that matter) don’t have content. So, where your text gets rendered depends on the browser’s mood (more or less). The usual structure looks like this:

<input type="radio" id="x" /><label for="x">Your text here</label>

I’ve left out all the attributes that weren’t necessary to illustrate the structure. So, what you want to do is create your radio button without the text bit but with an id attribute; then, create a label element with an appropriate for attribute and text and drop the label after the radio button but before your line break. Maybe something more like this would work:

for(var i = 0, format; format = phoneFormats[i]; ++i) {
    var input = $('<input>', {
        id: 'phone-format-radio-' + i,
        style: 'width: 400',
        type: 'radio',
        name: 'phone-format-radio',
        value: i
    }).after(
        '<label for="phone-format-radio-' + i + '">'
        + GetDisplayNumber(format)
        + '</label><br/>'
    );
    $(id + ' > button').before( input );
}