CODEWITHSUNDEEP
csstwitter-bootstrap
clarkk
clarkk

Reputation: 27689

mobile vs desktop interface

I'm building a web application which will be a hybrid between a desktop and a mobile version.

The interface is constructed with Bootstrap 3.0 and with max-width:767px the interface switches to the mobile version

In desktop-mode the dark sidebar to the left is always visible, and in mobile-mode the sidebar is invisible and the user can toggle between sidebar on/off

This works as expected

In the jsfiddle there are two vertical black bars which are placeholders for content.. One in the sidebar and one in the main window

jsfiddle

http://jsfiddle.net/gjvzn3rb/12/

Upvotes: 0

Views: 90

Answers (4)

Trucktech
Trucktech

Reputation: 358

If you take out the z-index:-1; and add overflow:scroll; that should achieve what your are trying to do. Like this:

#menu 
{
  position:absolute;    
  width:100%;
  padding-left:200px;
  height:100%;
  min-height:100%;
  box-sizing:border-box;
  background:#f0f3f4;
  overflow:scroll;
}

Upvotes: -1

jan199674
jan199674

Reputation: 753

How to make an HTML-element scrollable when the content overflows:

Make a scrollbar when the content overflows in height / vertically:

overflow-y: scroll;

Make a scrollbar when the content overflows in width / horizontally:

overflow-x: scroll;

Make a scrollbar when the content overflows in BOTH width and height:

overflow: scroll;

Upvotes: 0

chdltest
chdltest

Reputation: 873

If you only want the menu to scroll, change your #menu to the following:

#menu {
    position:absolute;
    margin-top:50px;
    width:100%;
    overflow: scroll;
    height: 100%;
}

http://jsfiddle.net/gjvzn3rb/15/

Note: the logo will remain at the top while the menu scrolls

Alternatively, if you want the whole sidebar to scroll:

#sidebar { 
  overflow-y: scroll;
}

Add an overflow-y:scroll; to your sidebar so that when it does overflow, you can scroll in it without the body content scrolling as well.

http://jsfiddle.net/gjvzn3rb/13/

Upvotes: 1

Tims
Tims

Reputation: 2007

Do you mean you want the menu to scroll?

You can get 100% height and scroll by changing your #menu css:

#menu {
  position:absolute;
  width:100%;
  top: 50px;
  bottom: 0;
  overflow-y: scroll;
}

If you want the whole sidebar to scroll you can use (instead of the above):

#sidebar {
    position:fixed;
    z-index:1;
    top:0;
    left:0;
    bottom:0;
    width:200px;
    background:#1c2b36;
    color:#c4d0d9;
    box-sizing:border-box;
    overflow-y: scroll;
}

The overflow-y: scroll; allows for scrolling only up and down.

Note that scrolling will not propagate to the body until you hit the top or bottom.

Upvotes: 1

Related Questions