span with position:absolute won't create scrollbar on container overflow - javascript

I want absolute-positioned SPANs inside a container show scrollbars on the container when its position overflows the container.
However, even with overflow:auto on the container, the SPAN flies outside the container div, as if it does not belong to the container.
I will append many SPANs, so other values of position (like relative) will mess the independent positioning desired for each SPAN, albeit making the scrollbars.
Here is the fiddle:
https://jsfiddle.net/v8x2bot4/1/
CSS:
.container {
background-color: #AFF;
width: 500px;
height: 500px;
overflow: auto;
}
.fly {
border: solid black 1px;
background-color: #0F0;
position: absolute;
}
HTML:
<div class="container">
<span class="fly" style="left:450px; top:100px">blablablablabla</span>
<span class="fly" style="left:300px; top:200px">blablabla2</span>
</div>
How can I hide the overflowing part of the SPAN and make a scrollbar appear as needed?
Hope HTML+CSS can do it without javascript. But solutions with javascript that work regardless of the number of SPANs should be very easy to maintain and suitable.

Add position: relative to .container
https://jsfiddle.net/xfmrtx3s/

Related

css margin-top effecting image and paragraph at same time [duplicate]

I have a very simple html. The red div is inside the blue div and has a 10 px top margin. On non-ie browsers, the blue box is 10 px apart from the top of viewport and the red div is at the very top of the blue div. What I expect is the ie behavior: red div must be 10 px apart from the top of the blue div. Why does non-ie browsers render like this? (I suppose the wrong behavior is the IE's but why?)
And, what is the correct way to do this?
why blank? http://img92.imageshack.us/img92/7662/blankmr7.jpg
<html>
<head>
<style>
body { margin:0; padding:0; }
.outer
{
background-color: #00f;
height: 50px;
}
.inner
{
height: 20px;
width: 20px;
background-color: #f00;
margin: 10px 0 0 10px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
</div>
</div>
</body>
</html>
As much as strager's answer already explains about as much as you need to know as to why it happens – namely that it happens the way it does in browsers other than IE because the specs say so – I think he picked the wrong quote from the section of the CSS 2.1 specification about collapsing margins.
The point he quoted explains how margins can collapse, not how they can "move" to a parent element.
This is rather what explains it:
If the top and bottom margins of a box are adjoining, then it is possible for margins to collapse through it. In this case, the position of the element depends on its relationship with the other elements whose margins are being collapsed.
If the element's margins are collapsed with its parent's top margin, the top border edge of the box is defined to be the same as the parent's.
Or, in slightly more human-readable form in the Mozilla developer documentation:
Parent and first/last child:
If there is no border, padding, inline content, or clearance to separate the margin-top of a block with the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block with the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
As for how to fix it, I'd probably go for the overflow: auto solution Chris Lloyd suggested (as much as that may have side-effects).
But then that really depends on what exactly the rest of your code looks like. In this simple example you could easily just change the margin on the child element to a padding on the parent element.
Or you could float the child element, or absolutely position it...
Or how about an inverse clearfix if you want to get really fancy:
.outer:before {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
The margins are being merged. The output produced by IE is probably incorrect.
In the specifications (which are down for me at the moment):
Two or more adjoining vertical margins of block boxes in the normal flow collapse. The resulting margin width is the maximum of the adjoining margin widths.
You can use borders instead of margins, with border-color set to transparent.
There is a pretty fitting answer to this question: overflow: auto;
<html>
<head>
<style>
body { margin:0; padding:0; }
.outer
{
background-color: #00f;
height: 50px;
overflow: auto;
}
.inner
{
height: 20px;
width: 20px;
background-color: #f00;
margin: 10px 0 0 10px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
</div>
</div>
</body>
</html>
Could it be IE sees the DOM as div.inner having div.outer as it's parent node(and calculates offset from it),
and that other browsers instead has both of them answering to the body element?
Ok, solution without overflow auto:
<html>
<head>
<style>
body { margin:0; padding:0; }
.outer
{
background-color: #00f;
height: 50px;
border: 1px solid transparent;
}
.inner
{
height: 20px;
width: 20px;
background-color: #f00;
margin: 10px 0 0 10px;
padding: 0;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
</div>
</div>
</body>
</html>
The inner element is wanting something to push against, and providing a boder (or forcing the browser to consider the overflow) does this.

How can I make my tree view elements overflow past the parent div's width?

I am using bootstrap-treeview to try to make a nice treeview within my MVC project. This control is available on NuGet so its easy to get started with it. The left hand div shows the tree and the right hand div shows the content of each element when clicked:
<body>
<div id="tree" style="position:absolute; width: 20%; height: 100%; overflow: scroll"></div>
<div id="content" class="list-group-item node-tree" style="position: absolute; left: 20%; width: 80%; height: 100%">This is where content goes once you click on a file or folder element.</div>
</body>
There is a slight problem, though. The content of the div with the ID = tree gets cut off:
Ideally, I would like these list elements to overflow to the right, beyond the size of the div with the ID = tree, as you can tell, because I have set overflow: scroll, so I do not want any text to wrap to a new line.
On runtime, it appends list elements as follows...
These list elements seem to have the following CSS:
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid #ddd;
}
I have tried adding white-space: nowrap; to this CSS, which makes the text do what I want (and overflow with a scrollbar), but the background and border of each list element stay at the width of the parent (which is not what I want; I want them to also overflow all scrollable width just like I did with the text)!
What can I do to make each element of this list properly overflow past the bounds of the parent div they all exist under?
Edit: I've tried putting overflow:visible on all parent levels as well, but it did not work. It removed the vertical scroll bar and kept all list item background borders still restricted to the width of the tree div. I also found that setting width = 10000px on the .list-group-item CSS partially gives me what I want as well, but obviously this makes the backgrounds too wide and the scroll bar becomes too elongated. I want the width of all list elements to be equal to the width of the widest overflowing content.
I figured it out. I had to change the display to table-row-group and I had to add white-space: nowrap:
.list-group-item {
position: relative;
display: table-row-group;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid #ddd;
white-space: nowrap;
}
Add overflow:visible to the parent element(s). You may need this at multiple levels, as each parent element could potentially restrict the content.

Get height, or width, of a div with overflow property and use that to set a limit on the scroll bar

This might be a simple question, but unfortunately I can't figure out how to do this.
Let's say I have a div with an overflow property, so that when I add some text to it that is bigger than its dimensions, a scroll bar appears to fit the text within it, as so...http://jsfiddle.net/Lddxgzvz/
What I want to do is use plain javascript to get the new dimensions of the div with the scroll bar and use that to set a limit on how much text can be added to the div.
I'll try to illustrate this...
Let's say the limit on how much can be added to the div is 200px, meaning I want the scroll bar to remain static once the div reaches this size. So, for example, if the following text width is 250px:
Hello World Foo Bar
and the word Bar is 50px, I want only this text to appear within the div:
Hello World Foo
I tried using javascript to get the height and width of the div, but it does not take into consideration the overflow property. It only gets the height and width which I set the div to be initially.
I hope you all understand what I am trying to do, I'll re-edit if necessary.
You can try adding an inner wrapper with this CSS:
display: inline-block;
max-width: 200px; /* Maximum scrollable amount */
overflow: hidden;
.outer-wrapper {
border: solid 2px black;
height: 100px;
width: 100px;
overflow: auto;
}
.inner-wrapper {
display: inline-block;
max-width: 200px;
overflow: hidden;
}
<div class="outer-wrapper">
<div class="inner-wrapper">
LongLongLongLongLongLongLongLongLongLongLongLong
</div>
</div>
<div class="outer-wrapper">
<div class="inner-wrapper">
Short
</div>
</div>
As I understood you search scrollWidth and scrollHeight
console.log(document.getElementById('div').scrollWidth);
console.log(document.getElementById('div').scrollHeight);
Demo: http://jsfiddle.net/Lddxgzvz/1/

How to reveal element by scrolling?

I'm trying to make an effect similar as used on http://www.t-mobile.com/ , when the user scrolls down to the bottom of the page they reveal the "footer" more and more as the user keeps on scrolling.
I've tried to search both here and on google but haven't been able to find anything that's really useful. Most examples only shows/hide the footer once the user scrolls to the bottom.
So my question is, what's the effect called to reveal an element by scrolling? Are there any good tutorials / blog posts about this? All help I can get is much appreciated!
As I commented, you need to make your element fixed, so as explanation goes, I have two elements here, one is a normal position: relative; element, so nothing fancy about that, I assigned relative so that I can make the z-index work
Second element is positioned fixed and also, make sure you use margin-bottom which should be equal to the height of your footer, no need to assign any negative z-index whatsoever to this element.
Demo
Not much HTML ...
<div></div>
<div>Reveal Me</div>
CSS
/* These are for your main site wrapper */
div:first-child {
height: 800px; /* Even auto is fine, I
used fixed height because I don't have any content here */
background: #eee;
margin-bottom: 200px; /* Equals footer wrappers height */
z-index: 1;
position: relative;
}
/* These are for footer wrapper */
div:last-child {
background: #aaa;
height: 200px;
position: fixed;
bottom: 0;
width: 100%;
}
For Dynamic Sizes
Note that am using a fixed height for the fixed positioned element, if you have variable height in footer element, than you need to use JS or jQuery to calculate the height using
$('#wrapperElement').css('margin-bottom', $('#footer').height());
Here, the selectors of #wrapperElement and #footer are my assumed ones, you can replace those with the your own selectors.
Something about fixed element - Horizontal Centering (I think it will be helpful to some users)
When you will make your element fixed, it will get out of the document flow, so if you are assigning fixed to the wrapper of footer element and want to center some content in there, than nest another element inside that wrapper and use width and margin: auto; for that...
Demo 2
HTML
<div></div>
<div>
<div>Reveal Me</div>
</div>
CSS
body > div:first-child {
height: 800px;
background: #eee;
margin-bottom: 200px;
z-index: 1;
position: relative;
}
body > div:last-child {
background: #aaa;
height: 200px;
position: fixed;
bottom: 0;
width: 100%;
}
body > div:last-child div {
width: 80%;
margin: auto;
outline: 1px solid red; /* To show that element is horizontally centered */
}
Note: Selectors used in this answer are too general and are good for
quick demonstration purposes, in real projects, make sure you use
specific selectors

Centering an element only when screen is at max width (adding min-width property)

Centering an element only when screen is at max width
At the moment, I am centering various elements (by JavaScript) by calculating the screen's width and setting the element's "margin-left" to screen.width/2 - element.width/2.
I do this so that when the user resizes the window, the element will stay in the absolute center of the screen and become invisible if the window is resized to less than 50%.
Is this a typical way to center things only at the max width, or is there a simpler CSS approach to achieving the same effect?
An example of the effect I am trying to achieve: Khanacademy.com's logo.
[Edit]
Thanks to hungerstar, I was able to figure out the root cause of my issue. If you do not set a min-width, then margin: 0 auto will always keep your element centered.
For block elements, giving an explicit width plus margin: 0 auto is the basic technique. Inline (and inline-block) elements such as images you can center using text-align:center on the parent container.
If you have a group of elements that need to be centered but need to maintain left alignment or other formatting, i.e. a heading followed by paragraphs with lists, you can do the following:
HTML
<div id="wrapper">
<div class="outer">
<div class="inner">... Content...</div>
</div>
</div>
CSS
#wrapper {
margin: 0 auto;
width: 900px;
}
.outer {
height: 50px;
left: 50%;
position: relative;
display: inline-block; /* or float: left; */
}
.inner {
right: 50%;
position: relative;
}
You can achieve this using css.
margin: 0 auto;
EXAMPLE

Categories