CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-switch
Sebastian
Sebastian

Reputation: 4811

bootstrap-switch how to show large label text

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?

Upvotes: 9

Views: 40511

Answers (3)

ni8mr
ni8mr

Reputation: 1785

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.

Upvotes: 0

kjw
kjw

Reputation: 1669

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.

Upvotes: 0

KyleMit
KyleMit

Reputation: 30157

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

screenshot

Upvotes: 31

Related Questions