Issue Gantry Framework vs jDownloads
-
-
- Gerard Enschut
- Newbie
- Posts: 2
- Thanks: 0
-
Hi,
I'm involved in the project jDownloads (Download manager) as translator and the developer did asked me to post an issue he did notice with the Gantry Framework (the developer don't have a valid subscription here). I hope you're willing to look at it.
The problem is that after the second 'level' in jDownloads the content becomes noninteractive. This has been traced to the template class rt-container
Code:
.rt-container {width: 1200px;margin: 0 auto;position: relative;}
located in libraries/gantry/css/grid-responsive.css, in particular it is the property position:relative;
The 'first' level of jDowloads is good and remains interactive. Going down to the second level causes a problem as the content is no longer interactive.
For reference two screen shots, complete with cursor, are attached.
When using using jDownloads with the Gantry template the first level within jdownloads is interactive - please see image gantry01.png
At the second level jDownloads is no longer interactive but it should be, as it is with other templates. Please see image gantry02.pic
The html code generated, as shown by Firefox Inspector, is given below where the jDownloads code is in the collapsed <div class="jd-item-page"></div>.
Code:
<div id="rt-transition">
<div id="rt-mainbody-surround">
<div class="rt-container">
<div id="rt-main" class="mb12">
<div class="rt-container">
<div class="rt-grid-12 ">
<div class="rt-block">
<div id="rt-mainbody">
<div class="component-content">
<div class="item-page"></div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
The problem is completely solved by either removing the position:relative; attribute or by changing it to position:inherit; from the .rt-container class. Did note that the
<div class="rt-container"> appears twice which is a little strange.
It would appear that the jDownloads code is 'masked' or 'overlayed' the second time around by the rt-container. Using the Firefox Inspector shows that the area appears as if it is in the footer!
The usual reasons for having position relative is to either provide a container for absolute positioned elements or to allow left, right, top or bottom positioning relative to the elements 'natural' position. It is most unlikely that any Component or other page content would need those attributes normally; but if they did then I believe it would be the 'pages' responsibility to set up the appropriate container div.
Changing rt-container to have position:inherit; does not affect the responsiveness of the template which remains at an excellent level. It was tested on a variety of viewport sizes as well on different physical devices (phone, tablet, lap top and desk top).
It would of course possible to have a work around in the jDownloads component by including css such as
Code:
.item-page { position: relative; z-index: 1;}
And such a scheme could be applied by other components. But the inclusion would no doubt be identified as a “fix for Gantry template” modification. jDownloads is not a minor component, it is used by hundreds of thousands of sites.
It is suggested that such a requirement on a component is unreasonable as it is forcing the inclusion of a position attribute in order to use the z-index to overcome the template's overlay. This could have many unintended consequences as the component could be using z-index or position attributes to control other items. It would probably not occur to many developers that such a solution is necessary and may cause a lessening of the Gantry template's reputation.
Further it is also suggested that a template should produce what one would call a 'neutral' environment in this regard. All other templates that have been evaluated do offer such a 'neutral' environment. The Gantry template is such a good implementation with many facilities that it would be a shame that it 'interferes' with some components such as jDownloads that use multiple interactive levels.
On a technical front one does not see the necessity for the .rt-container to have the position:relative; attribute. As far as one can see .rt-container is always followed either immediately or a little later by an rt-grid-xx class and all those classes are made position:relative; by the pseudo class css statement:
Code:
[class*="rt-grid"] {display: inline;float: left;position: relative;margin: 0;}
It is requested that gantry template is modified as suggested above, please.
Screenshots:
This image is hidden for guests.
Please log in or register to see it.
This image is hidden for guests.
Please log in or register to see it.
Thank you for the your time.
Gerard
-
-
-
- Kevin DuCommun
- Elite Rocketeer
- Posts: 1583
- Thanks: 4
-
Hello Gerard,
Thanks for bringing this issue to our attention, we will get a fix for this into our next update of Gantry. -
The following users have thanked you: Gerard Enschut
-
-
-
- Gerard Enschut
- Newbie
- Posts: 2
- Thanks: 0
-
Hello Kevin,
Thank you for the future fix. It's appreciated!
Kind regards,
Gerard
-
Time to create page: 0.055 seconds