Login/Register
Div with horizontal scrolling only
Asked Answered
Solved htmlcssinternet-explorer
B

5

119

I have a fixed width DIV containing a table with many columns, and need to allow the user to scroll the table horizontally within the DIV.

This needs to work on IE6 and IE7 only (internal client application).

The following works in IE7:

overflow-x: scroll;

Can anyone help with a solution that works in IE6 as well?

Bacterium answered 14/1, 2009 at 16:38 Comment(2)
The overflow-x property should work just fine in IE6; you may have complicating factors. Can you post a test case which exhibits the problem? – Thrum
It looks like my issue is elsewhere - my containing DIV is overflowing into its container. – Bacterium
A
245

The solution is fairly straight forward. To ensure that we don't impact the width of the cells in the table, we'll turn off white-space. To ensure we get a horizontal scroll bar, we'll turn on overflow-x. And that's pretty much it:

.container {
    width: 30em;
    overflow-x: auto;
    white-space: nowrap;
}

You can see the end-result here, or in the animation below. If the table determines the height of your container, you should not need to explicitly set overflow-y to hidden. But understand that is also an option.

enter image description here

Adieu answered 14/1, 2009 at 16:43 Comment(5)
I was missing the white-space: nowrap;. Works like a charm! – Evars
If a picture is worth a thousand words, a gif is worth a million. – Duma
You are the champion, my friend. – Ritualize
What if I need an individual vertical scroll too on every column and no vertical scroll on main-container? I am trying do that with white-space: nowrap; on main-container and setting height and overflow-y: scroll to individual columns, but it's not working. – Lyndel
white-space: nowrap; I always falling in that ! thanks awesome answer! – Lousewort
P
71

I couldn't get the selected answer to work but after a bit of research, I found that the horizontal scrolling div must have white-space: nowrap in the css.

Here's complete working code:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Something</title>
    <style type="text/css">
        #scrolly{
            width: 1000px;
            height: 190px;
            overflow: auto;
            overflow-y: hidden;
            margin: 0 auto;
            white-space: nowrap
        }

        img{
            width: 300px;
            height: 150px;
            margin: 20px 10px;
            display: inline;
        }
    </style>
</head>
<body>
    <div id='scrolly'>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
    </div>
</body>
</html>
Parse answered 3/3, 2013 at 18:46 Comment(1)
Suggestion of "white-space: nowrap" here appears to have been blended into the correct answer. +1 for improving accepted answer. – Duma
D
25

For horizontal scroll, keep these two properties in mind:

overflow-x:scroll;
white-space: nowrap;

See working link : click me

HTML

<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better   control of the layout. The default value is visible.You can use the overflow property when you want     to have better control of the layout. The default value is visible.</div>

CSS

div.scroll
{
background-color:#00FFFF;
height:40px;
overflow-x:scroll;
white-space: nowrap;
}
Deflection answered 30/7, 2014 at 9:10 Comment(0)
F
22
overflow-x: scroll;
overflow-y: hidden;

EDIT:

It works for me:

<div style='overflow-x:scroll;overflow-y:hidden;width:250px;height:200px'>
    <div style='width:400px;height:250px'></div>
</div>
Frisky answered 14/1, 2009 at 16:49 Comment(0)
C
15

try this:

HTML:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

CSS:

.container {
  width: 200px;
  height: 100px;
  display: flex;
  overflow-x: auto;
}

.item {
  width: 100px;
  flex-shrink: 0;
  height: 100px;
}

The white-space: nowrap; property dont let you wrap text. Just see here for an example: https://codepen.io/oezkany/pen/YoVgYK

Cohabit answered 25/6, 2019 at 22:31 Comment(1)
What did it for me is the flex-shrink:0; – Velutinous

© 2022 - 2024 — McMap. All rights reserved.