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.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Disable text selection
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
Hello Michael,
I am experiencing similar situation with the MenuBar and Table components.
Do you have any updates on this issue?
Thanks,
Diogo
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.
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.
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.
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