OPENMEETINGS-2339 Fix issue around icons hidden behind drag for video pod #86
Conversation
…nt for video-pod.
| @@ -287,7 +287,7 @@ var Video = (function() { | |||
| }); | |||
| } | |||
| v.parent().find('.ui-dialog-titlebar-close').remove(); | |||
| v.parent().find('.ui-dialog-titlebar').append(OmUtil.tmpl('#video-button-bar')); | |||
| v.parent().append(OmUtil.tmpl('#video-button-bar')); | |||
There was a problem hiding this comment.
Move icons one level on top of the ui-dialog-titlebar. ui-dialog-titlebar is the element jquery-ui makes dragable.
Like this it looks exactly the same but doesn't have the issue, so that on Mobile you can still click the icons AND drag the dialog.
sebawagner
deleted the
feature/OPENMEETINGS-2339-cannot-click-close-icon-on-touch-surface-for-jquery-ui-draggable-window
branch
|
Hello @sebawagner, this is how video pod looks for me now: I would say it should be fixed .... |
| { | ||
| background-color: var(--white); | ||
| } | ||
| .user-video .ui-dialog-titlebar .buttonpane { | ||
| .user-video .buttonpane { | ||
| background-color: var(--white); | ||
| position: absolute; |
There was a problem hiding this comment.
@sebawagner unfortunately this will NOT work :(
dialog has position: absolute so positioning of this buttonpane is not honored
There was a problem hiding this comment.
I fixed that before, let me have a look. It worked in chrome.
There was a problem hiding this comment.
It did work for me on Chrome.
I think there is some CSS missing that I did accidentally not commit. I think some top: 20px somewhere is missing.
This fix moves the icons on top of the drag element.
By doing this you can drag it on mobile touch and yo ucan still click the icons.
This fixes the issue that on mobile/touch devices you can't click on the icons as the DIV with the ui-titlebar is on top.
This is similar to the fix as suggest by @solomax in the Jira.