I'd like to add a horizontal scroll to a bootstrap page. Currently the way it is set up is to have the user scroll all the way to the bottom of the page the page and then use the horizontal scroll. I'd like to have it set up so the scroll is always visible. I have recreated the issue in jsfiddle.
Js-Fiddle
<table class="table">
If you still want it to be like this but this is not hte proper thing to do in bootstrap add the following css property
.container{
overflow:scroll;
position:absolute;
}
https://jsfiddle.net/Siddharth_Pandey/5usukas1/
You are using table-responsive that's why the scroll is moving to the bottom of the page just remove the responsive from all thought your design will change little bit but you can set it with css jsfiddle.net/Siddharth_Pandey/5usukas1
Related
On my website I use pure.css and the navbar consists of more elements than a small screen can display without scrolling. Therefore a scrollbar appears in that case, which I don't want.
I would like the navbar to stay at the top so that the navbar and the content scrolls simultaneously. When I use position:absolute; everything looks even worse. Also the mobile version of that navbar should still work (on mobile screens scrolling though the navbar should still be possible).
I also tried to deactivate overflow-y, but then, obviously, not every element on the navbar is clickable.
If you want that navbar and content scroll simultaneously, you shouldn't use position:fixed.
Remove position:fixed
Add float:left to menu div
Add float:right to content div
If I misunderstood what you want, the comment made by Marco Valente should be nice.
I an using joomla, in my page I want to add horizontal scroll bar I am getting vertical scroll bar properly. this is my web Page screen shot
the inside portion is coming as iframe
I want to put horizontal scroll forcefully
You have to add the css
body {overflow-x: scroll;}
or overflow-y for the element that you want to give the scroll bar to.
In your code screen.css, line no. 1; overflow-x:hidden.
Make
overflow-x:scroll;
I am using a facebook like button on my web page. I need it to align at the right side of the page. But there is a horizontal scroll bar displaying.
Please see the fiddle http://jsfiddle.net/u4kMs/
I couldn't find out what causes this. How to fix this?
to disable scroll, try something like;
.your_div_class{
overflow-x: hidden;
overflow-y: scroll;
}
The scrollbar appears because the content is too wide for your screen.
Just omit the width on the div element, it will auto-expand to 100% of it's parent. Floating the facebook button to the right like you already did should then align the button correctly without scrollbar.
If you don't get a satisfying solution you can still declare overflow:hidden on the containing div to supress the scrollbars.
This would be the result: http://jsfiddle.net/poikl/u4kMs/8/
It's because the frame is too small for the width that you have set on the top div
<div style="margin-left:auto; margin-right:auto; width:980px;">
So when this is on your web page yo shouldn't get the horizontal scroller. If you do, then consider changing the above width
Try this and remember to put the "right-aligned" div before the left-aligned div, even the right div have to be "after" graphically speaking.
rtl has a problem most times, (with me special with
<body dir="{{(App::isLocale('ar') ? 'rtl' : 'ltr')}}">
in laravel and the only solution is
body{ overflow-x: hidden; } but be careful with inside element is fitted well
I have a DIV section with the css
#all_messages{
position:inherit;
overflow:auto;
height:100%;
width:100%;
}
I want to make it scroll inside the page which i did with the overflow but i don't want an extra scrollbar on the page, i would like native browser's scrollbar to control that not one scrollbar just for that section
Ok so in the picture you can see i have two scrollbars i want to remove the inner scrollbar and have it controlled by the browser's native scrollbar
I think what you want to do is make all the other elements on the page position:fixed. If the content in the remaining section overflows, the browser bar will appear automatically. You must also remove the overflow:auto property from that div, so that it won't create an inner scroll as well.
Use overflow: hidden. This will restrict it and not show any scroll bars.
I'm working to build a CSS layout that has a fixed header, lefCol and Right Col, but the height of the MainCenterColumn (#mainCol) can scroll.
Here's what I have so far: http://jsfiddle.net/DscT6/
The issue with this is, on the mac you can scroll by dragging your fingers on the touchpad. I noticed that the scrolling only works if you mouse is over the MailCol, if your mouse is over the Left or Right Col the page doesn't scroll. Any ideas? Have you seen this? Suggestions? thanks!
Here http://jsfiddle.net/laukstein/DscT6/3/ it works fine.
I agree with polarblau, if you add overflow: auto that element will automatically have the scroll as needed, if you remove the overflow rule the entire page will have the height of the highest element and so it will scroll.