Contact us
Get started
Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Calling javascript synchronously by Enver Haase, 1 month ago
Recent Posts
Vaadin Forum3. Vaadin 6, 7, 8Framework UI

Disable text selection

Michael Holtermann
1 decade ago Mar 28, 2012 8:49am

Hello,

I'd like to disable text selection on most elements. For example, if I create a menu bar, and the user moves the mouse a little while clicking, parts of the application will be marked as selected (blue background, see image below). This applies to table cells, too: the user clicks on a row to select it, shakes the mouse a little and the selection mark appears.

It's possibel to disable the selection with CSS

user-select: none

but this is not standard compliant yet and does not work in IE, of course :-/. In IE, one must add the custom attribute 

unselectable="true"

to the HTML tags.

Is there a simple solution available in Vaadin? ExtGWT supports this feature, so it must be possible, at least.

TIA!
Regards,
Michael

Last updated on Mar, 28th 2012
Diogo Harger
1 decade ago Sep 10, 2012 2:44pm

Hello Michael,

I am experiencing similar situation with the MenuBar and Table components.

Do you have any updates on this issue?

Thanks,
Diogo

Henri Sara
1 decade ago Sep 11, 2012 7:29am

Michael Holtermann: It's possibel to disable the selection with CSS

user-select: none

but this is not standard compliant yet and does not work in IE, of course :-/. In IE, one must add the custom attribute 

unselectable="true"

to the HTML tags.

Currently, Vaadin does not support adding custom attributes. If you absolutely need this for IE, you need to either extend/modify the client side components or develop and execute a piece of JavaScript that adds the attribute.

In Vaadin 7, this could probably be done more elegantly with an Extension.

Dino Fancellu
9 years ago Nov 10, 2013 9:17pm

Any update to this? 

I'm using Vaadin 7.

Thanks.

Henri Sara
9 years ago Nov 11, 2013 8:39am

This would probably be easiest to implement as a (very small) component extension - perhaps even a JavaScriptExtension if you are not averse to writing a few lines of JS.

See the tutorials on using JavaScript with Vaadin 7 and on Extensions here.

Dino Fancellu
9 years ago Nov 11, 2013 4:53pm

For me I just added 

  .noselect {
    user-select: none;
   -o-user-select:none;
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
 }

to my theme.scss

Then told it to use the theme and then put 

menubar.styleNames+="noselect"

I couldn't be bothered reading all that stuff about extensions.

Hope this helps out others.

+2
Dino Fancellu
9 years ago Nov 11, 2013 5:01pm

Also put in this so that you can't select window bar of subwindows and ALL menu bars as well.
No need to jam in "noselect" style as above.

 .v-menubar,.v-window-outerheader {...

Using Scaladin in case anyone was wondering

Oh yes, you define theme in Scaladin like this, fyi

class LayoutUI extends UI(title = "App title",theme="mytheme") {

Also this stops the slight blue flash in the window bar when dragging sub windows