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
12261.png

Hello Michael,

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

Do you have any updates on this issue?

Thanks,
Diogo

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.

Any update to this?

I’m using Vaadin 7.

Thanks.

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