Robba Robba - 1 month ago 8
HTML Question

Odd selection behavior with Bootstrap grids

I'm using Bootstrap (3.3.6) and I've noticed that when trying to select the text of a grid column (on Windows anyway) by clicking on it yields some weird behavior.

Take the following for instance:

<div class="row form-horizontal">
<div class="col-xs-12 col-sm-6 col-md-12">
<div class="form-group mb0 sm-mb md-mb0">
<label class="col-xs-12 col-sm-6 col-md-12 control-label">EAN</label>
<div class="col-xs-12 col-sm-6 col-md-12 form-control-static">8718286480370</div>
</div>
</div>
</div>


This just shows a label containing EAN and a value for it. When you try to select the EAN value by doubleclicking on it it also selects the label EAN. Does anyone know why this is and preferably how to make it just select the value?

See the plunker below for a working example.

https://plnkr.co/edit/Fm1WGGEx1wri0VrYrC0K?p=preview

Edit:

Notice that adding a period (.) or colon (:) after the label will for some reason make selection work as expected, but that's not what I want. I've also tried adding invisible punctuation, but at some point it really becomes hack upon hack...

Answer

To answer my own question, while still not sure why this happens in Chrome, the solution is simple: put the grid values on their own line:

<div class="row form-horizontal">
  <div class="col-xs-12 col-sm-6 col-md-12">
        <div class="form-group mb0 sm-mb md-mb0">
            <label class="col-xs-12 col-sm-6 col-md-12 control-label">
                EAN
            </label>
            <div class="col-xs-12 col-sm-6 col-md-12 form-control-static">
                8718286480370
            </div>
        </div>
    </div>
</div>