CODEWITHSUNDEEP
cssoverflow
user3194721
user3194721

Reputation: 815

CSS position: fixed with horizontal scroll bar for overflowing content

I'm using CSS position: fixed for a div tag. My browser horizontal scroll bar is moving but I'm not seeing text. This is what I tried so far:

<html>
<head>
    <style type="text/css">
    .test {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    background: rgba(0, 0, 0, .2);
    overflow-x: auto;
    white-space: nowrap;
     width:2500px;
}
        body {
        }

    </style>
</head>
<body>
        <div class="test">
            test data  test data  test datatest data  test data  test datatest data     test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test datatest data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data
        </div>

</body>
</html>

I need to display the text in a single line with a browser horizontal scroll bar(not div scroll bar)

Upvotes: 1

Views: 38474

Answers (6)

Kamran Siddique
Kamran Siddique

Reputation: 128

You could try the follwing: 

<html>
<head>
    <style type="text/css">
    .test {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    background: rgba(0, 0, 0, .2);
    white-space: nowrap;
     width:2500px;
}
        body {
        }

    </style>
</head>
<body>
        <div class="test">
            <p>test data  test data  test datatest data  test data  test datatest data     test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test datatest data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data test data  test data  test datatest data  test data  test datatest data     test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test datatest data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data test data  test data  test datatest data  test data  test datatest data     test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test datatest data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data</p>
        </div>

</body>
</html>

Upvotes: 0

Amir Forsati
Amir Forsati

Reputation: 5960

In my experience, sometimes you make position: fixed; for some div that have child div inside and this child div contains the content that will be scrolled. you should add display: flex; to the child div.

Without adding this style to this situation, it won't work well.

Upvotes: 0

kelunik
kelunik

Reputation: 6908

You probably want overflowing text to create a scroll bar. You have to let the browser know, it shouldn't break lines.

.test {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    background: rgba(0, 0, 0, .2);
    overflow-x: auto;
    padding: 10px;
    white-space: nowrap;
}

see my jsFiddle. I just added a background and padding so it's better visible.

Upvotes: 3

Ishan Jain
Ishan Jain

Reputation: 8161

First of all, if you want to give vertical scroll with your div you need to specify height.

.test {
  position: fixed;
  width: 2500px;
  height: 100%;
  overflow: scroll;
}

Upvotes: 0

user3364215
user3364215

Reputation: 

.test {
    position: fixed;
    width: 2500px;
    height:100%;
}

Upvotes: -1

blurfus
blurfus

Reputation: 14031

Since you set your width to be 2500px, it is not showing in your browser view. So, I added a specified height and reduced the width to make it obvious that they are shown. Also set both (x and y) to scroll - you can fiddle with it as you see fit according to your needs.

.test {
    position: fixed;
    width: 250px;
    height: 150px;
    overflow: scroll;
}

Upvotes: 0

Related Questions