ROCKETTHEME IS CLOSING ON JUNE 30, 2025. As a thank-you to our community, enjoy 50% off all themes with the promo code THANKYOU before we shut down.
Read our Farewell Blog Post for more details.
SOLVED Gantry 5 "visible-phone" bug
-
-
- isabeaux
- Jr. Rocketeer
- Posts: 26
- Thanks: 8
-
Hi,
I seem to have run into a bug.
In moving around sections to display on moblie differently than on desktops, modules made with "Custom HTML" module show the title and DIV wrapper twice when the section had the "visible-phone" class added. Please see the images below showing the result on the left and the HTML code of the page on the right (from Chrome's Developer Tools).
Here is the result with the "visible-phone" class:
This image is hidden for guests.
Please log in or register to see it.
Here is the result without the "visible-phone" class:
This image is hidden for guests.
Please log in or register to see it.
Padding seems to have gone awry too but I suppose that's an easy fix with CSS.
Hoping this helps,
Tomás
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Please would you post your URL, superuser id and pswd in the secure tab of your post and i'll have a look for you.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
How do I navigate to the page where the issue is? What is the direct menu path?
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Ok, that's not real... If you "view source" you will see that the code does not look like that. It's actually the browser dev tool desperately trying to make sense of the html. I am sure that you will find that you actually have unbalanced html tags on that page which you can check with W3C validation tool (but only if you make the site online temporarily to run the test).
http://validator.w3.org/
. Run the test and then (assuming I'm right) correct your markup errors on that page in your content.
Regards, Mark. -
The following users have thanked you: isabeaux
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- isabeaux
- Jr. Rocketeer
- Posts: 26
- Thanks: 8
-
Hi Mark,
Thanks for pointing that out, somehow I had placed the login module twice on the page and an old module was creating errors too.
However after removing both, I see in the "view sorce" page that the titles do appear twice, around line #3776. They appear once on the first instance around line #3064, but twice in the "visible-phone" section further down.
Could you please take a look? Credentials are still the same.
Thank you,
Tomás
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
It is not occurring in the source twice... here is a copy/paste of the source for that area:
</div></div><div class="platform-content"><div class="moduletable sidea membership jmoddiv" data-jmodediturl="http://es3.energeticsynthesis.com/index.php?option=com_config&controller=config.display.modules&id=206&return=aHR0cDovL2VzMy5lbmVyZ2V0aWNzeW50aGVzaXMuY29tL2luZGV4LnBocC9saWJyYXJ5" data-target="_self" data-jmodtip="<strong>Edit module</strong><br />Membership Sign Up<br />Position: sidebar-a"> <h3 class="g-title">Membership Sign Up</h3> <div class="custom sidea membership" > <p><a href="/index.php/resource-tools/membership-plan"><img src="/images/membership-button-rd.png" alt="Energetic Synthesis Membership" style="display: block; margin-left: auto; margin-right: auto;" title="Energetic Synthesis Membership" border="0" /></a></p></div> </div></div><div class="platform-content"><div class="moduletable sidea news-signup jmoddiv" data-jmodediturl="http://es3.energeticsynthesis.com/index.php?option=com_config&controller=config.display.modules&id=121&return=aHR0cDovL2VzMy5lbmVyZ2V0aWNzeW50aGVzaXMuY29tL2luZGV4LnBocC9saWJyYXJ5" data-target="_self" data-jmodtip="<strong>Edit module</strong><br />Newsletter Sign up<br />Position: sidebar-a"> <h3 class="g-title">Newsletter Sign up</h3> <div class="custom sidea news-signup" > <p style="text-align: center;"><a href="/index.php/resource-tools/newslettersign-up">Signup for<br />Lisa's Newsletter</a></p></div> </div></div><div class="platform-content"><div class="moduletable sidea vm-product jmoddiv" data-jmodediturl="http://es3.energeticsynthesis.com/index.php?option=com_config&controller=config.display.modules&id=124&return=aHR0cDovL2VzMy5lbmVyZ2V0aWNzeW50aGVzaXMuY29tL2luZGV4LnBocC9saWJyYXJ5" data-target="_self" data-jmodtip="<strong>Edit module</strong><br />Introduction CD<br />Position: sidebar-a"> <h3 class="g-title">Introduction CD</h3>
Notice that the h3 title only occurs once.
Did you do a W3C validation as I suggested?
Regards, Mark. - Last Edit: 8 years 6 months ago by MrT.
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- isabeaux
- Jr. Rocketeer
- Posts: 26
- Thanks: 8
-
Hi Mark,
Yes I did the W3C validation as you suggested and found some issues which I fixed, the remaining warnings are mainly concerning image tags (like border=0).
The problem with the double header still persists.
Remember I am trying to have the left side menu and a few modules display after the main content when viewing on a phone. To do that, I duplicated the position in the layout and gave one position "hidden-phone" class, and the other one, further down in the layout, "visible-phone" class.
So, as you had pointed out, this code shows twice in the page if you view the page code. It only displays once, to the left of the main content for all but phones and further down again for display on phones. It's this second time that the tags a duplicated. The first time it shows fine.
Here is a copy of the code straight from the "view page source" from Firefox:
</div></div><div class="platform-content"><div class="moduletable sidea membership"> <h3 class="g-title">Membership Sign Up</h3> <div class="custom sidea membership" > <div class="moduletable sidea membership"> <h3 class="g-title">Membership Sign Up</h3> <div class="custom sidea membership" > <p><a href="/index.php/resource-tools/membership-plan"><img src="/images/membership-button-rd.png" alt="Energetic Synthesis Membership" style="display: block; margin-left: auto; margin-right: auto;" title="Energetic Synthesis Membership" border="0" /></a></p></div> </div> </div> </div></div><div class="platform-content"><div class="moduletable sidea news-signup"> <h3 class="g-title">Newsletter Sign up</h3> <div class="custom sidea news-signup" > <div class="moduletable sidea news-signup"> <h3 class="g-title">Newsletter Sign up</h3> <div class="custom sidea news-signup" > <p style="text-align: center;"><a href="/index.php/resource-tools/newslettersign-up">Signup for<br />Lisa's Newsletter</a></p></div> </div> </div>
As you can see the H3 tags and outer DIV wrapper are duplicated, ONLY in the second group, and ONLY for Custom HTML modules.
That is what's baffling to me.
If you search the page source for "Membership Sign Up" you'll be able to find it easily.
Hoping this helps,
Tomás
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Ok I managed to reproduce this myself locally and so have raised a bug ticket here
https://github.com/gantry/gantry5/issues/1721
.
Do note however that you're the first person I know of to type this and is is a bit of a "left field" requirement to utilise a module position particle with the same key more that once on your layout.
Let's see what the DEVS think.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.091 seconds