JqueryMobile checkbox doesn't like "data-inline"

asp.net-mvc, jquery-mobile

Solution

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;
}

Problem

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?

Original source