Text element not marked

[another]

How to make text filed not marked with mouse, as to be more professional?

Sometimes when you click on the text filed which has workflow, it marks a word within the text filed, not good UX. Thanks!

[adamhholmes]

If I understand what you’re asking correctly, you can use the following CSS:

-webkit-user-select: none; /* Safari /
-ms-user-select: none; / IE 10 and IE 11 /
user-select: none; / Standard syntax */

[another]

Thanks!

Have done some research here, how to add CSS in this case, have used java and html, but never CSS.

There is Classify plugin for CSS, or should I use Toolbox, maybe some other?

Have tried with HTML element:

-webkit-user-select: none; / Safari /*
-ms-user-select: none; / IE 10 and IE 11 /
*user-select: none; / Standard syntax /

And adding “none” to element ID atribute

No success

Can you direct me please, thanks!

[adamhholmes]

Sure… here’s what you need to do…

If you only need it for a single text element then there’s no need to use any plugins - you can just use it with the element ID Attribute…

i.e. give the element an ID Attribute - e.g. text

Then just add the following in an HTML element:

<style> 
#text {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}
</style>

If you need it on more than one element on the page then it’s more efficient to work with classes - so for that you’ll need the Classify plugin.

Install the plugin, then add the same class to all the elements you want to apply the CSS to - for example add the class id noSelect by entering the following in the elements’ ID Attributes: {addClass: "noSelect"}

Then add the following in an HTML element:

<style> 
.noSelect {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}
</style>

[another]

Thanks @adamhholmes!

In both cases you add the “same” CSS to HTML element, and in the both cases you add Element’s ID attribute, what is the difference then with using the Classify and without the Classify?

(Text fields per page to apply is from 4 - 12, pages to apply is around 10)

[adamhholmes]

It’s the same CSS properties, but in one case they’re being applied to an individual element (with #), and in the other case they’re being applied to a class (with .).

The difference is, if you apply it to element IDs (without the Classify plugin) you need to apply it individually to EVERY element you want it to apply to (and each element must have it’s own unique element ID).

So if you had 5 elements on the page (with the element IDs text1 text2 text3 text4 text5) you’d have to include ALL the element IDs in the CSS, either like this:

<style> 
#text1 {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

#text2 {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

#text3 {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

#text4 {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

#text5 {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}
</style>

…which isn’t very efficient…

Or like this:

   <style> 
    #text1, #text2, #text3, #text4, #text5 {
      -webkit-user-select: none; /* Safari */
      -ms-user-select: none; /* IE 10 and IE 11 */
      user-select: none; /* Standard syntax */
    }
    </style>

Which is better…

…but you’d still need to refer to each element individually (and if you add any additional elements in the future you’ll need to remember to add the element ID to the CSS).

But if you apply a class to the elements instead (using the Classify plugin), then your html only needs to contain the CSS for the 1 class, i.e.

<style> 
.noSelect {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}
</style>

… and that will apply the CSS to ALL elements which have that class, including any additional elements you add in the future…

[another]

Oh, now I see! Thanks @adamhholmes, you are really great here in the Bubble community that makes me wonder if you have your own web-app(s) or such?

I don’t have code background, and have very basic understanding of bb-code and html, and now let us say CSS…

Have thought the whole time this code is HTML, which is CSS now that I see…

Good code btw, if you want to remove scrolling bar from one or more repeating group!

<style type="text/css">
#noscrollbar::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
#noscrollbar::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
#noscrollbar{
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
#noscrollbar::-webkit-scrollbar-thumb {
  background: transparent;
  border: 0px none;
  border-radius: 0px;
}
#noscrollbar::-webkit-scrollbar-thumb:hover {
  background: transparent;
}
#noscrollbar::-webkit-scrollbar-thumb:active {
  background: transparent;
}
#noscrollbar::-webkit-scrollbar-track {
  background: transparent;
  border: 0px none;
  border-radius: 0px;
}
#noscrollbar::-webkit-scrollbar-track:hover {
  background: transparent;
}
#noscrollbar::-webkit-scrollbar-track:active {
  background: transparent;
}
#noscrollbar::-webkit-scrollbar-corner {
  background: transparent;
}
</style>

(Have thought to be HTML, as being placed in the HTML element…)

How for example this CSS (within the HTML element) can be “reused”? i.e. by adding “noscolllbar” to RG’s ID attributes, it removes the scrolling bar.