The problem is quite weird and hence I took help of images to explain it.
Image 1: (Refer below image) Here the side bar doesn't have any position explicitly set and popup has
.popup{
position: absolute;
z-index: 900100;
}
My pop up is positioned over side bar and content section, so far so good.
Image 2: On content scroll, I make my side bar to be positioned fixed so that side bar doesn't scroll when only content in being scrolled. Hence side bar gets below styles.
.sideBar {
position: fixed;
top: 100px
}
Now, when the pop up is opened, it hides behind the content section, as shown in below image.
I tried changing positions on elements etc but nothing seems to help. Please provide some approach. I don't want popup to hide behind the content section.
Without your code or a fiddle it's difficult, however please make sure your popup and sidebar have a higher z-index than the content section.
How I fixed it:
z-index of sidebar was made greater than z-index of content. (Credits - #Deathstorm)
Added position: fixed to my pop up div.
Related
I am trying to create a chat page on my website. One of the important features of this application is that old messages should be pushed up on the chat output area whenever a new message is received.
The user should be able to scroll up to see messages in the chronological order that they were received. I have tried to do this (http://jsfiddle.net/wasingej/rqee378d/). However, I cannot scroll up to see the overflowing content.
This works fine when content is overflowing below my element (http://jsfiddle.net/wasingej/rqee378d/3/).
All that has changed between the two is the bottom property has been changed to top. Why won't my scroll bar appear in the first example?
Isn't this much simpler?
http://jsfiddle.net/rqee378d/4/
div.outer
{
position: relative;
min-height: 20px;
overflow-y: scroll;
}
div
{
position: relative;
}
And adding the text using a prepend.
http://api.jquery.com/prepend/
Your scroll bar wont appear in your first example because you are positioning the element using absolute. Please read more about positioning here. Here is a quote:
What is happening is the absolutely positioned elements are
positioning themselves in relation to the body element instead of
their direct parent.
This is why your scrollbar is not appearing. If you make them block elements with a position of static then scrolling would work fine.
I've been going mad trying to fix the responsiveness issue on a site I'm working on, and I can't find any solutions here or anywhere else. The main problem is my fixed footer. On the landing page of the site, there's a header, main area, and footer (the page expands when arrow clicked on, but that's irrelevant).
I've attached the footer to the bottom of the page using fixed positioning. When the screen width is >1024px, the header, main, and footer widths are 100%. Below 1024px, the header and footer widths become static (with 1024 as the static width).
The problem is, there comes a point where the footer should be overflowing on the right side of the screen (since the width becomes fixed). I can scroll right to see the rest of the menu in the header, but the footer doesn't scroll to the right. Rather, it just cuts off everything that would normally be there.
I've tried to recreate the issue in Codepen with the relevant code here: http://cdpn.io/iCJct but it doesn't act the same as the website (located here: http://dev.longviewsources.com/).
Thank you for your help!
The problem is that the footer, with position: fixed is fixed relative to the browser window rather than to your content so when the user scrolls, it moves and the user never sees it. You can use position: absolute; to fix the element to a position relative to the body which is much more controllable. From there you can make the body's height 100% and use a container with an overflow: scroll;
I made a fiddle to demonstrate: http://jsfiddle.net/jaredkhan/ywrx2/2/
So we have two problems here, both of which can be seen in this fiddle: http://jsfiddle.net/5hR9x/4/ if you click the "testing" link at the bottom.
First of all, the content div which contains the map canvas is just overflowing right over the header bar. I was under the impression absolute positioning worked relative to the parent element, which is the content div, yet the map canvas is going right past that.
Also, you'll see that the map only appears in a small portion of the gray canvas, and refuses to expand...when dragged more into view, it resizes itself. Can anyone explain these problems?
Absolutely positioning an element positions it relative to the page, except when it's parent is set to position: absolute or position: relative.
The content div is overflowing above the header because map_canvas is set to position: absolute. You need to give the div wrapping it position: relative, then it will no longer block the header bar.
That won't fix the secondary problem with your map's height though.
I made a fixed div that stays at the top of the page. but when you scroll text shows up through the div. You can have a look at it here. Just scroll down to where the forum categories are.
The css for the whole div is located here
Add the css-property z-index to the toolbar. Something like this:
z-index: 999;
This will make sure your toolbar is always on top.
I have a HTML page which a pretty complex layout (see here). I need to put an image on that page which the visitor can drag anywhere so she can remember where she was. I've implemented the bookmark feature but now I need to place the image somewhere where she can easily grab it.
Basically, I'd like the element to stay below the ToC on the right but it shouldn't scroll out of view.
I guess I could use JavaScript to move the element as soon as it starts to scroll out of view but is there a better option? Can I say "float right and below the ToC div or view.top, whichever is greater"?
Or maybe I should create a fixed header (with the links and the maybe the ToC)?
Any other ideas?
It can probably be done using JQuery, but will always be jittery. I would consider a fixed DIV. Of course you could position that below the menu so it will never be higher (= closer towards the top edge) than the menu, and will maintain its position.
.thingy { position: fixed; right: 0px; top: 415px; width: 256px }
That would necessitate that there is nothing else below the menu, otherwise the bookmark icon will overlap other things.
If you just want the image to be fixed, but still scrollable to the top of the window, then you'll need to handle the window's scroll event, and set the image's position to fixed when the image is scrolled to the top.
For an example of this, see the site navigation on QuirksMode.
Alternatively, you could give the entire TOC position: fixed; right: 0;, give the toc a width, and give the teaser a right-margin equal to the TOC's width. There would be no JavaScript requirement this way, and you'd have the entire TOC always visible.