Search code examples
htmlcsstwitter-bootstrapbootstrap-switch

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?

Solution

  • 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