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.
Related
So I have a container that has vertical scroll. Within this container I have x amount of inputs and if the user hovers over any of the inputs a tooltip will be shown hovering over on the rightside of input.
The issue that I am seeing is that the tooltips inside of the scrolling container can not have an absolute position that leaves the container. Meaning if the user scrolls over the top input the tooltip will cut off once it hits the top of the scroll container.
I have tried a bunch of things, but nothing seems to work to get this setup to work properly. Z-index does not seem to allow me to get out of the scrolling container.
Sorry this isn't a perfect example, but basically you can see that the tooltips are confined into scroll container:
http://cssdeck.com/labs/6aijimdf
Expected results:
I have a scroll area in which there is an absolute positioned element that will leave the scroll area when it overflows it.
Actual results:
I have a scroll area in which the absolute positioned element can not leave the scroll area when it overflows it.
Since tool tip container is position: relative and overflow: scroll, there is no way an position: absolute element can leave it.
I think a better way to achieve your expectation is using javascript to controll the tool tip element's position, and using position: fixed for that.
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.
I have been building my site on Bootstrap for the first time and I'm having a problem that I can't find a solution of this. When I add some content and if its large and big enough to add a scroll bar in browser, whole page content moves towards left.
In simple words, If there is scrollbar, page content is moving to left like 17px and if not, it works okay. I don't want to add a perm scrollbar here like
overflow-y: scroll;
and if I add
width: 100vw;
It works fine and contents stays at its position even with scrollbar but if there is a vertical scroll bar, horizontal scroll appears too for no reason.
You have couple of solutions:
You can show your scroll permanently and style it accordingly to be a part of your page:
html {
overflow-y: scroll;
}
You can add:
padding-right: 40px;
as 40px is what I have heard is the max scroll size that you can get.
Create a parent div that will have all of your contents, then create a child that is slightly smaller, make it the way that changing parent size will not make child size to change.
You can create JS function that will detect if the scroll is displaying on the page, and it would change the margin settings.
You can use media queries to tackle the problem.
I'm trying to set up a page so that the navigation bar has a background that extends horizontally past the edges of the window, but the actual content of the page remains within a 960px wide container.
Here's a link to what I've got so far, it looks the way I want it to but there's a problem.
http://jsfiddle.net/pFDDV/3/
The problem is that the page will still scroll horizontally to the end of the over extended div, on the right side. It DOESN'T have this problem going left, only right (which I assume is due to the way elements deal with negative margins/positioning). I thought I might be able to just get away with:
body {
width: 100%;
overflow-x: hidden;
}
Which hides the bottom scroll bar, but you can still scroll right with the arrow key, and if you resize the page smaller than the 960px of actual content, you don't get a horizontal scrollbar like you should.
Is there any way I can make the page ignore the width of just that one div?
I'm 99.9% sure I saw this work somewhere, but I can't remember where, and research on the top/left, bottom/right rules of negative margin/positioning leads me to believe this just might not work. Any ideas?
Also: I know I could probably do this with a repeating background image, but I'm trying to avoid using images.
You can use position:absolute & write like this:
#mWrapper {
background: none repeat scroll 0 0 red;
height: 30px;
left: 0;
position: absolute;
right: 0;
}
check this http://jsfiddle.net/sandeep/pFDDV/5/
Are you expecting like this
http://jsfiddle.net/pFDDV/6/
I'm noticing a lot of sites are recently implementing new types of scrolling effects. Here's one example:
https://banksimple.com/
When you first start scrolling the initial section stays in place (z-index of 1?) while content scrolls over top of it. It also uses fragments and dynamically highlights it's navbar depending on what area the user has scrolled to.
I've seen a few sites use similar techniques. One (which I cannot find the link to) changes the background dynamically.
Is there a common technique used for these types of sites?
The first two sections are using position:fixed.
This fixes the items to a position on the page. They don't move, even with scrolling.
The scrolling section uses position:absolute with a high z-index.
This scrolls fine and because it has a higher z-index than the fixed position elements, it scrolls over them.
There's several ways to do this, but the easiest is to simply make a div, and use the CSS
"position:fixed;"
property. This will cause the div to stick exactly where it is, relative to the browser window.
You may also want to set you z-index to a large value so that the div is certain to stay on top of the rest of the page.
For the menu and header, it's a simple CSS solution using position: fixed and z-index. Both menu and header has position: fixed, while the menu has a large z-index value and the main content has a slightly lower one:
#menu { position: fixed; top: 0; left: 0; z-index: 2000; }
#header { position: fixed; top: ??; left: 0; }
#wrapper { z-index: 10; }
As for the fragment thing, it's done using JS. W3Fools has the same thing, done using jQuery. Perhaps you can decipher the script. Looks like it hooks to the scroll event of the document, checking if the position if the element is above the position of the viewport, taking action accordingly.
One way is to combine CSS + JavaScript let's say (jQuery)
CSS:
position:fixed for the top panel.
Use jQuery offset to detect container position and after you can can apply CSS classes for the "highlights navbar".