ionic 2: How to make text selectable?

Question

I want users to be able to select text content (in ionic 2) so that they can copy it and paste it elsewhere, but it seems that text selection has been disabled. Users can se

Answer 1

You do not have to use the wildcard selector to apply the fix like others have stated. If you use remote debugging in the browser, you can select any element and find what is setting its styles.

• Open dev tools
• Select the element you want to inspect with Ctrl + Shift + C
• Go to the computed tab
• Find the style, in this case, user-select
• Click on the none option underneath

• It should take you to where it's being set. html.plt-mobile ion-app is the CSS selector being applied. Now all you have to do is target that selector in your own stylesheet.

  html.plt-mobile ion-app {
       -webkit-user-select: auto;
       -moz-user-select: auto;
       -ms-user-select: auto;
       user-select: auto;
  }
  

Answer 2

For my Ionic 4 project, using the body tag didn't work but this did:

* {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

Answer 3

In Ionic 4 add

* {

    -webkit-user-select: text;
    
    -moz-user-select: text;
    
    -ms-user-select: text;
    
    user-select: text;
    
    }

**to the global.scss file. ** But if you want to copy/paste only a specific tag text, add something like this instead in your global.scss:

.selectable {

    -webkit-user-select: text;
    
    -moz-user-select: text;
    
    -ms-user-select: text;
    
    user-select: text;
    
    }

And then add class="selectable" property to the tag.

Hope it helps

Answer 4

You need to add the following CSS to the HTML tag you want to be selectable

user-select: text;

Answer 5

I added

body {
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}

to the app.scss file

For individual items, since this is SCSS, you can also create a mix-in with those 4 css lines. Keep in mind Safari or other browsers may not respond well to just user-select.