[#7248] - Fix for scrollbar flashing in modals (#7247)
- Closed
- 2 Jul 2015
- Medium
- Build: staging
- # 7248
- Diff
- smz:ModalsScrollbarIssue
- Success The Travis CI build passed Details
User tests: Successful: Unsuccessful:
Description
In batch modals the main window scrollbar appear/disappear when you move the mouse over a label (possibly related to tooltips...).
Steps to reproduce the issue
- Open a batch modal (either in article manager or menu manager)
- Move the mouse over a label (e.g.: "Set language" in the Menu manager modal)
- The main window scrollbar, on the right side, will disappear and the modal will snap a little bit to the right (really annoying)
Testing instructions
Apply this patch and the scrollabr will not appear/disappear and the modal will be "steady".
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Labels |
Added:
?
|
||
| Title |
|
||||||
| Rel_Number | 0 | ⇒ | 7247 |
| Relation Type | ⇒ | Pull Request for |
@test was not able to reproduce the issue, the tooltips looks correctly even with the patch applied, tested with latest chrome version and latest firefox.
This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/7248.
@watchfulli-dev Can you please share some information on your environment? Screen resolution? Tnxs!
@watchfulli-dev That's strange... very similar to my environment (only difference is that I have a 1920 x 1200 screen)
Are you sure you are on 3.4.2-rc2?
Ah, ok! This fixes a regression from 3.4.1 on which the scrollbar issue is not present (you shouldn't see tooltips, thus...)
I've updated to 3.4.2-rc2, then applied the patch, indeed no more Scrollbar but the modal header is still overlay the tooltip, while the tooltip should go over header instead
yes, and the whole modal snap a little bit to the right when you hover on labels that have tooltips, while with my fix the modal does not snap to the right, correct?
@watchfulli-dev Do you mind correcting your test result in Joomla Issues from "Tested unsuccessfully" to "Not tested" or "Tested successfully "?
@test went fine now with Joomla 3.4.2-rc2
This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/7248.
Thanks! 
... I'm coming to the conclusion that although this fix is working, the real problem lies in JHtmlBatch where we have several statement of the kind:
JHtml::_('bootstrap.tooltip', '.modalTooltip', array('container' => '.modal-body'));
This mangles with the .modal-body class attributed to the container div with side effects on the .modal-body class attributed to the <body> through the JHtmlBootstrap::tooltip() method that handles the show, shown, hide and hidden events.
Having changed the events for the modal JS from show to shown and from hidden to hide, eliminate the interaction, but I'm not yet sure this is the correct cure...
The above is BS (and I'm not referring to Bootstrap...).
The cause of the issue is explained here: #7248 (comment)
... possibly mediated by the presence of:
jQuery(document).ready(function(){
jQuery('.hasTooltip').tooltip({"html": true,"container": "body"});
});
Edit: Forget about the above too, see #7248 (comment)
First of all the hidden tooltips is a z-index thing (css).
Now for the tooltip js getting confused with the container, I have no clue. It needs to be debugged to find out where it break and why.
... actually for the modal JS the events I originally used (show and hidden) are a wee better to use, visually, but that's not important and the problem is not there...
Agree with the z-index stuff...
For the rest I hove no clue neither... just debugging and trying to understand right now.
BUT: If we are on a rush to release 3.4.2, then this hack may work in the meanwhile...
We are fighting some outdated scripts here and this is not productive at all. These are all bootstrap 2.3.2 glitches.
Would be beneficial for all the contributors if there was a way to use the BS3 framework.
Personally I don’t want to spend more time for such glitches. If the hack works lets use it!
... I don't know... it very much depends on how much time we have...
PLT?
I agree it is a nice UX feature, and I'm doing my best to keep it there, but I wouldn't call the glitch "little" (my opinion, of course...)
Dimitris, you prefer a jerking modal without scrollbar, I prefer a steady modal with scrollbar: two points of view, both respectable, IMHO...
@smz I don’t mind the scrollbar, If you go back you’ll see that some other people asked and I delivered it!
But if you ask me if I mind dropping the default operation of a modal (not able to scroll the parent window, even the mootool modal got that) over some snap, thats negative.
People use other software (FB, twitter) and when they come to joomla guess what they will say: weird!
But anyhow, if you want to revert it, I won’t stand in your way. At the end of the day I can always use my own template
No Dimitris, I don't want to revert it: it is just one of the options we have and not the first I would choose...
After all this PR is quite correct: I wouldn't call it a hack at this point, but at most a "kludge to work around a Bootstrap limitation".
The problem is that the same event, hidden, is triggered both when a tooltip is transitioned out, and when a modal is closed.
Due to this, when we exit a tooltip, the hidden event is triggered, which is the same one our modal JS is listening for to re-display the scrollbar.
Happily enough, Bootstrap modals trigger another similar event, hide, when it is about to close itself (while hidden is triggered when the modal is completely closed).
We can thus use this hide event to reset our scrollbar.
I think everybody can be happy and we can merge this into 3.4.2 as soon as we have enough tests.
With latest commit I restored the event on which the scrollbar is hidden to show, so that it is hidden at the very beginning of the modal appearance and not at the end. This way the transition is smoother and we don't see a little jump to the left right of the modal when the scrollbar is hidden.
Please note that this PR has nothing to do with tooltips placement, which is a totally separate issue.
Travis is complaining, but I'm sure it is an internal Travis problem as it has failed for time-out on a PHP version only...
For tooltips placement I'm afraid there isn't much we can do: their position is computed by bootstrap.js, (lines 1236 - 1258), and directly injected into the DOM.
The placement is above the referenced object (the <label> in our case) at 50% of its width.
Our labels occupy half the available space in the modal, and thus the tooltip is displayed accordingly.
I've tried to have the label to occupy only the needed space (through various tricks, like e.g. using a display: table-cell; styling) and indeed the tooltip is then displayed centred on the label.
Unhappily this means that much of the tooltip is then displayed out of the modal margin (for labels on the left side of the modal): cure worse than the illness.
I'm afraid the only solution would be to use a different "tooltips JS engine".
Personally, I'm throwing the towel on this...
I think everybody can be happy and we can merge this into 3.4.2 as soon as we have enough tests.
Since we already are in RC phase for 3.4.2, this will likely not go into 3.4.2.
I think it won't hurt if PLT can push this for 3.4.2. Same think goes for the safari fix
On 24 June 2015 at 09:00, Dimitris Grammatiko notifications@github.com
wrote:
I think it won't hurt if PLT can push this for 3.4.2. Same think goes for
the safari fix—
Reply to this email directly or view it on GitHub
#7248 (comment).
Brian Teeman
Co-founder Joomla! and OpenSourceMatters Inc.
http://brian.teeman.net/
| Category | ⇒ | Templates (admin) UI/UX |
+1 Indeed
Since we already are in RC phase for 3.4.2, this will likely not go into 3.4.2.
Sorry, but I'm missing the sense of a Release Candidate if you don't take the occasion to fix regressions found in it...
agreed
On 24 June 2015 at 10:53, Sergio Manzi notifications@github.com wrote:
Since we already are in RC phase for 3.4.2, this will likely not go into
3.4.2.Sorry, but I'm missing the sense of a Release Candidate if you don't
take the occasion to fix regressions found in it...—
Reply to this email directly or view it on GitHub
#7248 (comment).
Brian Teeman
Co-founder Joomla! and OpenSourceMatters Inc.
http://brian.teeman.net/
@smz Sergio what about css for the tooltip placement, something similar we did already for other places when we change from mootools to bootstrap? Does the same trick work here?
Dimitris, I fought for hours trying this and other workarounds, but I failed. Can you please point me to the CSS code that was used to fix this in other places?
Thanks!
I see... I'm quite sure we'll have the same issue I had when I used display: table-cell (tooltips extends out of modal), but I'll give it a try...
@dgt41 confirmed, same issue. Try putting .modal div.controls {display: inline-block;} in isis template.css and you'll see... 
Bootstrap 2.3.2 tooltips are brain dead (to put it mildly) and we really shouldn't use them...
I think jQuery UI tooltips (https://jqueryui.com/tooltip/) may be a viable alternative
try:
.control-label .modalTooltip {
display: inline-block;
}
already tried: you'll see... 
Edit, spoiler: there is a reason why I used table-cell instead of inline-block in that case... 
Once again: why don't we merge this for 3.4.2?
| Status | Pending | ⇒ | Ready to Commit |
tested successful. the scrollbar will not disappear. RTC
This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/7248.
| Labels |
Added:
?
|
||
#Test OK
This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/7248.
Thanks! 
3.4.4 ?
3.4.3 will only include the hotfixes. So it will 3.4.4 or 3.5.0
We will get this in 3.4.3
rdeutz
- | Status | Ready to Commit | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2015-07-02 14:08:23 |
| Closed_By | ⇒ | rdeutz |
| Labels |
Removed:
?
|
||
I confirm the issue and the solution. No snap anymore. Scrollbar disapears.
I still get an issue concerning the tooltips on a large screen where the comment on top is on only one line as well as tip not centered on the label.