I have a <div class="row"> which will contain dynamically generated buttons (basically I need boxes)
I need the parent div to be of fixed size but need its contents to resize (to fit everything in one row) automatically based on number of buttons inserted.
Consider the following layout:
All of the solutions I have tried need fixed width or the boxes get plotted in new line.
My last option would be using ng-style and setting the width to 100/number of boxes. I need some other solution.
One of the things I have tried so far:
.wrap {
width:80%;
margin:0 auto;
}
.wrap div {
width:23%;
padding-bottom:23%;
margin:1%;
float:left;
background:gold;
}
<div class="wrap">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
Use flexbox
div {
display: flex;
}
button {
flex: 1 1;
}
<div>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
</div>
Ex. with your code.
.wrap {
width: 80%;
margin: 0 auto;
display: flex;
}
.wrap div {
flex: 1 1;
padding-bottom: 23%;
background: gold;
border: 1px solid;
}
<div class="wrap">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Just using flexbox won't cut it. If you need the box to maintain the square shapes on adding more boxes, you need to use a bit of javascript as well.
What are we doing?
We're adding more boxes and changing their height by maintaing an iterative variable(i) which checks how many boxes are present and divides the height according to the width. Since, the width is fixed if 3 boxes are present, the height should be equal to width of each item present.
You can implement a function which counts the number of boxes on load and resizes the flex container height according to it to have the boxes keep the square dimension.
var flex = document.getElementById("container");
var box = document.getElementById("box1");
var i=1;
function add() {
i++;
var cln = box.cloneNode(true);
cln.removeAttribute("id");
flex.appendChild(cln);
flex.style.height=(flex.clientWidth/i) + 'px';
}
.flexc {
display: flex;
width: 400px;
height:400px;
}
.box {
flex: 1;
border-radius: 20px;
background: olive;
margin:1px;
}
<button id="add" onclick="add()">Add more boxes</button>
<div class="flexc" id="container">
<div class="box" id="box1"></div>
</div>
Related
I have this code and the child's height is changing but the parent's height remains the same. I want a CSS code to make the parent's height the same as the child
<div class = "parent">
<div class="child">
</div>
</div
Note: using your HTML
if you add the CSS
<style>
.parent, .child {
width: 120px; height: 100px;
}
</style>
<div class = "parent">
<div class="child">
</div>
</div
both child and parent would have the same width and height of: 120, by 100. Change these values to suite what you need.
if you add this additional CSS lines:
.parent { border: 1px solid red; }
.child { border: 1px solid blue }
this will draw your border - in different colours, so you can see easily what is happening - you can remove this after
how to justify child divs with variable width inside parent div with fixed width.I want to justify child divs not only on single line but inside the whole parent container. Parent and Child elements are dynamically generated.
<div class="parent">
<div class="child">1.2345</div>
<div class="child">1:223345</div>
<div class="child">1:23421225</div>
<div class="child">1:2345</div>
<div class="child">1:235</div>
<div class="child">1:2345</div>
.
.
.
30 Child elements
</div>
CSS
.parent{
width:450px;
text-align:justify;
}
.child{
float: left;
margin: 2px;
}
output is something like this
UPDATED
Now i have set width to each child divs depending on its text length.
.parent{
width:250px;
text-align:justify;
border: 1px solid #ddd;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.child{
margin: 2px;
}
<div class="parent">
<div class="child">1.2345</div>
<div class="child">1:2345</div>
<div class="child">1:2345</div>
<div class="child">1:2345</div>
<div class="child">1:2345</div>
<div class="child">1:2345</div>
. . . 30 Child elements
</div>
demo add 30 +
Once all of your child divs have been added to the DOM, you could get the element with the greatest width and then set the width of each of the other divs.
var childDivs = [].slice.call(document.querySelectorAll("div.child"));
var maxWidth = Math.max.apply(null, childDivs.map(function(ele){
return ele.offsetWidth;
}));
for(var i = 0; i < childDivs.length; i++){
childDivs[i].style.width = maxWidth + "px";
}
CSS Flex box can do the job but you must ensure browser compatibility.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Also, there are a few concepts to understand before using flexbox. In the end, it can solve many CSS layout problems.
Ohterwise, you may need to use javascript to dynamically resize your elements.
I have a side nav bar which looks like this:
.scroll-box {
overflow: hidden;
width: 128px;
}
.filler {
height: 256px;
overflow-y: auto;
}
.selector {
background-color: #369;
padding: 8px 4px;
text-align: center;
flex-grow: 1;
display: inline-block;
cursor: pointer;
box-sizing: border-box;
transition: .1s !important;
}
.bar {
height: 8px;
width: 100%;
background-color: #808080;
}
.label {
padding: 4px 8px;
background-color: #707070;
}
.active {
background-color: lightgrey;
color: #369;
}
<div class="scroll-box">
<div class="label">Dates</div>
<div class="filler">
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector active" id="today">15-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
</div>
<div class="bar"></div>
</div>
I want to get it so that when the page loads, it automatically centers the view of the side nav bar to the today id element. I've tried putting myUrl#today but that changes the entire page scroll, which I do not want. I
I only want the scroll in the side nav bar to change it's position and center on the #today bit. Does anyone know of a way to do this?
I am willing to use jQuery and JS as well.
Thank you.
I think you can use jQuery code such as
$(document).ready(function(){
// when document is ready
// first check if #today is defined in HTML
// the $('') is the jQuery selector of to select an element
// $('#today') means select an element with the ID "today"
// the .length attribute is default javascript attribute to check
// how many of elements selected has existed
if($('#today').length > 0){
// the offset() function is a jQuery function that is used for check the
// relative distance from the border of current element to its parent
var distance_to_top = $('#today').offset().top;
var top_label_height = $('.label').height();
var distance_to_scroll = distance_to_top - top_label_height - 8;
// 8 px is body margin on jsfiddle
// scrollTop() function is another jQuery function to scroll an
// overflow element
$('.filler').scrollTop(distance_to_scroll);
}
});
find the offset of the today element relative to its parent, then minus the label height because the label will cover on top of the #today. the scroll to top
The demo can be found at here
Maybe this can do. (I can't test it right now...).
Basically, we get every element of the div that doesn't have the id "today" and we add the height of those elements. When we finally reach "today", we set the scrollbar to the height of every past elements added together and go out of the loop.
$(document).ready(function(){
var height = 0;
$(".filler *").each(function () {
if($(this).is("#today"))
{
return false; //to get out of the .each
}
else
{
height += $(this).height();
}
})
$( "div.demo" ).scrollTop(height); //set the scrollbar
});
I have 3 fieldsets.
What I would like to make is this layout:
I want the bottom right fieldset to be bottom aligned, so it's bottom would be aligned with the left fieldset.
It should work in different resolutions.
Is there an easy way? or I will have to use javascript to add to it a margin-top dynamically?
code:
<div class="fieldSetsContainer">
<fieldset class="leftFieldSet">test
<br/>test
<br/>test
<br/>test
<br/>test
<br/>test
<br/>
</fieldset>
<div class="rightFieldSets">
<fieldset>test2</fieldset>
<fieldset class="bottomRightFieldSet">test3</fieldset>
</div>
css:
.rightFieldSets {
float:left;
width:34%;
}
.rightFieldSets fieldset {
clear:left;
width:89%;
}
.leftFieldSet {
width:62%;
float:left;
margin-right:1px;
}
.bottomRightFieldSet {
margin-top:6px;
}
here is the a link:
http://jsfiddle.net/bbryK/
My solution assumes two things:
The right column has a fixed width.
The left column must always be the highest.
See http://jsfiddle.net/c3AFP/2/
Html structure:
<div class="container">
<div class="right">
<fieldset class="top"></fieldset>
<fieldset class="bottom"></fieldset>
</div>
<fieldset class="left"></fieldset>
</div>
Css styles:
.container {
position: relative;
}
.top, .bottom {
width: 300px;
}
.left {
margin-right: 300px;
}
.right {
float: right;
margin-left: 10px;
}
.bottom {
position: absolute;
bottom: 0;
}
EDIT:
Here is a solution with the right column sized by percentage: http://jsfiddle.net/c3AFP/5/
EDIT 2:
Here is a table based solution which removes the requirement of the left column being the tallest. Using vertical-align you can adjust where the smaller elements should align in relation to the tallest one: http://jsfiddle.net/c3AFP/7/
I'm giving you a start point on fiddle. Please play around, make some code and do share the same.
http://jsfiddle.net/vY462/
#one{width:200px;height:70px;border:2px solid black;float:left;}
#two,#three{width:200px;height:25px;border:2px solid black;float:right;margin-top:5px;}
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
Is it possible to animate two divs widths at the same time (one increasing, one decreasing) so that the parent containers overall width remains exactly the same.
As an example, a container div contains 5 child divs. Teh container div is 1000px wide and 4 of the child divs are 150px wide and another is 400px. I want to be able to animate the 400px div down to 150px and one of the 150px divs up to 400px;
The problem I am getting is that the parent container shrinks and expands as the animation completes - and it happens noticeable.
I am not looking for a plugin or anything for this, simply some advice on the best way of achieving this.
Many thanks in advance for any help.
EDIT:
The main problem is that every div on the right of the one being animated gets pulled to the left and then sent back out when complete.
Here is the code I am using
<style type='text/css'>
.panel-wrapper {
width: 954px;
height: 372px;
background-color: #fff;
position: relative;
overflow: hidden;
}
.panel-wrapper .panel {
margin-right: 1px;
height: 100%;
width: 64px;
float: left;
background-color: #cacaca;
}
#home-panel {
width: 359px;
}
.panel.last {
margin-right: 0;
}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function() {
jQuery('.panel').mouseenter(function() {
jQuery('.panel-wrapper .open').stop().animate({width:"64px"},400, 'linear');
jQuery('.panel-wrapper .open').removeClass('open');
jQuery(this).addClass('open');
jQuery(this).stop().animate({width:"359px"},400, 'linear');
});
});
//]]>
</script>
<div class='panel-wrapper'>
<div id='home-panel' class='panel open'>
</div>
<div class='panel'>
</div>
<div class='panel'>
</div>
<div class='panel'>
</div>
<div class='panel'>
</div>
<div class='panel'>
</div>
<div class='panel'>
</div>
<div class='panel last'>
</div>
</div>
Set the parent height to a fixed number of pixels will keep it from shrinking or expanding.
Include an empty div of 1000px width after the divs you want to antimate. That should keep the wrapper div from shrinking.