JqueryMobile checkbox doesn't like "data-inline"

Question

I'm developing a web app with MVC 3 / Razor and jquery-mobile. In jquery-mobile, normally you can add data_inline = "true" to an object's attributes and it will prevent the element from stretching all the way across the screen, like so:

@Html.DropDownListFor(m => m.value, options, new { data_inline = "true" })
@Html.ActionLink("Text", "Action", null, new {data_role="button", data_inline="true"})

Both of those work fine. But on a checkbox...

@Html.CheckBoxFor(m => m.value, new { data_inline = "true" })

... it doesn't seem to do anything, and I still get a nasty stretched checkbox. Adding data_role="button" doesn't help (not that I expected it to).

Is there any reason why this is so? Any good way I can get my checkbox to not be stretched without resorting to manual CSS modifications?

Answer 1

The jQM Checkbox does not support data-inline. All you need to do is change the label CSS property display to inline-block.

<label class="inline">
    <input type="checkbox" name="chk0" class="ui-btn-inline" />Check me
</label>

.inline {
    display: inline-block !important;
}