[#9709] - Change height of modal windows in ISIS template to enhance user experience
- Closed
- 9 Apr 2016
- Medium
- Build: staging
- # 9709
- Diff
- erikvandoorne:staging
- Success continuous-integration/travis-ci/pr The Travis CI build passed Details
User tests: Successful: Unsuccessful:
Pull Request for Issue #9708
Summary of Changes
A number of changes are made to the template.css file in the ISIS template. The changes make the template's modal windows stretch to appr. 90% of the height of the browser window, instead of a preset fixed height which in many cases is too small to be functional or causes excess need of scrolling.
Testing Instructions
Perform an action that opens a modal window (ie batch process a menu item, select a menu item type when creating a new menu item, etc.). Check if the modal window opens to appr. 90% of the browser's window height. Check if all contents of the modal window can be shown and selected, scrolling down to the lowest value in the list shown in the modal window. Check if the 'Send' button at the bottom right is properly displayed and if it can be clicked.
Check if the above is working on smaller and large(r) screen and browser window sizes.
Remarks
Especially on very small screens, the bottom row with 'Send' button and header row will not be shown very nicely, but it should be shown The adjusted styling is not perfect on all (smaller) screens but is is far more functional that the current situation.
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Labels |
Added:
?
|
||
Any changes need to be made in the less file and then you need to use
generatesss.php
( @erikvandoorne you dont need to create an issue if you are going to create a pull request - when you create the pull request it automatically appears on the issue tracker)
This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/9709.
| Category | ⇒ | Templates (admin) |
Thank you Brian
This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/9709.
@alikon I need to check PR #9683 wether it addresses the same issues. Probably does.
This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/9709.
this doesn't work properly.
I tried different modals (module in com_menus, batch process, patchtester fetch, etc) and the height size almost always is more than the window height. Also some vertical scrollbars appear.
I'm also not entirely sure the height of the modal should use the entire window size.
As others have said you also have to change the less files and then generate the css files.
If in linux run php /path/to/joomla-root/build/generatecss.php
I know @dgt41 (sorry, Dimitri!!) will hate me for saying this, but I too find the new bootstrap modals quite ugly (particularly hideous is the useless and always present scrollbar inside the tiny modal), but yes I know they have been a huge step towards the removal of the dreaded Mootools (although we are not there yet mainly because of the calendars I guess), anyway, I'm too finding your fixes not working very well.
Bootstrap 2 modals are bitches and I stay away from them as much as I can.
Hints: Have you tried not giving headers and footers sizes/paddings in %? That's not needed... AFAIK, it is not necessary to have all dimension given in %: you can mix and match. I'll also try to not give the modal a fixed max height. As @andrepereiradasilva said, it is not nice to have huge almost empty modal...
Also beware that I'm seeing some inline styling (probably JS generated) for the modal-body: it has a max-height, but usually set to an higher value than the actual height... don't know why it is there...
My 2c? Move away from the bootstrap modals and go for a good solid modal framework. For me it would be Fancybox.
That JS generated max-height for the .modal-body comes from commit 91f2c71 where the modal body is assumed to be the window height -147, where 147 comes from 147 = modal-header height + modal-footer height + 20px padding top and bottom.
A little bit too much assumptions, IMHO, especially if the modal is to be used also in the front end (unlikely, TBH), but probably not very much harming.
@smz sorry, on holidays, but i've got plans to replace 147 by a true heights detection ;-)
This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/9709.
know @dgt41 (sorry, Dimitri!!) will hate me for saying this, but I too find the new bootstrap modals quite ugly (particularly hideous is the useless and always present scrollbar inside the tiny modal)
Nope, because I also hate this. On the other hand when Joomla switches to BS4 everything should be fixed. I also hope that J4 will be released this year...
@dgt41 aehmmm... we are going a little bit OT here and I hope nobody will get too much upset, but:
- the biggest problem will be to make front end overrides for backend stuff (things like editing an article or performing administrative stuff in the frontend) Could this be solved by doing all frontend admin stuff wihtin iframes in modals?
- why do you say jLayouts aren't easy overridiable? I'm doing a lot of jLayouts overrides these days for an old site I must revamp and I'm not having any problem with that...
For clarity JHtml is overridable but it's not as dead simple as creating a layout override. All depends how much work you're willing to put in...
Thanks! So... a system plugin redefining JHtml methods, right? Smart! 
That JS generated max-height for the .modal-body comes from commit 91f2c71 where the modal body is assumed to be the window height -147, where 147 comes from 147 = modal-header height + modal-footer height + 20px padding top and bottom.
A little bit too much assumptions, IMHO, especially if the modal is to be used also in the front end (unlikely, TBH), but probably not very much harming.
| Status | Pending | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2016-04-09 19:59:00 |
| Closed_By | ⇒ | brianteeman |
is this PR fixing the same as #9683 ?