user2585434
Reputation: 53
Overflow-x: scroll not working correctly
I'm trying to create a complicated layout.
It has a fixed header. Two div's for content, left and right. The left div should scroll vertically ONLY. The right div is split into two more divs, above and below. The right top div should scroll horizontally ONLY. The right bottom div should scroll vertically ONLY.
For some reason everything works except my right top div will scroll horizontally up until a certain point and then it pushes onto the next line. I need a new set of eyes to look at it, as I've been staring at it for several hours.
Sorry for the terrible class naming convention.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Notebook</title>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/leftpanel.js"></script>
<link id="resizeStyle" rel="stylesheet" type="text/css" href="css/home.css">
</head>
<body>
<div id="leftPanel">
<div id="logo">
<a href="home.html" class="logolink">TITLE</a>
</div>
<div id="leftNav">
<ul id="nav">
<a href="planner.html">
<li class="navli">
Planner
</li>
</a>
<a href="notebook.html">
<li class="navli">
Notebook
</li>
</a>
<a href="lessons.html">
<li class="navli">
Lessons
</li>
</a>
<a href="messaging.html">
<li class="navli">
Messaging
</li>
</a>
</ul>
</div>
</div>
<div class="main">
<div class="header">
<ul class="title">
<li id="menuButton">
<a href="#" id="toggle">
<img src="images/menu.png" width="30px" height="30px"/>
</a>
</li>
<li id="name">
TITLE
</li>
<li id="action">
Edit
</li>
</ul>
</div>
<div class="infobar">
<div id="date">
<ul id="dates">
<li>Today</li>
<li>Thursday, April 9, 2015</li>
</ul>
</div>
<div id="calendarView">
<ul id="calView">
<li>Day</li>
<li>Week</li>
<li>Month</li>
<li>+</li>
</ul>
</div>
</div>
<div class="content">
<div class="schedule">
<div class="col1">
<div class="foo">
<table class="day">
<tr>
<td class="time">12 AM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>1 AM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>2 AM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>3 AM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>4 AM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>5 AM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>6 AM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>7 AM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>8 AM</td>
<td><span class="selected">Chemistry</span></td>
</tr>
<tr>
<td></td>
<td><span class="selected">Chemistry</span></td>
</tr>
<tr>
<td>9 AM</td>
<td><span class="selected">Chemistry</span></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>10 AM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>11 AM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>12 PM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>1 PM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>2 PM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>3 PM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>4 PM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>5 PM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>6 PM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>7 PM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>8 PM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>9 PM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>10 PM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>11 PM</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
<div class="rightSide">
<div class="col3">
<div class="moo">
<ul class="mull">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li>U</li>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li>U</li>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li>U</li>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li>U</li>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li>U</li>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li>U</li>
</ul>
</div>
</div>
<div class="col2">
<div class="foo">
<ul class="full">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li>U</li>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li>U</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
html, body {
background-color: #ffffff;
font-family: 'GothamHTF-Thin';
height: 100%;
width: 100%;
/*min-height: 100%;*/
/*min-width: 100%;*/
margin: 0;
overflow:hidden;
}
.header {
width: 100%;
height: 50px;
background-color: #B5B5B5;
position: relative;
z-index: 1000;
}
.infobar {
width: 100%;
height: 50px;
background-color: #d3d3d3;
position: relative;
z-index: 1000;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
.content {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 50px 15px 50px 15px;
margin: -50px auto -50px auto;
width: 100%;
height: 100%;
min-height: 100%;
background-color: #ffffff;
}
.schedule {
height: 100%;
width: 100%;
}
.col1, .col2, .col3 {
padding:0;
margin:0;
display: inline-block;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.col1 {
width: 50%;
background-color: #ffffff;
height: 100%;
border-right: 1px solid black;
float: left;
}
.col2 {
width: 100%;
background-color: #ffffff;
height: 50%;
}
.col3 {
background-color: #ffffff;
width: 100%;
height: 150px;
}
.rightSide {
width: 50%;
float: left;
height: 100%;
}
.foo {
width: 100%;
height: 100%;
overflow-y: scroll;
}
.moo {
width: 100%;
height: 100%;
overflow-x: scroll;
overflow-y: hidden;
}
ul.mull {
width:100% !important;
height:150px !important;
display: inline;
}
ul.mull li {
display: inline-table;
}
table.day{
border-collapse: collapse;
border-spacing: 0;
width:100%;
height:100%;
margin:50px 0 0 0;
padding:0px;
}
.day tr:nth-child(odd){
background-color:#ffffff;
}
.day tr:nth-child(even) {
background-color:#ffffff;
}
.day td{
vertical-align: top !important;
border:1px solid #d5d5d5;
border-width:0px 0px 0px 0px;
text-align:left;
font-size:10px;
font-family:Arial;
font-weight:normal;
color:#000000;
height: 60px;
top: 0;
}
.day tr:last-child td{
border-width:0px 0px 0px 0px;
}
.day tr td:last-child{
border-width:0px 0px 1px 0px;
}
.daytr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.day tr:first-child td:first-child{
border-width:0px 0px 0px 0px;
}
.day tr:first-child td:last-child{
border-width:1px 0px 1px 0px;
}
.selected {
background-color: #747474; color: #ffffff; width: 100%; float: left; height: 100%;
padding: 0;
margin: 0;
}
a {
color: #fff;
text-decoration: none;
}
a:hover {
color: #424042;
}
li.active {
color: #424042;
}
.main {
float: left;
height: 100%;
width: 100%;
}
.mainactive {
float: left;
width: 75%;
}
#leftPanel {
background-color: #535353;
float: left;
width: 25%;
text-align: center;
color: #fff;
height: 100%;
display: none;
}
#logo {
background-color: #424042;
font-size: 2.0em;
top: 5;
height: 100px;
}
a.logolink:hover{
color:#fff !important;
display:block;
}
a.logolink {
display:block;
padding-top: 25px;
}
#leftNav {
top: 5%;
}
ul#nav {
padding: 10% 0 0 0;
}
ul#nav a {
font-size: 1.4em;
}
#nav li {
}
li.navli {
list-style-type: none;
padding: 5% 0px 5% 0px;
border-top: 1px solid #5E5B5E;
border-bottom: 1px solid #5E5B5E;
}
li.active {
list-style-type: none;
padding: 5% 0px 5% 0px;
border-top: 1px solid #5E5B5E;
border-bottom: 1px solid #5E5B5E;
}
a#toggle {
color: #000;
padding-top: 0px;
}
.title li{
display: inline-block;
width: 32%;
overflow: auto;
height: 60px;
padding-top: 10px;
}
ul.title {
margin: 0 auto;
padding: 0px;
overflow: auto;
top: 0;
}
#action {
text-align: right;
font-size: 1.6em;
right: 0;
}
#menuButton {
text-align: left;
}
#name {
text-align: center;
font-size: 2.0em;
font-weight: bolder;
}
ul#dates {
list-style-type: none;
width: 100%;
padding: 0;
margin: 0;
}
ul#dates li {
display: inline;
}
#date {
float: left;
width: 50%;
}
ul#calView {
list-style-type: none;
width: 100%;
padding: 0;
margin: 0;
}
ul#calView li {
display: inline;
}
#calendarView {
text-align: right;
}
.time {
width: 30px;
padding-right: 20px;
}
And the JS, just in case it's effecting whatever is wrong:
$(function(){ // DOM READY shorthand
$("#leftPanel").hide();
$("#toggle").click(function(e){
// e.preventDefault(); // If you use anchors
$("#leftPanel").toggle(),
$(".main").toggleClass("mainactive");
});
});
As you can see, the right top div is scrolling horizontally for a second, and then it breaks to the new line even though I don't want it to. I'm pretty sure it has something to do with the floats, but I can't figure it out.Thanks in advance.
Upvotes: 0
Views: 1780
Answers (1)
user1846747
Reputation:
For the ul element where class=mull <ul class="mull">
add display: flex or display:inline-flex that should do the trick.
Change your css as
ul.mull {
width:100% !important;
height:150px !important;
display: flex;
}
Working JSFiddle here https://jsfiddle.net/unckcfb4/2/
Upvotes: 1
Related Questions
- overflow-x scroll not working css
- Overflow-x not working
- Overflow: scroll still Overflowing
- Overflow-x appearing but cannot scroll
- Overflow: Scroll doesn’t work
- CSS - Overflow scrolling not working
- overflow-x: scroll doesn't seem to work
- Overflow-x : scroll not working
- Css: overflow scroll doesn't work
- Overflow-x does not work