inherit
187402
0
Mar 23, 2016 19:15:19 GMT -8
Barkley
1,590
December 2012
avinalaff
|
Post by Barkley on Jul 22, 2016 11:07:14 GMT -8
Forum URL: loveevertonforum.comSorry to trouble you with a problem but I think not all is well in the custom page creation. I've managed to reproduce the issue on 2 different computers, and on 2 different PB forums. It involves the Drop Down Navigation Plugin - but I don't think the plugin is causing the issue, but I'll try to explain. 1. Upon creation of a new page, 'regardless' of custom page template, (I tested them individually) as soon as I hover over the drop down menu, a scroll bar appears to the right of the screen. 2. The issue isn't consistent in that it isn't always the same menu that causes it on different templates, but at least one menu does, i.e, all templates are effected, be it 'blank' or 'Stonehenge' etc. 3. I noticed it about a month ago but it rectified itself. 4. There have been no changes to the plugin in terms of version. 5. Existing custom pages are not triggering the scroll bar when using the menu. 6. Only the new custom page itself triggers it, i.e, no other page visit. 7. New pages aren't yet added to the plugin yet it is they that highlight the issue. I hope that lot makes sense. Is it possible that it's a Javascript error somewhere?
|
|
#e61919
Support Manager
154778
0
1
May 15, 2024 8:16:22 GMT -8
Michael
19,550
May 2010
wiseowl
|
Post by Michael on Jul 22, 2016 11:12:18 GMT -8
Hi,
What is a good custom page to view this on? I'm guessing this is just a hidden sizing issue where you can't see the overflow or something and it only occurs the way it does because the custom page has to expand to basically "cover" that content, but I'd like to check it out.
|
|
inherit
217348
0
Jul 27, 2022 7:26:44 GMT -8
Lynx
5,790
January 2015
msg
|
Post by Lynx on Jul 22, 2016 11:14:24 GMT -8
Are there more entries than what's shown in that dropdown? If you mouse over a dropdown that only has (for example) 6 or 8 entries under it, does the scrollbar still appear? I'm thinking that the number of entries in your dropdown is what's causing the scrollbar to appear - indicative that you need to scroll to see the remaining entries. Of course, that in itself could be problematic, as your mouse would no longer be hovered over the item in the navbar to show the dropdown.
|
|
inherit
187402
0
Mar 23, 2016 19:15:19 GMT -8
Barkley
1,590
December 2012
avinalaff
|
Post by Barkley on Jul 22, 2016 11:30:22 GMT -8
Hi, What is a good custom page to view this on? I'm guessing this is just a hidden sizing issue where you can't see the overflow or something and it only occurs the way it does because the custom page has to expand to basically "cover" that content, but I'd like to check it out. Thanks for responding. I've left the test pages at the bottom incase you asked that - loveevertonforum.com/admin/structure/custom_pagesYou are welcome to create another page of your choice. I'm sure you can access that page, but here is a direct link to one of them: loveevertonforum.com/page/errortestblankMuch obliged
|
|
inherit
187402
0
Mar 23, 2016 19:15:19 GMT -8
Barkley
1,590
December 2012
avinalaff
|
Post by Barkley on Jul 22, 2016 11:33:02 GMT -8
Are there more entries than what's shown in that dropdown? If you mouse over a dropdown that only has (for example) 6 or 8 entries under it, does the scrollbar still appear? I'm thinking that the number of entries in your dropdown is what's causing the scrollbar to appear - indicative that you need to scroll to see the remaining entries. Of course, that in itself could be problematic, as your mouse would no longer be hovered over the item in the navbar to show the dropdown. Thanks for the reply. The new pages aren't added to the drop down yet. Only the new pages show the issue. For example: Normal page: loveevertonforum.com/page/site-mapNew page : loveevertonforum.com/page/errortestsandwich
|
|
#e61919
Support Manager
154778
0
1
May 15, 2024 8:16:22 GMT -8
Michael
19,550
May 2010
wiseowl
|
Post by Michael on Jul 22, 2016 11:33:48 GMT -8
Removing the overflow here should resolve your issue: #wrapper {
width: 81%;
margin: 0 auto;
overflow-x: hidden;
} It was exactly as I suspected. Here is a quick video demonstrating: dev.prbrds.com/m/a/DQHOeLv1uz.mp4
|
|
inherit
187402
0
Mar 23, 2016 19:15:19 GMT -8
Barkley
1,590
December 2012
avinalaff
|
Post by Barkley on Jul 22, 2016 11:34:32 GMT -8
|
|
inherit
187402
0
Mar 23, 2016 19:15:19 GMT -8
Barkley
1,590
December 2012
avinalaff
|
Post by Barkley on Jul 22, 2016 11:35:03 GMT -8
This should solve your problem: #wrapper {
width: 81%;
margin: 0 auto;
overflow-x: hidden;
} It was exactly as I suspected. Here is a quick video demonstrating: dev.prbrds.com/m/a/DQHOeLv1uz.mp4Thanks, I'll take a look.
|
|
#e61919
Support Manager
154778
0
1
May 15, 2024 8:16:22 GMT -8
Michael
19,550
May 2010
wiseowl
|
Post by Michael on Jul 22, 2016 11:36:10 GMT -8
This should solve your problem: #wrapper {
width: 81%;
margin: 0 auto;
overflow-x: hidden;
} It was exactly as I suspected. Here is a quick video demonstrating: dev.prbrds.com/m/a/DQHOeLv1uz.mp4Thanks, I'll take a look. I edited my post! Apologies.
|
|
inherit
187402
0
Mar 23, 2016 19:15:19 GMT -8
Barkley
1,590
December 2012
avinalaff
|
Post by Barkley on Jul 22, 2016 11:57:48 GMT -8
Thanks, I'll take a look. I edited my post! Apologies. I watched your video and thanks for taking the time to compile it, as it definitely shows the issue. However I have 2 questions please. 1. Why isn't it happening on any of the other custom pages prior to today? 2. What do I need to do to resolve it? I'm afraid I have a solution, but don't know how to apply it.
|
|
#e61919
Support Manager
154778
0
1
May 15, 2024 8:16:22 GMT -8
Michael
19,550
May 2010
wiseowl
|
Post by Michael on Jul 22, 2016 12:07:20 GMT -8
I edited my post! Apologies. I watched your video and thanks for taking the time to compile it, as it definitely shows the issue. However I have 2 questions please. 1. Why isn't it happening on any of the other custom pages prior to today? 2. What do I need to do to resolve it? I'm afraid I have a solution, but don't know how to apply it. Basically the page is short and the menu is bigger than the wrapper, so it stretches the wrapper. The other pages have content much bigger than the menu, so it doesn't stretch. As for resolving it, removing the overflow from the #wrapper should prevent the issue from occurring. Here is the wrapper on a short page: And then here is the wrapper on a big page:
|
|
inherit
187402
0
Mar 23, 2016 19:15:19 GMT -8
Barkley
1,590
December 2012
avinalaff
|
Post by Barkley on Jul 22, 2016 12:28:41 GMT -8
Michael I think what you are saying is it's happening on the new pages because the new pages don't have any content, and the navigation bar is wider than an empty page. Is that right? I'm a bit nervous so trying not to become overwhelmed as way out of my depth with all the other writing on the right hand side. I've seen it before but never tampered with it. I pressed control/tab/I as I remember doing that when testing if a page was responsive, and eventually copied your footsteps so I could replicate the #wrapper {
width: 81%;
margin: 0 auto;
overflow-x: hidden;
} but are you saying that if I just untick one of those boxes, it actually makes changes to my forum, outside of the admin panel? Or do I change something in my forum wrapper?I'm not a coder sorry, just a beginner.
|
|
#e61919
Support Manager
154778
0
1
May 15, 2024 8:16:22 GMT -8
Michael
19,550
May 2010
wiseowl
|
Post by Michael on Jul 22, 2016 12:35:45 GMT -8
Michael I think what you are saying is it's happening on the new pages because the new pages don't have any content, and the navigation bar is wider than an empty page. Is that right? I'm a bit nervous so trying not to become overwhelmed as way out of my depth with all the other writing on the right hand side. I've seen it before but never tampered with it. I pressed control/tab/I as I remember doing that when testing if a page was responsive, and eventually copied your footsteps so I could replicate the #wrapper {
width: 81%;
margin: 0 auto;
overflow-x: hidden;
} but are you saying that if I just untick one of those boxes, it actually makes changes to my forum, outside of the admin panel? Or do I change something in my forum wrapper?I'm not a coder sorry, just a beginner. This is a change you in the CSS file for your theme. The check box on the Inspector tool in the browser doesn't make any changes to the page itself!
|
|
inherit
187402
0
Mar 23, 2016 19:15:19 GMT -8
Barkley
1,590
December 2012
avinalaff
|
Post by Barkley on Jul 22, 2016 13:01:17 GMT -8
Michael I think what you are saying is it's happening on the new pages because the new pages don't have any content, and the navigation bar is wider than an empty page. Is that right? I'm a bit nervous so trying not to become overwhelmed as way out of my depth with all the other writing on the right hand side. I've seen it before but never tampered with it. I pressed control/tab/I as I remember doing that when testing if a page was responsive, and eventually copied your footsteps so I could replicate the #wrapper {
width: 81%;
margin: 0 auto;
overflow-x: hidden;
} but are you saying that if I just untick one of those boxes, it actually makes changes to my forum, outside of the admin panel? Or do I change something in my forum wrapper?I'm not a coder sorry, just a beginner. This is a change you make on the custom page itself, in the HTML tab. The check box on the Inspector tool in the browser doesn't make any changes to the page itself! Ah, thank heavens.. I tried adding #wrapper { width: 81%; margin: 0 auto; overflow-x: hidden; } to my styling inside the HTML tab earlier but the problem remained. I deleted the word hidden, as from your video it looked like the hidden bit was causing the problem but that didn't work either. This is my styling for the page:
<style type="text/css">
html { height: 100%; width: 100%; } body{background-image:url('https://farm8.staticflickr.com/7651/27122825516_cde98e970a_o.jpg');background-repeat:no-repeat; } .title-bar {background-color: #000000 !important;} p.details {text-align: center;}/*TITLES UNDERNEATH IMAGE*/ p.main {text-align: justify;}/*MAIN AREAS OF TEXT*/ h2 {background-color: #000000; color: #ffffff; font-size: 130%; text-align: center; margin-left: -15px; margin-right: -15px;} /*HEADING FOR EACH SECTION*/ a:link {color:#38a6c8;font-size:100%;} /*LINK COLOUR*/ a:visited {color:#497988;font-size:100%;} /*LINK VISITED COLOUR*/ a:hover {color:#f38df9;font-size:100%;} /*LINK HOVER COLOUR*/ /*Iframe keeps Prem table centered*/ iframe{display: block;margin-left: auto;margin-right: auto; max-width: 100%;} /*IFRAME*/
img.center {display: block; margin-left: auto; margin-right: auto; max-width: 100%; } /*PICTURES*/ img.next {max-width: 30%;} /*next and back arrows with twitter logo*/ .text_over_image { background:url(https://farm6.staticflickr.com/5602/15372118800_85acc50057_o.png); /* image to display */ max-width:100%; /* width of image */ background-repeat:repeat; /* repeat no-repeat repeat-x repeat-y inherit */ text-align: justify; color:#FFFFFF; /* text color */ font-size:100%; /* font size */ font-weight:; /* font weight */ font-family:sans-serif; /* font family */ text-decoration:; /* text decoration underline etc */ padding-left:15px; /* left position of text */ padding-right:15px; padding-top:px; /* top position of text */ border:0px solid; /* border around image if desired */ overflow:; /* so div won't change size */ margin-left: auto; margin-right: auto;} /* SECTIONS */ .section { clear: both; padding: 0px; margin: 0px; }
/* COLUMN SETUP */ .col { display: block; float:left; margin: 1% 0 1% 1.6%; } .col:first-child { margin-left: 0; }
/* GROUPING */ .group:before, .group:after { content:""; display:table; } .group:after { clear:both;} .group { zoom:1; /* For IE 6/7 */ }
/* GRID OF THREE */ .span_3_of_3 { width: 100%; } .span_2_of_3 { width: 66.13%; } .span_1_of_3 { width: 32.26%; }
/* GO FULL WIDTH BELOW 480 PIXELS */ @media only screen and (max-width: 767px) { html { font-size: 100%; } .col { margin: 1% 0 1% 0%; } .span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; } } /* Stop resizing at 320px */ @media screen and (max-width: 320px) { #wrapper{ width:320px; } }
</style> <meta name="viewport" content="width=device-width, initial-scale=1"> <div class="section group"> <div class="col span_3_of_3">$[zone_1]</div> </div> <div class="section group"> <div class="col span_3_of_3">$[zone_2]</div> </div> <div class="section group"> <div class="col span_3_of_3">$[zone_3]</div> </div> <div class="section group"> <div class="col span_3_of_3">$[zone_4]</div> </div> <div class="section group"> <div class="col span_3_of_3">$[zone_5]</div> </div>
Perhaps you would be kind enough to pretend I am a 3 year old and show me what to write please, (that should be easy ha ha) and where to put it please, as I'm not getting anywhere, and I've 25 pages to write tonight once I figure it out.
|
|
inherit
187402
0
Mar 23, 2016 19:15:19 GMT -8
Barkley
1,590
December 2012
avinalaff
|
Post by Barkley on Jul 22, 2016 13:18:20 GMT -8
Ah ha ......... now I understand what you meant earlier by the short page. You meant the menu was taller than the page, so it couldn't drop down. Hence why the scroll bar appeared. I still haven't fixed it, but at least I now understand it. If I add content it will sort itself out, so I'll carry on building the pages and worry about the fix when I'm less nervous lol.
|
|