I have menu that scrolls vertically with the page however it also scrolls horizontally if you move horizontal scroll bar to the right you will see what i mean.
I need to eliminate horizontal scrolling and only keep vertical, any easy way to do it with css?
http://jsfiddle.net/NNnkU/4/
You need to add in a width to the page_frame of 100% as below
.page_frame {
background-color:#006600;
color:#ffffff;
width: 100%;
}
Related
I have a table that has a set height & am trying to get the horizontal scroll bar to remain sticky (fixed) to the bottom of the page when scrolling vertically - is there anyway I can achieve this? Either pure CSS or involving JS
Try this css
.scrolling {
height: 30px;
margin-top: -30px;
}
as you know if html content vertical view is more than browser window, a vertical scroll bar will add to page. It will cause moving html content into left which does not have a good view.
You can avoid this treat using this CSS code:
html{
overflow: scroll;
}
But there is a problem with this code, you will always see a disabled scroll bar on right side of the page. Now let's check another way, in this way you will subtract body width of the scroll width:
body {
width: calc(100vw - 68px);
margin-left: 34px;
}
This will put body in center and if in future a vertical scroll bar add to the page, it won't affect content and will be on the right side out of the body area! This way is good but there is a very little problem. you have subtracted your body width!!! Just think I have a fully filled body area! In this situation I need the whole 100% width and also I do not want the scroll bar to move my content into left and also I do not want to see a disabled scroll bar always!
So I'm looking for a way I can make scroll bar while showing on top of html content. so Nothing will move and also I have 100% width and when ever it is needed I will see scroll bar.
Is there such trick? Hope I'm clear enough.
Good afternoon,
I am trying to center an image button vertically inside a drawer (for the test I am using a black box). I have managed to center the box horizontally, but I have tried everything, but could not center it vertically. I was able to center it once, but on the phone it would not be centered anymore, or when I change orientation of the screen. So what I want is to always display box in the vertical middle of the drawer, no matter what is the orientation or screen size.
The entire page is here: https://www.cs.drexel.edu/~cm3283/MobileVer/index.html
I will appreciate any help.
All you need to do is to add a style to parent of black box:
position: relative;
top: 50%;
I have a cart div for my webshop that sticks to the screen when you scroll down. I'm using the solution from this page - the answer that has the most vote up's, not the accepted answer:
How can I make a div stick to the top of the screen once it's been scrolled to?
When the visitor adds many items, the cart gets taller than the browser window, and some items disappear below the browser. I want to add a scroll bar to the div using overflow-y: scroll, but the problem is that, even if the div is taller than the screen, the browser still thinks the user can see the whole div, so the scroll bar doesn't get enabled.
Can I somehow make the div understand that it shouldn't grow beyond the screen, and activate the scroll bar instead?
Thanks!
You could possibly use max-height in conjuction with media queries based on screen height?
As per my understanding max-height will work for this kind of module.
check http://jsfiddle.net/kundansankhe/mch22264/1/
html, body {
height:100%;
}
.test {
position:fixed;
top:0;
overflow-y:auto;
border:1px solid red;
width:150px;
max-height:100%;
}
to occupi scroll-bar space, you can use overflow-y:scroll, so it will occupied scroll-bar space and will enable when content goes larger than screen height.
check updated link http://jsfiddle.net/kundansankhe/mch22264/1/
The page i am having a problem with is this one: http://www.bkd.com/wealth-advisors/directory-test.htm. The navigation bar is what i want to stay in place which it does now but i want it to keep the 1800px width without adding a horizontal scroll bar. You can see my other pages do that now but don't need a scroll bar (http://www.bkd.com/wealth-advisors/locations-test.htm).
Here is my CSS for the navigation section:
#header3dir {
padding:0px 0px;
text-align:left;
height:52px;
}
#header3-contentsdir {
margin: auto;
width:1800px;
padding: 40px 0px;
background: url(/.../navigation-bar.png) bottom no-repeat;
height:52px;
position:absolute;
}
If i change the position to fixed it keeps my width and gets rid of the scroll bar but then the navigation scrolls with the page which i do not want. I can change the width of the bar but then on bigger monitors the navigation bar cuts off while the other pages navigation bar continues on.
HTML
'
'
Please let me know if you need any more information. I am here to learn what I need to do so I can fix this problem.