[#7452] Message display on small screen

activha
ONLINE
Posts: 2327
Thanks: 117
Karma: 13

5 years 8 months ago - 5 years 8 months ago #310339 by activha

[#7452] Message display on small screen was created by activha

Hello

I have noticed that on smartphones the message window display is located at the full bottom of the page and we had to scroll a long way to access it.

The behavior occurs at width : 575px. Above the display is fine, under we have to scroll.

We tracked it to the top css which is way too low in the following code.

Code:

<div id="qtip-59" class="qtip cb_template cb_template_4d95f3 pmMessagesModal popover qtip-modal qtip-pos-c qtip-fixed qtip-focus qtip-hover" tracking="false" role="alert" aria-live="polite" aria-atomic="false" aria-describedby="qtip-59-content" aria-hidden="false" data-qtip-id="59" style="width: 90%; height: 90%; z-index: 14801; top: -2163px; left: 29px; display: block;"><div class="qtip-tip" style="display: none;"><canvas></canvas></div><div class="qtip-content p-0 popover-body" id="qtip-59-content" aria-atomic="true" style="height: 100%; max-height: 5144px;"><div class="d-flex flex-column h-100 mh-100 pmMessages pmMessagesDefault" style="display: block; visibility: visible;">

Setting top : 0px solves the display on small screens.

Can you tell me where to change it in css template or is it dynamically outputed by qtip ?

Best thing would be to simply redirect to the plugin page when this is displayed on small screens to avoid modal windows under 576px if you agree ?

Thanks
Jean

Last edit: 5 years 8 months ago by krileon. Reason: Added [#7452] tag to subject

Please Log in or Create an account to join the conversation.

krileon
ONLINE
Posts: 48437
Thanks: 8275
Karma: 1443

5 years 8 months ago #310343 by krileon

Replied by krileon on topic Message display on small screen

The message modal window, like the notification modal window, centers on the screen and does not scroll. The message rows in the modal window scroll. If you're not seeing this behavior you may have viewpoint issues in your template it self. All my testing looks fine in Chrome/FF emulation and using an android phone (I do not have an apply product, sorry). Try switching to default Joomla protostar template and see if issue persists. The below is how it should look.

If issue persists please PM backend super administrator login credentials and will test using the 3 methods above. Again as I've no apply product there's nothing I can do regarding testing and debugging apple specific problems.

Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.

Attachments:

Please Log in or Create an account to join the conversation.

activha
ONLINE
Posts: 2327
Thanks: 117
Karma: 13

5 years 8 months ago #310350 by activha

Replied by activha on topic Message display on small screen

You were right we had a css rule in our template interfering with you display

I had to change :

Code:

.offcanvas-init {
  overflow-x: hidden;
  position: relative;
}

Code:

.offcanvas-menu .offcanvas-init {
  overflow-x: hidden;
  position: relative;
}

in order to solve it

Thanks anyway for the help

The following user(s) said Thank You: krileon

Please Log in or Create an account to join the conversation.

activha
ONLINE
Posts: 2327
Thanks: 117
Karma: 13

5 years 8 months ago #310368 by activha

Replied by activha on topic Message display on small screen

Well I wrote too quickly my problem is not solved.

Changing the css rule in our template induces wrong behavior for the off canvas menu so I had to revert to the initial rule which is :

Code:

.offcanvas-init {
  overflow-x: hidden;
  position: relative;
}

The position:relative rule seems to interfere with the modal window which uses qtip and I have no clue what rule to add in override.css in order to properly display this modal window on small screens.

I guess that I need your help on this one.
PM sent

Please Log in or Create an account to join the conversation.

krileon
ONLINE
Posts: 48437
Thanks: 8275
Karma: 1443

5 years 8 months ago #310380 by krileon

Replied by krileon on topic Message display on small screen

Our model open CSS just needs to set position: initial with !important. It currently does not. We add a class when the model is opened and remove it when it's closed so that should avoid it conflicting with your templates off canvas usage. The below should work.

Code:

.cbTooltipModalOpen {
    position: initial !important;
}

forge.joomlapolis.com/issues/7452

The following user(s) said Thank You: activha

Please Log in or Create an account to join the conversation.

Moderators: beat, nant, krileon