Prevent text selection with html

[aphz88]

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?

[Taiheta]

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:

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

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

[manikandan]

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.

[JohnMark]

Hi @manikandan

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

---

[manikandan]

@manikandan

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 */
}

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.

[Taiheta]

Your method is not working for me

[troy.roberge]

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.

[Taiheta]

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:

@troy.roberge

I’m really confused why you didn’t build your own survey with bubble… That’s pretty lame. I’m not going to fill it out on principle until it’s built on your system.

You should show off your system, not use someone els

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

[manikandan]

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

[julienallard1]

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:

@aphz88

.noselect, .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 */
}

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

[hej]

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 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?

[hej]

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