Scroll bar bug on custom page creation

[Barkley]

Forum URL: loveevertonforum.com

Sorry 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?

[Michael]

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.

[Lynx]

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.

[Barkley]

Jul 22, 2016 11:12:18 GMT -8 Michael said:

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_pages

You 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/errortestblank

Much obliged

[Barkley]

Jul 22, 2016 11:14:24 GMT -8 Lynx said:

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-map
New page : loveevertonforum.com/page/errortestsandwich

[Michael]

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

[Barkley]

Michael Lynx

Here is a page that replicates the issue on a test forum

loveevertonforum.proboards.com/page/test2

[Barkley]

Jul 22, 2016 11:33:48 GMT -8 Michael said:

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.mp4

Thanks, I'll take a look.

[Michael]

Jul 22, 2016 11:35:03 GMT -8 Barkley said:

Jul 22, 2016 11:33:48 GMT -8 Michael said:

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.mp4

Thanks, I'll take a look.

I edited my post! Apologies.

[Barkley]

Jul 22, 2016 11:36:10 GMT -8 Michael said:

Jul 22, 2016 11:35:03 GMT -8 Barkley said:

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. 

[Michael]

Jul 22, 2016 11:57:48 GMT -8 Barkley said:

Jul 22, 2016 11:36:10 GMT -8 Michael said:

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:

[Barkley]

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.

[Michael]

Jul 22, 2016 12:28:41 GMT -8 Barkley said:

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!

[Barkley]

Jul 22, 2016 12:35:45 GMT -8 Michael said:

Jul 22, 2016 12:28:41 GMT -8 Barkley said:

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:

SPOILER: Click to show

<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.

[Barkley]

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.