CSS remove horizontal scrolling when overflow set to hidden

Question

I have a page with a form that's broken into two sections. There is only one section visible at a time, the second section is animated in (using jQuery) after the user completes the first section and clicks next.

The way I have that setup in HTML is as follows:

<div class="form-container">
    <form>
        <div class="sections-container">
            <div class="section">...</div>
            <div class="section">...</div>
        </div>
    </form>
</div>

The CSS for that looks like this:

form {
    overflow: hidden;
}
.sections-container {
    width: 200%;
}
.sections-container::after {
    clear: both;
    content: '';
    display: block;
}
.section {
    float: left;
    width: 50%
}

When a user clicks "next", using jQuery, the .sections-container gets a negative margin-left applied to horizontally slide in the second form section.

The problem is in Chrome, when the dev tools are open with the mobile device view enabled, I can still scroll the page horizontally, though no scrollbar is visible. Why is this happening when I have overflow set to hidden, and how do I fix this so that the page cannot be scrolled?

@Rupal I am only using jQuery and JCF. But upon further inspection it looks like the horizontal scrolling is caused by jcf.radio.js from that JCF library so I think that's where I need to take a closer look. It's unfortunate that's the cause because that library takes care of a lot of work for me. — user4181107
– user4181107, Commented Jan 19, 2018 at 16:32

MLevin · Accepted Answer · 2018-01-19 16:18:30Z

3

Try removing the class period on the form CSS style. Should look like this.

form {
    overflow: hidden;
}

answered Jan 19, 2018 at 16:18

MLevin

1651 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user4181107 Over a year ago

Sorry, that's actually a typo while I was writing the question. In my code, the form has a class and the CSS is properly targeting it as verified using the browser dev tools.

MLevin Over a year ago

If your desired behavior is to advance the form to different inputs, I would either use a framework or use multiple section classes and hide the ones not being used using "display: none". When the user clicks "next" hide the current and show the next

Collectives™ on Stack Overflow

CSS remove horizontal scrolling when overflow set to hidden

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related