14

I'm working with a layout that uses flexbox. Works good so far but I have a problem with copying text to clipboard.

Apparently, using flexbox seems to add a newline character after each child node

It can be seen in the demo below, copying text "LabelMessage" works normally (paste it and it remains one-line). But if you add display:flex to container a newline is added after "Label" upon copying to clipboard

What is causing this? Is there any way around it?

Fiddle: http://jsfiddle.net/zv4mamtm/

$('.toggleFlex').on('click', function() {
  $('.container').toggleClass('flex')
})
.container.flex {
  display: flex;
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="toggleFlex">toggle</span>
<hr>
<div class="container">
  <span class="label">Label</span>
  <span class="label">Message</span>
</div>
<hr>
<textarea></textarea>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
MayThrow
  • 2,159
  • 4
  • 24
  • 38

1 Answers1

2

As specified in the previous answer and this post :

In a flex container the child elements ("flex items") are automatically "blockified" ( more details )

depending on your use case, using display: contents can be helpful if you only want to copy / paste text,

see : how display contents works

The easiest way to understand what happens when display: contents is used is to imagine the element’s opening and closing tags being omitted from the markup.

and from the specification :

For the purposes of box generation and layout, the element must be treated as if it had been replaced in the element tree by its contents

( you might want to check the compatibility of this as it won't work in IE and Edge )

enter image description here 

$('.toggleFlex').on('click', function() {
  $('.container').toggleClass('flex')
})
.container.flex {
  display: flex;
  color: red;
}

.container.flex span {
  display: contents;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="toggleFlex">toggle</span>
<hr>
<div class="container">
  <span class="label">Label</span>
  <span class="label">Message</span>
</div>
<hr>
<textarea></textarea>

this will override the display:block of the span caused by th flex container :

enter image description here

Taki
  • 17,320
  • 4
  • 26
  • 47
  • pay attention to this, it doesn't remove the display block, it does remove the container and keep only content ... `For the purposes of box generation and layout, the element must be treated as if it had been replaced in the element tree by its contents` --> so it's like you have this `
    Label Message
    `. No more span so no more issue and you are no more able to style each word alone     – Temani Afif May 14 '18 at 20:02
  • This makes the text uncopyable when flex is enabled on Firefox 60. –  May 14 '18 at 20:04
  • @TemaniAfif , it's *treated* like that, the `DOM` is not affected and you won't loose any tag , so you can style every word, check this : http://jsfiddle.net/zv4mamtm/8/ , unless i misunderstood your comment – Taki May 14 '18 at 20:33
  • check this : http://jsfiddle.net/zv4mamtm/9/ you can no more style them (no margin, centring, etc) this is what I meant. I know the DOM is *never* affect by CSS, but it's treated *like* there is no wrapper, so since there is no more wrapper you lose all the abilties of common styling – Temani Afif May 14 '18 at 20:43
  • @TemaniAfif i see what you mean, it's not a suitable solution if you want to style the `span` ( flex-items ) but that's why i added *depending on your use case* , addressing the line break issue, funny though how you can only change the color ( and font size and weight .. ) – Taki May 15 '18 at 04:17
  • Yes, but it's not funny I guess it's a *bug* or something special with these styles, I need to deep into the Spec to see why we can style color, font-size, etc as it shouldn't be – Temani Afif May 15 '18 at 08:24