Hi , Is there an Long press (Event) to Select , Copy & Paste a Text ? I want to have this on my app. Can you please help me, Thanks
this behavior is suppressed with a css-attribute called user-select --> you can check the ionic css, where this attribute is set and you can overwrite it for specific elements.
Can you please give me some examples ? so that I can understand it clearly , THanks
you can deactivate the selecting of content by setting a css-attribute for an dom element. This attribute is called āuser-selectā https://css-tricks.com/almanac/properties/u/user-select/. ionic sets this attribute in some of ther css-classes to avoid text-selections. you have to overwrite this attribute in your own css or at the dom elements to reactivate text-selection. You have to set it to text --> like
... style="user-select: text;" ....
why itās not working when I run it in my browser and my phone ?
Using the web inspector, inspect the element where you applied that style to. Make sure the style user-select: text;
is being applied. My guess is you are loading the ionic stylesheet after your custom stylesheet, so all the ionic properties are overriding any custom properties you set.
A workaround would be to change the order you load your stylesheets, or copy ionicās stylesheet into your own style folder and edit it there.
Hi @DaDanny , I applied it on my ionic stylesheet but itās not working , is there something wrong in my code or , Iām just wrong in implementing my code ? you can look at my code here below:
style.css
.scroll-content#aboutCss {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: text;
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
about.html
<ion-content id="aboutCss" >
<div class="card">
<div class="item item-divider">
<center>
About Us
</center>
</div>
<div class="item item-text-wrap" >
<br>
<h3>Overview
</h3>
<hr>
<p align="justify" >
Learning nowadays requires innovative methods for the students
to acquire the information essential in learning. Technology
allows educators to reinvent the learning process suitable to the
needs of the 21st century learners. <br><br>
Nowadays, vast amount of
information and data is certainly used to support the needs of
humans and even the needs of the community. Many of the social
areas such as education has expanded its technological
requirements to suit the needs of its clients. <br><br>
This study attempts to combine mobile into a game-based learning
strategy enhancing the capacity of students to understand the OOP
concepts and apply it with Java language. <br><br>
Further, the study is initiated by the researchers for the students to
be acquainted with the latest technological advancement in
relation to teaching and learning processes. The idea here is to
provide a more playful and interactive learning experience to the
students and give them a learning environment that they are all
familiar. <br><br>
</p>
<br>
<center>
<h3>Project Developers:</h3>
<hr>
<br>
<p>
<b>Programmers: </b><br>
Renmart G. Gallares <br>
Son Jave T. Pagaduan <br> <br>
<b>Tester:</b> <br>
Jovelyn Aquinde <br><br>
</p>
</center>
<div class="row">
<div class="col col-50">
<center>
<p>
<b>Analyst: </b><br>
Aaron Paul Sibayan <br>
Making Villanueva <br><br>
</p>
</center>
</div>
<div class="col col-50">
<center>
<p>
<b> Documenters:</b> <br>
Klein Ann P. Agas <br>
Desiree Lagota <br><br>
</p>
</center>
</div>
</div>
<div class="row">
<div class="col col-100">
<center>
<p>
<b>Adviser: </b><br>
Arnel B. Ocay , MIT
</p>
</center>
</div>
</div>
</div>
<div class="item item-divider">
<center>
CCS Developers
</center>
</div>
</div>
</ion-content>
</ion-view>
Iām not sure, I would take a look at this thread. Looks like some people had a few solutions you could try out.
Uhm, Iāve look at this thread but I think Iāts not working in android apps ? Do you have other solutions in my problem ?
Make sure to add
āoverflow-scroll : trueā to the ion-content
Then I wrapped the text in a div with class=āselectableā
then I made sure to add this to the selectable class.
-webkit-user-select: auto;
I havenāt tested this on an actual device, so you may want to confirm that it works on an actual device. Also, Iām not sure how this will interact with scrolling, so make sure you test that as well.
Good luck
EDIT
Just tested it on iOS and it does indeed allow the user to hightlight and copy the text. Not sure about Androidā¦
EDIT
Android and iOS both work. Just tested on my devices.
Cheers.
What did you do when you run this in your android device , did you do long press so the highlight and copy the text will appear?
Wow ! It worked ! THanks
Hi @DaDanny I Tried to put some slidebox on my app , then I tried to Implement the selectable , but itās not working can you help me with this problem ?
Oh, I finally Fixed it myself !
I removed these ionic-list and ion-item
<ion-list class="list-inset selectable"></ion-list>
<ion-item class="item-text-wrap selectable"></ion-item>
and I change it into this div
<div class="item item-text-wrap"></div>
Heck yea, dude! I knew you could solve that problem without me, you just gotta believe in yourself
If that codepen is an example of the app you are building, its really looking awesome. I can see where that quiz Iāve been helping you with will fit in haha
Youāll have to link me the final project once you finish it, Iām looking forward to seeing it.
Cheers!
Hi, I have problem with copy & paste text, already tried different solutions, but still have no results.
This is my piece of code:
<ion-view view-title="Quote template">
<ion-content>
<div class="card">
<div class="quote"><h3>Dinosaurs are a diverse group of animals of the clade Dinosauria. They first appeared during the Triassic period, 231.4 million years ago, and were the dominant terrestrial vertebrates for 135 million years, from the start of the Jurassic (about 200 million years ago) until the end of the Cretaceous (66 million years ago),[1] when the CretaceousāPaleogene extinction event led to the extinction of most dinosaur groups at the end of the Mesozoic Era.</h3>
</div>
</div>
</ion-content>
</ion-view>
And CSS
ion-content{
overflow-scroll: true;
}
.scroll-content {
background-color: #51cc74;
-webkit-user-select: auto !important;
-moz-user-select: auto !important;
-ms-user-select: auto !important;
user-select: auto !important;
}
a:link {
text-decoration: none;
}
.quote {
padding: 15px;
user-select: auto;
}
.backdrop { display: none; }
.backdrop.visible { display: block; }
.loading-container:not(.visible) { display: none; }
What can i do?
Work Perfectlyā¦Thanks a lotā¦