CODEWITHSUNDEEP
javascripthtmlcss
Ilja
Ilja

Reputation: 46479

Make div non-selectablee in ios

I am working on a scrollable view that overlays an image. Such view consists of 2 divs, one is scrollable, basically a div with fixed height / width and overflow-y and thee other is content, an empty div with height greater than that of scrollable.

The issue I came across is that long pressing on them causes ios to select a div. I tried setting user-select on both of them, but it didn't do the trick. I'm not sure which one of them is being selected, but I believe it is content.

It is important to note that both of these are created programmatically via

const mytDiv = document.createElement('div')

and appended to the body. Styles for them are set via

myDiv.style.cssText = "user-select: none;"

Here is basic html generated

<div class="scrollable" style="...">
  <div class="content" style="..."></div>
</div>

And this is ios selection I am seeing after long-press even with user-select set to "none".

enter image description here

Upvotes: 1

Views: 374

Answers (2)

myjobistobehappy
myjobistobehappy

Reputation: 776

Try this:

myDiv.style += `
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
`;

Upvotes: 1

Boudy hesham
Boudy hesham

Reputation: 352

on ios, and safari browsers i believe it was like this.

-webkit-touch-callout : none
-webkit-user-select:none
//webkit-touch-callout : none: No callout option will be shown when the user's touch and holds on the element with this attribute.
//webkit-user-select : none: You cannot select text on Safari on macOS, if you do a right-click no options to copy is displayed.

if you want all other browsers too:

-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
 user-select: none;

Upvotes: 2

Related Questions