bootstrap-switch how to show large label text

Question

I am using twitter bootstrap-switch plugin in to show a checkbox with two options. It works well for checkboxes with small label text like "yes/no". However, when it comes to bigger label text like "Normal/Abnormal", then part of text is not visible to the user.

I tried to use 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 it didn't work.

How can I make the plugin support longer text as well?

KyleMit · Accepted Answer · 2014-07-21T15:15:04.783

31

First of all, the data attributes use hyphens (-), not underscores (_).
Also "switch-large" is not a permissible value for the size option, which takes the following values:

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

More importantly, a large control doesn't actually do that much to change the allowable size. You'll have to override the control width like this:

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

All the control widths are based off of percents of their parent, so everything else should still render fine.

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

Demo in jsFiddle

edited Jul 21 '14 at 15:15

answered Jul 21 '14 at 14:41

KyleMit

30,350
66
462
664

Thanks for answer but if you use data attribute in MvcHtmlString, you must write underscores ( _ ). In MvcHtmlString, hypens ( - ) is not work. – Erman Nov 02 '22 at 14:31
1

@Erman, that's probably a good call out for aspnet users, but this question is just about the toggle in general. dotnet will still take the MvcHtmlString helper and build attributes with hyphens when rendering to html. Which is to say, that piece of syntax is unique to aspnet, and might not be important to cover here in a more general purpose answer. – KyleMit Nov 02 '22 at 17:51
Yes, you are absolutely right, I just wanted to say. have a nice day. – Erman Nov 02 '22 at 19:05

score 0 · Answer 2 · answered May 27 '15 at 15:40

0

Something else to potentially check is jQuery version. I inherited a site that was running an older version and my button sizes were all too small, cutting off the text. Once I used a current version everything started working as it should.

answered May 27 '15 at 15:40

kjw

1,459
3
17
24

score 0 · Answer 3 · edited Aug 20 '18 at 20:30

0

Accepted answer is great, i just want to add a reference to a plugin here. I have used it in similar cases. It is BootStrapSwitch. It supports callbacks which is a real perk.

edited Aug 20 '18 at 20:30

Beatboxace

3
3

answered Jan 24 '18 at 10:52

ni8mr

1,725
3
31
58

bootstrap-switch how to show large label text

3 Answers3

Demo in jsFiddle