CODEWITHSUNDEEP
javascriptjqueryhtmlcssscrollbar
InvalidSyntax
InvalidSyntax

Reputation: 9495

Overflow:scroll not working

I have created a webpage with a floating/fixed panel that slides up from the bottom of the page. Inside this pane is a child div which has content that needs to be scrolled, I have set the overflow to scroll and auto but none seem to do the trick. It should be noted I'm using easytabs.js plugin to switch content inside the panel, I believe this could be the reason its not working as expected.

You can find a link to the page here

Could anyone have a look and tell me what I'm doing wrong?

The relevant CSS is below

#menu-tab {
    display: block;
    /*background: rgba(255, 255, 255, 0.95);*/
    background: #fff;
    color: #000;
    font-size: 20px;
    padding: 10px 15px;
    margin: 0 auto; 
    width: 250px;
    text-align: center;
    cursor: pointer;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

#menu-content {
    display: none;
    /*background: rgba(255, 255, 255, 0.95);*/
    background: #fff;
    color: #111;
    /*padding: 30px 0;*/
    height: 1px;
    /*overflow: hidden;*/
}

/* Styles for Tabs on Side */
#tab-side-container { padding: 50px 0; }
#tab-side-container > ul { list-style: none; margin: 0 40px 0 0; padding: 5px 0; background: #f1f1f1; float: left; }
#tab-side-container > ul li { width: 200px; margin: 0; padding: 0; text-align: right; font-size: 28px; text-transform: uppercase; }
#tab-side-container > ul li a { display: block; padding: 11px 15px; outline: none; color: #000; }
#tab-side-container > ul li a:hover { text-decoration: underline; }
#tab-side-container > ul li.selected-tab { background: rgba(255, 255, 255, 0.95); position: relative; left: 1px; }
#tab-side-container > ul li:first-child.selected-tab { border-top: none; }
#tab-side-container > ul li a.selected-tab { text-decoration: none; }
#tab-side-container .panel-container { padding-top: 5px; padding-left: 240px; }

div.menu {
    overflow: auto;
}

Upvotes: 1

Views: 7605

Answers (9)

Shubham Abrol
Shubham Abrol

Reputation: 623

You could change your css to something like the below:

    #parent {
    overflow-y: scroll;
    width: 100%;
    }
    #box1 {
    width: 15%;
    float: left;
    }
    #box2 {
    width: 80%;
    float: right;
    }

I think this achieves what you're asking.

Upvotes: -1

Accelerator
Accelerator

Reputation: 338

Working jsbin: (I cloned your site in jsbin to show example of it working)
http://jsbin.com/eWoXUHe/1

DETAILS:

Overflow scrolls automatically by default. however, if the div is not taller than the window (or containing div) height, then there is nothing to scroll, so it won't scroll. If you want to scroll anyway then just make the div taller than the window (or containing div) height.

From reviewing your website, I noticed immediately that .specials-tab is 1080px high. Because of this, that div extends far below the bottom of the page. You need to make this containing div smaller, for example 500px.

After you make that containing div height smaller, you can then scroll the inside content. You may also need to add overflow: scroll to the inner div (it will work once you made the outer div height smaller).

SOLUTION:

The following code will fix your site:

.specials-tab, #starters-tab, #specials-tab, #main-dishes-tab, #sides-tab, #sundries-tab, #drinks-tab, #desserts-tab {
  height: 300px !important;
  overflow: scroll !important;
}

NOTES:

  • Don't use !important. Instead add height: 300px; overflow: scroll; manually to each of the above elements. I put !important so you could see it working in the jsbin.
  • I put 300px just so it was small enough for you to see it working. However you can make this 500px or whatever pixel you want.

Upvotes: 0

Teshan N.
Teshan N.

Reputation: 2535

Try this. Either #menu-content{overflow:auto} or #menu-content{overflow:scroll}

Upvotes: 0

Prosenjit Bhaumik
Prosenjit Bhaumik

Reputation: 1

please add to css property in your css

overflow-x: hidden;
overflow-y: scroll;

enter link description herealso check from here for website problem

Upvotes: 0

Anup
Anup

Reputation: 3353

just change specials-tab height(less then 860px) and also give specials-tab to 

overflow:scroll;

you can also set these properties to it's child if you want to scroll left and right div separately

Upvotes: 0

jCaMaX
jCaMaX

Reputation: 189

Buddy, i check your website, the problem is not in the CSS File, the problem is in the jQuery plugin named isotope, the isotope inject this code:

   overflow: hidden;

as a style attribute at the .menu class, So you need to configure the plugin properly.

you can try, replacing this code:

$container.isotope({
    itemSelector: '.menu div',
    animationEngine: 'css'
});

For this code:

 $container.isotope({
    itemSelector: '.menu div',
    animationEngine: 'css',
    containerStyle: {
        position: 'relative',
        overflow: 'auto'
    }
});

Cheers!

Upvotes: 2

Bobby Stenly
Bobby Stenly

Reputation: 1290

Just Change your #menu-content css overflow to auto or scroll.

Upvotes: 5

LiavK
LiavK

Reputation: 752

One way you could deal with the problem is by setting height: 100% for div "tab-side-container", div "panel-container" and div "specials-tab". You'll also need to set "overflow:scroll" on "specials-tab". You may also need to set the "specials-tab" child div to height:100%.

That works for me in Chrome.

Upvotes: 1

Ancestral Nyx
Ancestral Nyx

Reputation: 3

Basically, the content of the div has to exceed the size of the div in order for an overflow:scroll to work. Either make the content bigger or make the div smaller and see if that works for you. Also, "overflow:auto" on a div will set it to scroll only vertically, whereas "overflow:scroll" will set it to scroll both vertically and horizontally. Just a side note.

Upvotes: 0

Related Questions