CODEWITHSUNDEEP
htmlcsshorizontal-scrolling
sunjeep
sunjeep

Reputation: 128

Horizontal Scrollbar missing

I want horizontal scrollbar to be displayed. I have used overflow-x:scroll; but I don't see any horizontal scroll bar. Please help. 

<div class="abc">
  <p>This is overflow-x scroll. This is overflow-x scroll. This is overflow-x scroll.</p>
</div>
.abc{
  overflow-x:scroll;
  width:1000px;
}

My code here is here

Upvotes: 3

Views: 5664

Answers (2)

Shaggy
Shaggy

Reputation: 596

According to the your code in jsbin, try this :

.abc{
  overflow-x: auto;
  white-space: nowrap;
}

You can keep one of the these as required 'auto' or 'scroll'.
There are many other Property Values, check here : http://www.w3schools.com/cssref/pr_pos_overflow.asp

Upvotes: 4

DaKirsche
DaKirsche

Reputation: 352

In your example you should set the white-space value to nowrap in your inner div.

take a look at the html:

<!DOCTYPE html>
<html>
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width">
     <title>JS Bin</title>
   </head>
   <body>
     <div class="a">
       <div class="scrollviewer">
           <p class="datacontainer">This is overflow-x scroll. This is overflow-x scroll. 
           <br/>
           This is overflow-x scroll.This is overflow-x scroll.This is overflow-x scroll.This is overflow-x scroll.This is overflow-x scroll.This is overflow-x scroll.This is overflow-x scroll.This is overflow-x scroll.</p>
       </div>
     </div>
   </body>
 </html>

and the css:

.scrollviewer{
   overflow-x: scroll;
   width:100%;
}
.datacontainer{
   white-space: nowrap;
}

Upvotes: 0

Related Questions