I'm doing "Scroll JQuery Mobile Panel Separately From Content" ,what I have done
I apply this css to Achieve what I do but the problem is
overflow-y : scroll ==> Always show even its content not overflow.
Do you have any idea about it, Thank in advance.
.ui-panel-inner {
position: absolute;
top: 1px;
left: 0;
right: 0;
bottom: 0px;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
Try using overflow: auto instead. That will only show scrollbars when the content overflows the normal height, whereas overflow: scroll will show them all the time.
overflow-y : scroll always display scroll bars, use auto instead.
.fixed-panel {
min-height: 280px;
max-height: 280px;
overflow-y: auto;
}
Related
I have a page I have 3 separate DIV's aligned, one right, center, then left. Which looks perfect when the page is at default size, however on smaller re-sizes they all 3 could rest on top of one another, which makes them unreadable.
My current CSS, all the same except the right value.
.Cat_One {
margin-left: 2%;
position:fixed;
left: 170px;
min-width: 20%;
max-width: 20%;
max-height: 350px;
overflow: scroll;
overflow-x: hidden;
overflow-y: auto;
}
My body CSS
body {
width: 100%;
min-height: 690px;
min-width: 1275px;
margin-left: -0px;
overflow-x: scroll;
overflow-x: scroll;
}
I just need to figure out a way to stop them from overlapping on resize. Tried many of the similar posts and doesn't seem my case is the same and the suggestions there don't exactly work out.. Perhaps I missed something.
Without more code, my best guess is the issue is with your position:fixed. Dump that. Depending on what you are looking to do, you can do display:inline-block; or use flexbox, or float:left; or if this is tabular data you could even use a table.
Position fixed though, I would put money on that not being what you want.
I had the same issue (Kinda). What i did was add this into the css:
top: 0px;
Right: 0px;
Position: Absolute;
This will make the div lock to the upper right corner of the page, and then use:
Transform: Translate(XXvw, XXvh);
The transform is used to relocate objects to where you want it ^^
You must also specify this in the css for html,body else it won't work:
Min-height: 100vh;
Min-width: 100vw; (100% of the viewport/browser window).
http://jsfiddle.net/leongaban/6rd2hhpq/8/
I'm working with a fixed position div and making elements scrollable from inside it. Similar to this problem here.
I was able to get the scrollbars to show up, my problem is that I have a fixed header, and my fixed sidebar has to be pushed down in my view.
This allows the user to keep scrolling past the browser window so you lose sight of the scroller.
Is there anyway to keep the scrollbar in view with my example?
So that when the scroller hits and stops at the bottom of the view, you also see the last item.
.red-box {
position: fixed;
width: 100%;
height: 40px;
color: white;
background: red;
}
.sidebar {
position: fixed;
top: 60px;
overflow-y: auto;
margin-left: 20px;
width: 180px;
height: 100%;
}
If I understand the issue correctly - you want the fixed element to fill the screen apart from the header height... then you could try :
.not-stuck {
height: calc(100% - 60px);
}
Looking at the other solutions on the page that was linked to, my personal second choice would be to use JavaScript (but the question doesn't have that tag of course).
I changed the height to 90% and it seemed to work:
.not-stuck {
position: fixed;
top: 60px;
overflow-y: auto;
margin-left: 200px;
width: 180px;
height: 90%;
}
I have the following CSS code for the #Wall div:
#Wall {
z-index:0;
position: absolute;
left: 50%;
top: 0px;
margin-left: -952px;
width: 1920px;
height: 1200px;
overflow: hidden;
}
This forms a wallpaper advertising image which is clickable. Unfortunately, the overflow function does not work and browser places a horizontal scroll for the right part of the image. How to fix this and hide the part of the image which should be seen only on higher resolution screens?
I fixed the problem by adding the overflow code in the body {}, too.
Thanks indeed.
I have a chatbox, fixed at the bottom of a div with position: absolute; and bottom: 0px;.
The problem with this however, is that it's not scrollable. How would I make that happen?
-Edit- It's on the bottom of this page: http://www.novaember.com/servers/minecraft/
You can do like so:
#chatdiv {
overflow-y: scroll;
}
I tried something in the page you gave. And I guess I got what you're asking by adding height: 285px and overflow-y: scroll to #webchat-messages.
We want to force the div to accept the height of its parent div. Use top:0 should allow it:
position: absolute;
top: 0;
bottom: 0;
overflow-y: scroll;
I have a div with position: absolute set and it's just a tad bit wider than my browser window. I've successfully hidden the horizontal scroll bar, but I am still able to scroll over with a Macbook trackpad.
Is there any way to circumvent this?
<div id="container">
<div id="big-image"></div>
</div><!-- #container -->
#container {
overflow-x: hidden;
}
#big-image {
background: transparent url('/path/to/image.png') no-repeat center top;
position: absolute;
width: 1307px;
left: 50%;
margin: 0 0 0 -653.5px;
z-index: 4;
}
If you're not limiting the height of #container, just set overflow to hidden, as overflow-x is strange in that it removes the scroll bar, yet still allows you to scroll.
Example
body {
overflow-x: hidden;
}
#container {
overflow: hidden;
width: 100%;
}
You could probably use position: fixed; on the #big-image.