8

With the subsequent code :

<span>Label1 Label2</span>
<span style="float:left"><span>Value</span></span>

when double-clicking on the "Value" word, Label2 is selected (highlited) but not Label1. Why is this the case ?

What can I do to select only the "Value" word and none of the "Label" words ?

Live example: http://codepen.io/anon/pen/IHDzj

Edit: this bug only exists in Chrome

j08691
  • 204,283
  • 31
  • 260
  • 272
Molochdaa
  • 2,158
  • 1
  • 17
  • 23

4 Answers4

10

This is possibly the Chrome issue. Because in Firefox it works fine. However to solve it in chrome just add space before closing of first span tag as shown here.

<span>Label1 Label2 </span>
<span style="float:left"><span>Value</span></span>

Because whenever we select a text by doubleclicking it.The word as well as white space got selected in chrome and this bug has already fired in chromium issue.

Roshan
  • 2,144
  • 2
  • 16
  • 28
3

Try using the property user-select: none for the labels so that it wont get selected on clicking.This property is vendor specific.

html

<span id = "label1">Label1 Label2</span>
<span style="float:left"><span>Value</span></span>

css

#label1 {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

DEMO

Reference:Stack Overflow Post

Read more on user-select

Community
  • 1
  • 1
Sunil Hari
  • 1,716
  • 1
  • 12
  • 20
3

I can confirm, that I had the same problem in Chrome, but not in Firefox. The solution I used was to add a space before Value like so:

<span>Label1 Label2</span>
<span style="float:left"><span> Value</span></span>

The solution by Roshan didn't work for me, because double clicking Value would also select the space after Label2.

Community
  • 1
  • 1
Alexander Popov
  • 23,073
  • 19
  • 91
  • 130
1

My problem might be a bit different, since I used float: right on the second node.

.property-title {
  box-sizing: border-box;
  display: inline-block;
}

.property-value {
  display: inline-block;
  float: right;
}
<li data-name="article-number">
  <span class="property-title">Label</span>
  <span class="property-value">Value</span>
</li>

The suggested solution from Roshan didn't work for me. I ended up adding a &nbsp; after the first node.

<li data-name="article-number">
  <span class="property-title">Artikelnummer</span>&nbsp;
  <span class="property-value">8C32345</span>
</li>
Kjell
  • 832
  • 7
  • 11