User text selection in floating element in Chrome (webkit) selects more text [closed]

Question

When double clicking the text in the grey label (has float: right), chrome (webkit) also selects text at the beginning of the line (has float: left). Is there any way to counter this without adding extra markup or changing the label source order?

http://codepen.io/lezz/pen/xBAzr

Titanothere

Answer 1

First of all just to demonstrate the problem:

We have two adjacent div elements - each has content, and there is no whitespace between them in the markup.

When selecting the content of one of them by double-clicking - only the content of the clicked div is selected.

However, when the divs are floated with CSS and one of the divs are selected as above - Chrome selects the contents of BOTH divs

.rfloat {
  float: right;
}

.lfloat {
  float: left;
}

<h2>Non-floated elements: Double click selects each div separately</h2>

<div>Abc</div><div>def</div>

<hr>
<h2>(On Chrome:) Floated elements: Double click selects BOTH divs</h2>
<div class="rfloat">Abc</div><div class="lfloat">def</div>

I don't know why Chrome handles floating elements this way - and it's probably a bug, but as far as your question goes:

Is there any way to counter this without adding extra markup or changing the label source order?

As a workaround you could set display:flex on the container element of the floats - that would make the float declaration on the flex items redundant because floats don't apply to flex items - see the spec

float and clear do not create floating or clearance of flex item, and do not take it out-of-flow.

Additionally, we can use some flexbox properties to style the divs to look the same as when they were floated:

.container {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

.container {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}
.rfloat {
  float: right;
}

.lfloat {
  float: left;
}

<h2>Workaround: Set container with display:flex</h2>
<div class="container">
  <div class="rfloat">Abc</div>
  <div class="lfloat">def</div>
</div>

Halliehallman

You're overcomplicating the problem. The issue is simply that the two elements are touching each other within the code (with no whitespace in between). When displayed as inline or inline-block or when taken out of the normal flow context (i.e. when floated) the two elements are treated as one extended piece of text, thus when you double click to select the text it selects both elements. Your flex solution works because it causes the elements to behave like block elements and not inline elements - they're their own separate entities and not treated as part of the same structure. – Ornithology

As for whether this is a bug: I'd say it isn't. If you were to use the following markup to display the word "potato" with a bold "t" character you'd still expect double clicking to select the entire word: po<b>t</b>ato. If this <b> element was displayed as a block and not inline, however, you would no longer expect it to select the entire word. – Ornithology

...that isn't to say your answer is incorrect, of course. It does indeed solve the problem, so +1 for that. My comments above relate solely to the first half of your answer. – Ornithology

@JamesDonnelly While I agree with what you're saying, the OP wanted a solution without changing the markup - so adding a space wasn't an option. – Halliehallman

Answer 2

This is because you have no white-space (or other word-ending characters) separating the two spans. If you had the a paragraph containing those with no white-space or other relevant word-ending symbols you would expect the selection to include them. At text-level, your content here is all one word ("123456789Some"). Take the following example:

<span>Abc</span><span>def</span>

Becomes: Abcdef

Even if you were to style the first span to appear trillions of pixels away from the second, the two elements would still be classed as one word.

Ornithology

If that was the case the problem would be solved when changing the markup from span to div, but the problem stays. – Titanothere

Answer 3

The problem is because of spacing in the container. There should be a space to separate between words(either inside the container or outside). So after trying different possible options, I found the following(correct me if I'm wrong)

1. If it is Block element container's it will be placed in two lines in browser no spacing required whats so ever.
2. If it is either inline or inline-block then the content will be placed in single line in browser so we've to explicitly give the spacing either inside two containers or in between the containers.

.rfloat {
  float: right;
}

.lfloat {
  float: left;
}
.block{
  display: inline-block;
}

<h2>floated elements with space: Double click selects each div separately</h2>
<div class="rfloat"> Abc</div><div class="lfloat"> def</div>
<br>
<hr>

<h2>floated elements without space: Double click BOTH divs</h2>
<div class="rfloat">Abc</div><div class="lfloat">def</div>
<br>
<hr>

<h2>Non-Floated elements with space: Double click selects each div separately</h2>
<div class="block"> Abc</div><div class="block"> def</div>
<br>
<hr>

<h2>Non-Floated elements without space: Double click selects BOTH divs</h2>
<div class="block">Abc</div><div class="block">def</div>
<br>
<hr>

<h2>Non-Floated elements without space(divs separated with line break in HTML): Double click selects div separately</h2>
<div class="block">Abc</div>
<div class="block">def</div>

Allin