Div height does not resize when add more content - javascript

I'm trying to build a kind of tag-cloud.
I've a div (the tag container) in which dinamically I add span nodes (the tags).
span nodes are default inline elements, so if I've set their display property do display:block, to prevent that they will overflow the div horizontally.
I've also set their float property to float:left since I want that they're disposed near on the same line and if line is full tthey automatically go to the next line.
The problem now is that, the tags overflow vertically on the bottom. The tag container does not resize its height to contain all the tags inserted. How could I fix this problem?
EDIT
Here is the fiddle. http://jsfiddle.net/Vk92s/1/
As you can see, if a comment float: left, the div automatically resize, but all the tags dispose on a new line.
At opposite, if i add the float: left, the tags wrap correctly, but div does not resize.

Here's a fiddle.
You can set overflow to hidden, like below:
<div id="test">
<span>first</span>
<span>second </span>
<span>third </span>
<span>fourth </span>
</div>
#test
{
border: 1px solid black;
width: 100px;
overflow: hidden;
}
span
{
float: left;
}

In your tag container div, add this css rule:
overflow: auto;
This will make it expand to contain its floated content.
Edit:
A fiddle: http://jsfiddle.net/5AgxU/

Try adding a div that has clear: both set under all of your elements.
Working Demo
HTML
<div id="tag-cloud">
<span class="tag">example</span>
<span class="tag">example</span>
<span class="tag">example</span>
<span class="tag">example</span>
<span class="tag">example</span>
<span class="tag">example</span>
<span class="tag">example</span>
<span class="tag">example</span>
<div class="clear-both"></div>
</div>
CSS
.tag{
display: block;
width: 98px;
background-color: red;
margin-right: 2px;
float: left;
}
.clear-both{
clear: both;
}
#tag-cloud{
width: 300px;
background-color: black;
}

Rather than adding an empty element that clears your float, my preference is to use the following on the parent element so you don't pollute your markup.
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
overflow: visible;
}

Related

How to disable background div scroll temporary while the front div can still be scrolled?

I have 2 div, one in the front and one in the back. The front will popup only when the button was pushed. If the front div isn't displayed, the background div can be scrolled. In the contrary, if the front div is displayed, the background div scroll will be disable. But the front div can still be scrolled.
I have tried using css by applying no-scroll css to the background div.
.no-scroll {
position: fixed;
overflow: hidden
}
But every time I applied no-scroll class to the element, it will bounced back top the top.
I also followed
this article
But it disable the entire window scroll and also the font div too. Any suggestion?
I think you should wrap both divs in a container and the toggle class on that. Something like this
var btn = document.querySelector('button'),
wrapper = document.querySelector('.wrapper');
btn.addEventListener('click', function(){
wrapper.classList.toggle('modal-is-visible');
});
html, body { height: 100% }
.wrapper {
height: 500px;
overflow: scroll;
border: solid 2px black;
padding: 2rem;
}
.lower_div {
background: red;
width: 100%;
height: 600px;
position: relative;
}
.modal {
display: none;
height: 20px;
width: 100%;
position: absolute;
z-index: 2;
background: tomato;
}
.modal-is-visible .modal { display: block;}
.modal-is-visible.wrapper { overflow: hidden; }
<button>
toggle
</button>
<div class="wrapper">
<div class="lower_div">
<div class="modal">
</div>
</div>
</div>
You could try adding an event listener on your background div on the event "blur" to trigger a style change so it puts your "overflow: hidden" style on the block.
You could also use a z-index to prevent the background div from coming back to front, just put a higher z-index to the front div and it should be good.

Hide element if mouse leaves parent

I have two divs, the parent is let's say 100*100px small. When the user hovers the parent, a small popup with the content appears (absolute positioned to one side). This div is like a tooltip, and a child of the 100px div. Now, when the user leaves the parent div, the child should be hidden - even if the mouse leaves the parent 100px * 100px area.
How can I achieve this?
You can easily assign css styles to an element on parent's :hover
.tooltip {
display: none;
}
:hover .tooltip {
display: block;
}
For this solution I'm using JQuery
$('#parent').on('mouseleave', function() {
$('#child').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<div id="child">Child Text</div>
Parent Text
</div>
Check below example.
#parent {
width: 100px;
height: 100px;
background-color: palegreen;
}
#child {
position: absolute;
display: none;
background-color: green;
color: white;
}
#parent:hover #child {
display: block;
}
#parent:hover #child:hover {
display: none;
}
<div id="parent">
<div id="child">
some content for the popup
</div>
</div>

Expand the parent div of floated elements to fit their total width?

I am trying to put together a page that will have a horizontally scrolling pane on it - here is an example of the layout I am looking to get:
The content is dynamically added and has varying dimensions. .
Here's some HTML:
<div class="container">
<div class="inner">
<div></div>
<div></div>
<div></div>
</div>
</div>
Base CSS:
.container {
width: 100%;
height: 100%;
}
.container .inner {
position: relative
}
.container .inner > div {
float: left;
}
Currently the only way I can get it working is by setting an explicit width for .inner. Otherwise, closest I've come is this answer, but it's still pretty far off my desired effect. Is it possible to achieve what I'm looking for with HTML/CSS alone or will I have to resort to javascript?
Is this what you expected? http://jsfiddle.net/GE5Hf/4/
Just use white-space: nowrap together with the inline-block and vertical-align: top. You don't need your .inner div to achieve the desired effect - just use one container with overflow-x: auto:
<div class="container">
<div id="i1"></div>
<div id="i2"></div>
<div id="i3"></div>
</div>
CSS
.container {
width: 100%;
height: 100%;
overflow-x: auto;
white-space: nowrap;
}
.container > div {
display:inline-block;
vertical-align: top;
}
Note: it is better to use overflow-x: auto than scroll just in case the scrollbar is not needed.
EDIT: We were speculating whether you actually need that .inner div. If you need it, you can just add it back with no special style required: http://jsfiddle.net/GE5Hf/5/
EDIT 2: To have the .inner div the width as its children, simply give it display:inline-block: http://jsfiddle.net/GE5Hf/8/
EDIT 3: Tried what you suggested in your last deleted comment, i.e. remove the fixed width of the child. This was really tricky, I had to wrap each child element to special div with display: table-cell and the inner div gets dislay: table-row: http://jsfiddle.net/GE5Hf/12/
This can be done using CSS only.
Here's a jsFiddle.
The solution is to set position: relative; on .container, which creates a new stacking context inside the .container, setting position: absolute; and white-space: nowrap; on .inner ensures that .inner's content div's will not wrap to the next line and that .inner will grow with its content, adding display: inline-block; and vertical-align: top; on the .inner > div's ensures that they are treated as inline elements and stick to the top of their containing element.
I believe this is what you are after, I have checked on the latest versions of IE, Chrome, Firefox and Safari and it works fine on all of them, I have no reason to believe that it won't work on older versions.
HTML
<div class="container">
<div class="inner">
<div></div>
<div></div>
<div></div>
</div>
</div>
CSS
.container {
position: relative;
width: 220px;
height: 400px;
overflow-x: scroll;
}
.container .inner {
position: absolute;
white-space: nowrap;
background-color: #FFCCFF;
}
.container .inner > div {
vertical-align: top;
display: inline-block;
margin: 10px;
}
Is position: relative mandatory ?
.container .inner {
position: fixed;
overflow: hidden;
}
demo
#styke You can do that with display:inline-block(and some font-size on .inner > div) and font-size:0 to div.inner.Provided fiddle here: http://jsfiddle.net/zepva/4/ , ignore the colors, i used them only for demonstrationfont-size:0 will remove the gaps between the element using display:inline-block so when you will get the total width of the div.inner, that will be the sum of children divs
Take a look at this, no script was necessary:
.container {
width: 300px;
height: 100%;
background-color: silver;
}
.container .inner {
white-space:nowrap;
padding: 10px;
overflow-x: scroll;
background-color: gray;
}
.container .inner > div {
display: inline-block;
vertical-align:top;
background-color: red;
border: 1px solid black;
}
Demo: http://jsfiddle.net/er144/4FLWK/
display:inline-block, with vertical-align:top , that way your text wont fall at the bottom of the container.
.container .inner > div {
display:inline-block;
vertical-align:top;
}

How can a text responsively aligned middle vertically within a div

I know how to vertically align a text center within a div when the height of text is known. Say the text's height is 20px.
Wrap the text with a span. Style div & span.
div {
position: relative;
}
span {
display: block
position: absolute;
top: 50%;
height: 20px;
margin-top: -10px;
}
Now I want to responsively align the text. What I want is the font-size of the text be in proportion to the height of the body. Say I have the following style:
body {
font-size: 100%;
}
span {
font-size: 1.5em;
}
Then I will change the font-size of body when the window size changed. In this situation, the height of the text is not determined. Then how to vertically align the text middle?
I know I can use JavaScript to dynamically change the height and margin-top of the span. But I have to do this after the window size changed. Then there is a chance that the window size changed, then the user see the the text not in the middle, then the JS code executed and the text jumped to the middle of the div. This may not be an acceptable solution.
I want to know if there is a pure CSS solution.
I guess I can use the following style to vertically align the text center.
div {
display: table-cell;
vertical-align: middle;
}
But with this solution, the margin of the div is not rendered properly. And the semantic is not right.
So is there a perfect solution?
Another purely CSS (CSS3) solution without table display properties would be to use the transform: translateY() property.
You'll need a container div and the inner span for you text:
HTML
<div id="container">
<span>Your Text</span>
</div>
CSS
#container{
position: relative;
}
#container span{
position: absolute;
top: 50%;
transform: translateY(-50%);
/* Your font-size CSS */
}
JsFiddle example:
https://jsfiddle.net/a0m4xnex/1/
You can use the same strategy for horizontal centering as well with translateX.
Helper Div can help you vertically align div
Works best for me, you can alter it accordingly
.DivParent {
height: 100px;
border: 1px solid lime;
white-space: nowrap;
}
.verticallyAlignedDiv {
display: inline-block;
vertical-align: middle;
white-space: normal;
}
.DivHelper {
display: inline-block;
vertical-align: middle;
height:100%;
}
<div class="DivParent">
<div class="verticallyAlignedDiv">
<p>Isnt it good!</p>
</div><div class="DivHelper"></div>
</div>
With flex box, you can do this: JSBIN
Essentially, here is the code (remember to add prefixes if needed):
html, body { height: 100%; margin: 0px; }
body {
display: flex;
justify-content: center; /* horizontal centering */
}
div {
align-self: center; /* vertical centering */
}
<body>
<div>Centered</div>
</body>

Centering Dynamic width Divs

I have a page that has 2 columns. The first column is a dynamic width. It contains a bunch of tabular data in tables. The 2nd column is a fixed width full of navigation stuff.
The 2 columns are divs with float left. I need to accomplish 2 things.
I need to center the 2 divs on the page. For example, if the first div is 600px wide as dictated by the data inside of it and the second div is a fixed 200px, the centering point is 400px.
I don't want the 2nd div to wrap down if the browser window is resized.
I'm thinking that I may have to nest the 2 divs inside of another div, set the parent div width using javascript, then center it.
I created this fiddle to help illustrate. http://jsfiddle.net/darthg8r/uhKdt/
Surround them with a div and set its style to:
width: ( whatever you need )
margin: 0 auto; // this centers the div
You can set the width dynamically with JavaScript if needed. As long as it's smaller than 100% of the surrounding container, it will stay centered.
You could achieve this with the following code:
HTML:
<div id="wrapper">
<div id="container">
<div id="variable">test</div>
<div id="fixed">test</div>
</div>
</div>
CSS:
#wrapper { overflow: hidden; }
#container {
float: left;
position: relative;
left: 50%; }
#container > div {
float: left;
position: relative;
right: 50%;
height: 300px; }
#variable {
background: red;
width: 300px; }
#fixed {
background: blue;
width: 200px; }
Preview: https://jsfiddle.net/Wexcode/mreLt/
You could also achieve this effect by wrapping the two elements in a container, setting them both to display: inline-block, and finally setting their container to have text-align: center.
The answer is a little more complicated than this, so let me know if you want to choose this route instead.
To make it so the elements don't fall to the next line, use inline-block.
<div id="container">
<div id="variable">
<p>test</p>
</div><div id="fixed">
<p>test</p>
</div>
</div>
CSS:
body { margin: 0; }
#container {
color: #fff;
text-align: center;
white-space: nowrap; }
#container > div {
height: 300px;
display: inline-block; }
#variable {
background: red;
width: 100px; }
#fixed {
background: blue;
width: 200px; }
Preview: https://jsfiddle.net/Wexcode/mreLt/2/

Categories