Prevent text selection with html

Is it possible to disable text selection in Bubble, like if I use this CSS:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

Where would I implement this?

You can put that css inside your page html header or settings/seo script meta in header.
If you are on a paid plan, if not you can place it inside of html element.

I like to put my css into database then call it from html element like this:


image

To use classes “.” instead of ids “#” you can use a plugin called classify then write your classes like so:
image

if not you can use #noselect then just write that inside id attribute on the element that you want to disable selection.

1 Like

Hi @aphz88,
div.Text{
-webkit-touch-callout: none; /* iOS Safari /
-webkit-user-select: none; /
Safari /
-khtml-user-select: none; /
Konqueror HTML /
-moz-user-select: none; /
Old versions of Firefox /
-ms-user-select: none; /
Internet Explorer/Edge /
user-select: none; /
Non-prefixed version, currently
supported by Chrome, Opera and Firefox */
}
Goto Setting->SEO/Metatags on your appeditor.
Goto section “Script/meta tags in header” add above css.

Note:
Above one for apply to all the text div’s.
if you need to apply this to specific text then enable “Expose the option to add an ID attribute to HTML elements” on Setting->General.
and update css selector to id attribute.

1 Like

Hi @manikandan

I got that display on top, and its not working for me.


Try to add new html element on your page. and add below content inside HTML content.

body{ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

for your reference : https://test-test-1.bubbleapps.io/version-test/newpage?debug_mode=true

Hope it works.

3 Likes

Your method is not working for me :thinking:

I’m sure this is a terrible idea… But what about a transparent group on top of the text. I know it’s likely going to screw with responsive items, but just a thought.

with transparent group on top you can still select with cmd a.

Making things unelectable has usecase, I wouldn’t suggest the whole page.

This is a terrible idea:

Why doesnt discourse have block feature, too many annoying people here.

Did you used CMD + a to select the text? Are you using mac or windows?

CSS commands don’t affect children elements. The selection blocking is only applied on the element specified and not to the ones it may contain. In Bubble, a text element is a div but the actual text is inside a child div so it’s out of reach for the user-select rules.
To also affect descendants elements of the one on which you apply the rules, have an “*” to tell the CSS engine (also, include all children!). So this should work:

And using Classify, version 2.0, you would write in the ID field: {addClass: "noselect"}.

4 Likes

Did anyone succeed with this solution, i tried all of the above with no succes, is there anything changed that should be corrected here?

Or should i just try again for the 100. time :slight_smile: Thanks a lot, i have tons of long press and scrolls and its really bad on mobile when text selection shows…

I have installed classify and {addClass: “noselect”} to all my elements, does classify need further installation to work?

ooops, added <style></style> and it works perfect… thanks!

2 Likes

This topic was automatically closed after 70 days. New replies are no longer allowed.