Search code examples
iostypescriptaureliasemantic-ui

iOS 11 Semantic UI textbox modal cursor outside of textbox

I am facing a problem very similar to what was reported and resolved in this SO Question: iOS 11 Safari bootstrap modal text area outside of cursor . However, the difference for me is that I am using Aurelia & Semantic UI.

I have tried using position: fixed in ux-dialog-body as described in several fixes for the problem occuring in bootstrap (in those examples to be added to the body of the modal), however that did not work.

I would appreciate any help on this issue, thanks in advance.

enter image description here

Solution

  • So I got the idea for the fix here : Semantic-Org/Semantic-UI-React

    Basically the problem relates to the height of the content behind the modal/what the modal is lying on top of. So, hide all of it when opening the Modal and put it back when done. However, only for iOS, because for some reason on our site doing otherwise breaks Android devices.

    iOS: boolean = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);

    In opening the modal

    if (this.iOS) {
    $('body > :not(ux-dialog)').hide();
    $("ux-dialog").show();
}

    And closing

    if (this.iOS) {
    $('body > :not(ux-dialog)').show();
    $("ux-dialog").hide();
    $("ux-dialog-overlay").hide();
    $("ux-dialog-container").hide();
}

    I hope this helps someone else.