skuid page has extra space on right

  • 1
  • Problem
  • Updated 3 years ago
  • Solved
  • (Edited)
Maybe this is a known issue, but hopefully there's some easy fix. 

It seems that something is telling page to add some extra space on the right, but I can't figure out what. I'm using a master page, and it happens when I preview just the master page, so I'm thinking it's something on there, in the header or the footer. 

No matter how wide I make the page, there's always a horizontal scroll bar and about 20px of white space. 

Any ideas?

You can also see it in action at www.fullskope.com (our first public facing Skuid page!! lots of excitement around the office when we got this test site up in half a day)
 
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,322 Points 5k badge 2x thumb

Posted 3 years ago

  • 1
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
I'll throw out an idea in case it helps: if in Chome browser, while previewing the page (so viewing the live page, not the page builder), hover over the white space in question and right click. Click inspect from the menu that pops up. The pane that pops up should give you clues (or flat out tell you) what page element is causing the white space. Once you know, if it is a Skuid component, you can try to address it with the component's settings or with CSS.
Photo of JD Bell

JD Bell, Senior Product Engineer

  • 2,996 Points 2k badge 2x thumb
Looks like you have a responsive Grid (named sk-3Az0_F-198) that has some margin/padding applied to it, which is causing it to exceed it's normal width by 25px (on the right), but then adds 30 px of padding. I think if you eliminate the margin and then set the padding to 5px, you'll get the same effect but without the white border.
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,322 Points 5k badge 2x thumb
Thanks JD, it was indeed the Margin, only it wasn't apparent because I had not set a margin on that responsive grid. I had to manually set the Margin to 0 and it fixed it. I was even able to leave the right padding at 30px.

So weird, I wonder where it got that margin from? That responsive grid is in the footer, and there's another grid in the footer that doesn't have it. There's no custom CSS on that grid, or any of the other components in the grid. It had been in a wrapper, which I took it out of, but that didn't fix it until I added margin: 0.

Oh well, glad it's working now! Thanks again
Photo of JD Bell

JD Bell, Senior Product Engineer

  • 2,996 Points 2k badge 2x thumb
Hey Jack, I just found out that the margin issue is an artifact of turning on gutters in your responsive grid. Negative margins become necessary for technical reasons, which does occasionally cause issues like the one you are seeing on your site. Turning off gutters in the response grid will fix this issue and remove the need for your custom styling.
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,322 Points 5k badge 2x thumb
By the way, I also found another responsive grid on the child page that was causing the same issue to a lesser degree, maybe 5px or so, and when I added a style of Margin 0 it went away.