Bootstrap: HTML input checkbox with class .form-control width problem

Created on 21 Mar 2015 · 4Comments · Source: twbs/bootstrap

Hi,

When generating a checkbox field with MVC Razor, as follows:

@Html.EditorFor(model => model.IsHappy)

It inserts the class form-control to the generated input element, which is in this case a checkbox.
What happens is, the element becomes huge to take up free space:

I found it that what's causing this issue is the width=100% setting of .form-control, and when I add the following underneath the .form-control classes in the _bootstrap.css_ file, issue is solved.

css

Source

weitzhandler

👍1

Most helpful comment

.form-control is only meant for use on <textarea>s, <select>s, and textual <input>s.
Use the .checkbox class for checkboxes (see the docs for details on usage).

cvrebert on 21 Mar 2015

👍2

All 4 comments

.form-control is only meant for use on <textarea>s, <select>s, and textual <input>s.
Use the .checkbox class for checkboxes (see the docs for details on usage).

cvrebert on 21 Mar 2015

👍2

I guess this is something the ASP.NET MVC Razor engine team missed out.

Thanks and sorry for bothering!

weitzhandler on 21 Mar 2015

I did not understand what is the solution and how to implement it. Please, explain like I have 6yo because I am not a CSS expert. Thanks.