Bootstrap-switch, how to show a large shortcut text

Question

I use twitter bootstrap-switch plugin to show a checkbox with two options. It is great for checkboxes with small label text, such as yes / no. However, when it comes to larger label text, such as “Normal / Abnormal,” then part of the text is not displayed to the user.

I tried using the data_size attribute:

 @Html.CheckBoxFor(model => Model.keyitems[i].Status, new { @checked = "checked", @data_on_text = "Normal", @data_off_text = "Abnormal", @data_size = "switch-large" }) 

But that did not work.

How can I make the plugin support longer text?

Answer 1

First of all, data attributes use hyphens ( - ) rather than underscore ( _ ).
In addition, "switch-large" is not a valid value for the size parameter, which takes the following values:

null, 'mini', 'small', 'normal', 'large'

More importantly, the large control does not actually do so much to resize. You will have to redefine the width of the control as follows:

 .bootstrap-switch-large{ width: 200px; } 

All control widths are based on the percentages of their parent, so everything else should still issue a penalty.

 <input type="checkbox" class="switch" data-on-text="normal" data-off-text="abnormal" data-size="large" /> 

Demo in jsFiddle

Answer 2

Something else to potentially check the jQuery version. I inherited a site on which an older version was installed, and the button sizes were too small, cutting off the text. As soon as I used the current version, everything started working as it should.

Answer 3

The accepted answer is great, I just want to add a link to the plugin here. I used it in similar cases. This is BootStrapSwitch . It supports callbacks, which are a real perk.