Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › overflow-x (hidden) on html/body element

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • August 25, 2016 at 1:59 am #244891
    grimski
    Participant

    Basically, will this work?

    The is a reason why I’m applying this on the body/html tag and not the container. I use the :before/:after elements on the container div to display 2 images each side (outside) of the main content area. So when there isn’t enough horizontal space in the viewport these elements will go off each side of the page and appear cropped.

    I had a problem initially when I just set the overflow on the body but I thought I’d cracked it when I specified:

    html,
    body {
    overflow-x: hidden;
    }

    This worked on OSX browsers fine and when I tested on iPad but when I checked Internet Explorer the horizontal scrollbar was hidden but if I clicked on the webpage and dragged my cursor right it would drag/scroll the page to reveal the cropped image in full.

    Is there away around this? Or is it just something that will not work on the html/body as it would of other div elements?

    I can’t set overflow hidden on the container because the images will get chopped off as they’re outside the container area with negative margins.

    The only way I think I’ve found to fix this is by putting a <div class="page"> straight after the opening <body> element, then closing it before </body> and applying the overflow styling to that.

    …is that the only way? I’d prefer not to do this as I have 300 pages of static content! Though a find and replace could work.

    I think the actually CSS I used when I tested a wrapping .page element was:

    .page {
    overflow: hidden;
    overflow-y: auto;
    }

    I don’t think there should be any issues with that should there?

    Thanks in advance!

    August 26, 2016 at 4:14 am #244941
    Beverleyh
    Participant

    It’s hard to say without seeing a demo, but I’m assuming you mean like this http://codepen.io/anon/pen/zBVVWr (background of main container made semi-transparent so you can see other elements underneath)

    If you absolutely position the :before/:after elements to the left and right of the viewport, and also set their width as 50%, they shouldn’t extend beyond (and therefore not force a horizontal scrollbar).

    But to offer specific help, we would need to see your code in a demo (just enough HTML and CSS to illustrate what’s happening rather than the whole page).

    August 30, 2016 at 12:50 am #245037
    grimski
    Participant

    Here’s a better example: http://moymadethis.com/example/unit-1/session-1/slide-1.html

    Everything here displays as it should. Was the viewport has been narrowed to pass the min-width the paperclips image (styled on the :after element) goes off the side of the screen. This is fine but in IE (from Edge to IE8) you can click on the page and drag to reveal it. Which doesn’t seem to occur in any other browsers.

    August 30, 2016 at 2:03 am #245038
    Beverleyh
    Participant

    Too much to take in.

    We only need to see just enough HTML and CSS to illustrate the problem, rather than the whole page. And the CodePen demos make life much easier for us because the code is immediately visible without poking about in Dev tools. Bear in mind that not all of us have access to the developer console all of the time – it depends on the device we are using when we visit the forum – so if you provide just the pertinent code upfront in a pen, your circle of help is far wider. Streamlined demos require less effort for us to process, and in turn, less effort to fork a solution. Help us to help you :)

    You might want to try what I suggested earlier though.

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.