Cannot copy text inside html components

Hello there,

I want to copy some text inside my html displays. However, I can only select text from the start up untill a certain point. Ideally, I want to start my selection halfway, but this does not work. See the gif for an example of the standard html component.

copy

Hi @Jeroen_Vermunt Thanks for reaching out! I have a couple of questions as I'm having trouble reproducing this


What css did you add to your html component? Which browser are you using?

I changed nothing about the css, and I tried adding user-select: text as well.

We experience this struggle on brave, firefox and Microsoft edge. It is less noticably on shorter texts because it is possible to select the start of a text by clicking above the text and dragging halfway the short text.

Hi @Jeroen_Vermunt

The best solution I've found so far is to add this css:

.myClass {
 -webkit-user-select: text !important; 
 -moz-user-select: text !important;     
 -ms-user-select: text !important;     
 user-select: text !important;  
}

We also have a feature request for a more native solution here

Hi Tess,

Thanks for the answer.

Adding user-select works perfectly, I also added this to make it more consistent:

div, p, li {
  user-select: text !important;
}