diff options
| author | Pekka Hyvönen <pekka@vaadin.com> | 2017-05-10 14:42:31 +0300 |
|---|---|---|
| committer | Ilia Motornyi <elmot@vaadin.com> | 2017-05-10 14:42:31 +0300 |
| commit | cbb4393847f02fdbdcd64528918aeacbdc5565e3 (patch) | |
| tree | b6003782b956f5f1f9aed2f1d4707d383515a810 /documentation/advanced/advanced-dragndrop.asciidoc | |
| parent | 624a9594b55f0b35e75b9aefd80a97049bc51eed (diff) | |
| download | vaadin-framework-cbb4393847f02fdbdcd64528918aeacbdc5565e3.tar.gz vaadin-framework-cbb4393847f02fdbdcd64528918aeacbdc5565e3.zip | |
Fix partly missing drag image regression on Safari
Doesn't fix #9261, drag image missing on Safari when dragging grid row because
that has position: absolute and offset.
Diffstat (limited to 'documentation/advanced/advanced-dragndrop.asciidoc')
| -rw-r--r-- | documentation/advanced/advanced-dragndrop.asciidoc | 22 |
1 files changed, 13 insertions, 9 deletions
diff --git a/documentation/advanced/advanced-dragndrop.asciidoc b/documentation/advanced/advanced-dragndrop.asciidoc index bcdfb2343d..57764b55dd 100644 --- a/documentation/advanced/advanced-dragndrop.asciidoc +++ b/documentation/advanced/advanced-dragndrop.asciidoc @@ -73,20 +73,24 @@ dragSource.addDragEndListener(event -> }; ---- -[NOTE] -==== -The browsers allow the user to select and drag and drop text, which may cause some issues when trying to drag a component that has text. You can fix this by setting the following style rule to the drag source component to prevent dragging of the text instead of the whole component. -[source, css] ----- -user-select: none; ----- -==== - === CSS Style Rules The drag source element, additional to it's primary style name, have a style name with the `-dragsource` suffix. For example, a Label component would have the style name `v-label-dragsource` when the drag source extension is applied to it. Additionally, the elements also have the `v-draggable` style name that is independent of the component's primary style. +The browsers allow the user to select and drag and drop text, which could cause issues with components that have text. The Framework tries to prevent this by automatically adding the following style to all `v-draggable` elements. It is included by the sass mixin `valo-drag-element`. + +[source, css] +---- +.v-draggable { + -moz-user-select: none !important; + -ms-user-select: none !important; + -webkit-user-select: none !important; + user-select: none !important; +} +---- + + [[advanced.dragndrop.drophandler]] == Drop Target |