user1505192 user1505192 - 7 months ago 13
HTML Question

ASP MVC Checkbox not clickable in chrome

I'm having an issue using HTML/Bootstrap inside a razor view.

I am using the bootstrap row/col div's for formatting. When I put a checkbox within a

div class="col-md-2"
, the checkbox is not clickable inside Google Chrome. However it does work in IE.

If I remove the
div class="col-md-2"
, the checkbox becomes clickable.

The project is using the default
Site.css
and
bootstrap.css
that is produced by visual studio.

Source:

<div class="row">
<div class="col-md-2"><input type="checkbox" id="checkall" value="checkall"><span>Check All</span></div>
<div class="col-md-12"><input id="btnAdd" type="button" class="btn btn-secondary-outline" value="+" onclick="AddParamAll();" /></div>
</div>

Answer

On Bootstrap's website, when they provide examples of the grid system they say Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases... in your example your btnAdd has the max amount of col's with col-md-12.. what happens if you made the btnAdd to col-md-10 and kept the checkbox as col-md-10?

CodePen

Comments