Issue with popup: CSS display overlap

  • Resolved Anonymous User 18315536

    (@anonymized-18315536)


    2 years, 1 month ago

    Hello,

    I have an important issue: the native popup takes virtually a big part of the right column. I say “virtually” because the visible chat window is smaller than the place it takes as a CSS object. But even if visually everything looks fine (= the chat popup is not too high), I experience a layout problem. I have several buttons in my webpages on the right column. But with the popup active, even closed, I cannot click on those buttons anymore. CSS inspector shows me that there are objects related to the chat popup above my buttons.

    So the html structure of the chat popup seems to take a huge part of the right column, therefore disabling ability to click on a big part of the right column. This is really problematic.

    Thanks in advance for your help!

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Jordy Meow

    (@tigroumeow)

    Oh I see the issue! However I would like to see it a bit more ?? Do you have a link to your chatbot? I will try to find a way to make it better by using CSS.

    Thread Starter Anonymous User 18315536

    (@anonymized-18315536)

    Hello @tigroumeow

    Seems it comes from my side since I tryed to modify the height of the sitewide chat popup! Basic chat height (although too short…) is ok I have no problem.

    Therefore can you provide a code or a solution to modify the height of the chat sitewide popup? Would be great. I’ve read in your tutorial some tweaks about CSS but did not find how to change default height…

    Plugin Author Jordy Meow

    (@tigroumeow)

    Hi,

    You can use something like this:

    #mwai-chat.mwai-window .mwai-content {
  max-height: 40vh;
}

    By default, the max height is 40% of the height of the screen, but you can set whatever size you like ?? Depending on where you override the CSS, you might need to use “!important”.

    But I have the feeling you might asking something else?

    Thread Starter Anonymous User 18315536

    (@anonymized-18315536)

    Thanks for you reply I adapted the CSS it works. However with or without this code, there is still an overlap problem… Please see :

    https://youtu.be/koPn0h1x9hk

    Plugin Author Jordy Meow

    (@tigroumeow)

    Thanks for the video, I see ?? Can you try this?

    .mwai-chat.mwai-window .mwai-header {
  display: none;
}
    Thread Starter Anonymous User 18315536

    (@anonymized-18315536)

    Hello thank you! It works well ?? (I had to add !important).
    but then the X to close the window is not visible anymore…

    Plugin Author Jordy Meow

    (@tigroumeow)

    Hi @highdem,

    I forgot to fix this in the latest release! I will include the fix in the 0.6.9 release later today ??

    Thread Starter Anonymous User 18315536

    (@anonymized-18315536)

    Ok ?? thank you @tigroumeow !

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Issue with popup: CSS display overlap’ is closed to new replies.