I have three divs in a row
One on the left, one in the middle and one on the right.
The one's on the left and right need to expand AWAY from the one in the middle.
Please see image:
my clients.php which displays them all
echo "<div style='width: 100%; display: inline-block;'>";
while ($client = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC))
{
$positive = $client['Pos'];
$negative = $client['Neg'];
$total = ($positive + $negative);
// Calculate width in percentage
if ($total > 0)
{
$positiveWidth = ($positive/$total)*100;
$negativeWidth = ($negative/$total)*100;
}
else
{
$positiveWidth = "0%";
$negativeWidth = "0%";
}
echo "<div class='clientid' style='height: 50px; font-size: 18px; vertical-align: middle; display: inline-block; width: 100%'>" .
"
<div class='positive-bar' style='width: $positiveWidth;%;'></div>
<div style='display: inline-block; width: 5%;'>
<span style='font-size: 20px;' class='hover-cursor fa fa-chevron-up vote-up'></span>
</div>" .
"<div id='client-name' class='hover-cursor hvr-underline-reveal voteup votedown' data-clientid='{$client['ClientID']}' style='width: 20%; display: inline-block;'>" . $client['Client'] . "</div>" .
"<div style='display: inline-block; width: 5%;'>
<span style='font-size: 20px; text-align: right;' class='hover-cursor fa fa-chevron-down vote-down'></span>
</div>
<div class='negative-bar' style='width: $negativeWidth;%;'></div>
</div>
<br />";
}
echo "</div>";
This means that also the divs only get as big as you see in the image and push the text out of the center.
The relevant piece of CSS:
.positive-bar
{
height: 25px;
background-color: #64BE06;
display: inline-block;
border-radius: 5px;
}
.negative-bar
{
height: 25px;
background-color: red;
display: inline-block;
border-radius: 5px;
}
So my question is
How can i make the DIV's (Progress bars) Expand outwards instead of pushing in.
Try doing it using flexbox
.container{
width:100%;
display:flex;
flex-direction:row;
margin:5px 0;
}
.middleOne{
flex-grow:1;
height:25px;
text-align:center;
border:1px solid red;
}
.rightOne,.leftOne{
height:25px;
width:25%;
min-width:100px;
border:1px solid green;
display:flex;
}
.leftOne{
justify-content:flex-end;
}
.rightOne{
justify-content:flex-start;
}
.progress{
background-color:green;
margin:0;
padding:0;
height:25px;
}
<div class="container">
<div class="leftOne">
<div class="progress" style="width:70%;"></div>
</div>
<div class="middleOne">Content Here</div>
<div class="rightOne">
<div class="progress" style="width:40%;"></div>
</div>
</div>
<div class="container">
<div class="leftOne">
<div class="progress" style="width:50%;"></div>
</div>
<div class="middleOne">Content Here</div>
<div class="rightOne">
<div class="progress" style="width:40%;"></div>
</div>
</div>
<div class="container">
<div class="leftOne">
<div class="progress" style="width:30%;"></div>
</div>
<div class="middleOne">Content Here</div>
<div class="rightOne">
<div class="progress" style="width:80%;"></div>
</div>
</div>
<div class="container">
<div class="leftOne">
<div class="progress" style="width:100%;"></div>
</div>
<div class="middleOne">Content Here</div>
<div class="rightOne">
<div class="progress" style="width:0%;"></div>
</div>
</div>
EDIT : specific for The code OP gave in comments
I suggest you to make these changes (line numbers are the line numbers from this pastebin you gave)
Line 81 :: $positiveWidth = 0;
Line 82 :: $negativeWidth = 0;
Line 89 :: <div class='positive-bar hover-cursor' style='width:
".$positiveWidth."%;'></div>
Line 103 :: <div class='negative-bar hover-cursor' style='width:
".$negativeWidth."%;'></div>
Related
I have divs on my page. There is div .rightColumnBar and .divAttributes
HTML
<div class="mainContent">
<div class="pageContent">
<form id="createLead" class="frmDiv clear" action="/leads/create_lead.html?lead_id=3287" name="createLead" method="post">
<div class="divEditLead sldf_columnsContainer">
<div id="hot_div">
<div id="errorBlock">
<div class="leftColumnBr">
<div class="centerColumnBr">
<div class="rightColumnBr">
</div>
<div class="createLeadButtons">
<input id="saveLeadBtn" class="bigButton redButton" name="save" value="Save" type="submit">
</div>
</form>
</div>
<div class="divAttributes frmDiv">
<div id="specHeightIncreaser"></div>
</div>
CSS
.divAttributes {
border: 1px solid #d1ddd4;
min-height: 200px;
padding-top: 10px;
width: 280px;
}
.rightColumnBr {
float: left;
margin-top: 15px;
width: 377px;
}
How can I move (only for front, not insert as html element) rightColumnBr to divAttributes and set for divAttributes float property in left?
Thanks.
If you are aiming script, than you can do CSS changes and DOM manipulation this way:
$('.divAttributes').css({
'border-color': 'red'
}).after( $('.rightColumnBr') );
.divAttributes {
border: 1px solid #d1ddd4;
min-height: 100px;
padding-top: 10px;
width: 280px;
}
.rightColumnBr {
float: left;
margin-top: 15px;
width: 377px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pageContent">
<div class="rightColumnBr">
RCB
</div>
<p>
Text
</p>
<div class="divAttributes frmDiv">
ATTR
</div>
</div>
Also on JSFiddle.
Is this what you want?
<div class="pageContent">
<form id="createLead" class="frmDiv clear">
<div class="divEditLead sldf_columnsContainer">
</div>
<div class="leftColumnBr">
</div>
<div class="centerColumnBr">
</div>
<div class="createLeadButtons">
</div>
</form>
</div>
<div class="divAttributes frmDiv">
</div>
<div class="rightColumnBr">
</div>
.divAttributes {
border: 1px solid #d1ddd4;
min-height: 200px;
padding-top: 0px;
width: 200px;
float:left;
}
.rightColumnBr {
border: 1px solid #d1ddd4;
float: left;
margin-top: 0px;
width:200px;
height:200px;
}
Also please go through jsfiddle link: https://jsfiddle.net/mayurdandekar/0soLrqv0/
I am attempting to print a div that is formatted to fit on a letter sheet of paper.
In css, I have laid out this page to look like the following:
But, when I print, I get this
The div's on the right side are not printed on the right, but their outlines are there. Instead the text contained inside them is pushed to the next page.
I'm not really sure where I went wrong or what is happening.
Here is my code:
my style outside the "paperA4" div:
.paperA4 {
width: 8.5in;
height: 11in;
border: 1px solid white;
margin: auto;
padding-left: .5in;
padding-right: .5in;
padding-top: .5in;
padding-bottom: .5in;
}
Inside of my print div:
<div id="print">
<style>
.paperA4 {
width: 8.5in;
height: 11in;
border: 1px solid white;
margin: auto;
padding-left: .5in;
padding-right: .5in;
padding-top: .5in;
padding-bottom: .5in;
}
.card-shell {
width:100%;
height:2in;
border: 1px solid blue;
}
.in-card {
width:50%;
height:100%;
border: 1px solid red;
float: left;
}
</style>
<div class="paperA4">
<div class="card-shell">
<div class="in-card">
test
</div>
<div class="in-card">
test
</div>
</div>
<div class="card-shell">
<div class="in-card">
test
</div>
<div class="in-card">
test
</div>
</div>
<div class="card-shell">
<div class="in-card">
test
</div>
<div class="in-card">
test
</div>
</div>
<div class="card-shell">
<div class="in-card">
test
</div>
<div class="in-card">
test
</div>
</div>
<div class="card-shell">
<div class="in-card">
test
</div>
<div class="in-card">
test
</div>
</div>
</div>
</div>
My printing function:
function PrintElem(elem)
{
var mywindow = window.open('', 'PRINT', 'height=400,width=600');
mywindow.document.write('<html><head><title>' + document.title + '</title>');
mywindow.document.write('</head><body >');
mywindow.document.write('<h1>' + document.title + '</h1>');
mywindow.document.write(document.getElementById(elem).innerHTML);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10*/
mywindow.print();
mywindow.close();
return true;
}
you can try adding display:flex; like here:
.card-shell { width:100%; display:flex; height:2in; border: 1px solid blue; }
but keep in mind caniuse.com/#feat=flexbox
I made this topic earlier and a solution has been suggested, but for some reason it doesn't work and I hope to find some further help.
I want to make two DIVs the same height (so when one div becomes bigger in height, the other one should do the same).
This is my HTML:
<div class="aProductHeader">
<div class="omschrijving">
<h3>omschrijving</h3>
</div>
</div>
<div class="aProduct">
<div class="omschrijving">
<span class="entry inner">
Toddler bestek blauw
</span>
</div>
</div>
I would like .aProductHeader .omschrijving and .aProduct .omschrijving to keep the same height.
This is my current CSS:
.aProductHeader .omschrijving {
background: #cac;
min-height: 30px;
}
.aProduct .omschrijving {
background: #cec;
min-height: 30px;
}
And this is the solution which has been suggested to me, I put this before the :
<script>
var one = document.getElementsByClassName(".aProductHeader .omschrijving"),
two = document.getElementsByClassName(".aProduct .omschrijving");
for (i = 0; i < one.length; i++)
{
if (one[i].offsetHeight > two[i].offsetHeight)
{
two[i].style.height = one[i].offsetHeight+"px";
}else{
one[i].style.height = two[i].offsetHeight+"px";
}
}
</script>
However, the result I am still getting is this:
Any ideas on how to do this?
Is this what you are trying to do?
I tried using display:table & display: table-cell;.
CSS
#kasticketProducts{
overflow:hidden;
width:250px; /* for testing only */
display: table;
}
.aProductHeader{
display: table-cell;
background: #cac;
}
.aProduct{
background: #cec;
display: table-cell;
}
Check this blog for more info.
You can try this...
Actually header has margin so write CSS for h3 as
h3 {
margin: 0;
}
If above is working then try below structure..
<div>
<div class="aProductHeader">
<div class="omschrijving">
<h3>omschrijving</h3>
</div>
</div>
<div class="aProduct">
<div class="omschrijving">
<span class="entry inner">
Toddler bestek blauw
</span>
</div>
</div>
</div>
and add this CSS to your CSS
.aProductHeader .omschrijving {
background: #cac;
min-height: 30px;
}
.aProductHeader {
float: left;
}
.aProduct {
overflow: hidden;
}
.aProduct .omschrijving {
background: #cec;
min-height: 30px;
}
h3 {
margin: 0;
}
working example
http://jsfiddle.net/e6ba3/
.aProduct{background-color: #FFFFFF;
border-left: 1px solid #E6E6E6;
border-right: 1px solid #E6E6E6;
position: relative;} .aProductHeader{border-top: 1px solid #CA542B;
float: left;
min-height: 65px;
padding-bottom: 4px;
padding-top: 4px;
position: relative;
text-shadow: 1px 1px 1px #000000;
width: 70px;
z-index: 2;}.wrap{border-radius: 0 0 0 5px;
bottom: 0;
left: 0;
margin: 0;
padding-right: 1px;
position: absolute;
top: 0;
width: 70px;
z-index: 1;}
Wtrite your html
<div class="wrapper" style="position:realtive;border:1px solid red;">
<div class="wrap"></div>
<div calss="aProductHeader">xxxxx</div><div class="aProduct">xxx</div>
</div>
No need to write Javascript/jQuery, you can achieve this through CSS.
It will be flexible, and keep both div height same.
Here is Code:
HTML:
<div class="main">
<div class="aProductHeader">
<div class="omschrijving">
<h3>omschrijving</h3>
</div>
</div>
<div class="aProduct">
<div class="omschrijving">
<span class="entry inner">
Toddler bestek blauw
</span>
<span class="entry inner">
Toddler bestek blauw
</span>
<span class="entry inner">
Toddler bestek blauw
</span>
<span class="entry inner">
Toddler bestek blauw
</span>
<span class="entry inner">
Toddler bestek blauw
</span>
<span class="entry inner">
Toddler bestek blauw
</span>
</div>
</div>
</div>
CSS:
.main { position:relative; display:table;}
.aProductHeader .omschrijving {
background: #cac;
min-height: 30px;
float:left;
width:150px;
position:absolute; left:0; top:0; bottom:0;
}
.aProduct .omschrijving {
background: #cec;
min-height: 30px;
float:left;
width:200px;
margin-left:160px;
}
Enjoy !!!
I've got a grid of items that upon click expand to show a table below it. It works fine, but it reorders the DIV's positions as per my illustration below.
I need them to keep their respective position in their "columns".
Here's the illustration to make it clear:
And here is my HTML code:
<div
class="item-component"
ng-controller="CollapseCtrl"
ng-repeat="component in components.components | filter : components.filterByFilter | filter : searchText"
>
<div class="component-wrapper" ng-click="isCollapsed = !isCollapsed">
Item - click to expand
</div>
<div class="codes-wrapper" collapse="isCollapsed">
<table class="table table-striped table-condensed">
Expanded content here
</table>
</div>
</div>
And here is the .item-component class:
.item-component {
width: 33.33333333333333%;
float: left;
padding-left: 15px;
}
How would I achieve the "expected result" in my illustration?
Use display:inline-block instead of float:left on your .item-component
Living Demo
.item-component {
width: 33.33333333333333%;
display: inline-block;
padding-left: 15px;
}
Or, you can take a look at BootStrap and do it by using the :before element maintaning the float:left as you had it before.
You would also need to wrap each row:
.col{
float:left;
width: 32.33%;
min-height: 50px;
background: #ccc;
padding: 20px;
box-sizing: border-box;
}
.row{
display:block;
}
/* This do the trick */
.row:before{
content: " ";
display: table;
box-sizing: border-box;
clear: both;
}
Living example
Update
If you don't want the gap you will have to look for another HTML markup. You will have to print first each column with each rows.
This is the needed html markup:
<div class="col">
<div class="row" id="demo">1</div>
<div class="row">4</div>
<div class="row">7</div>
</div>
<div class="col">
<div class="row">2</div>
<div class="row">5</div>
<div class="row">8</div>
</div>
<div class="col">
<div class="row">3</div>
<div class="row">6</div>
<div class="row">9</div>
</div>
And the needed css:
.col{
float:left;
width: 32.33%;
}
.row{
display:block;
padding: 20px;
box-sizing: border-box;
background: #ccc;
min-height: 50px;
}
#demo{
height: 150px;
background: red;
}
Living demo
You can do it in the following way.
HTML:
<div class="container">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<br class="clear" />
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
<br class="clear" />
<div class="col">7</div>
<div class="col">8</div>
<div class="col">9</div>
<div>
CSS:
.col {
float: left;
width: 100px;
min-height: 100px;
background: #ccc;
padding: 20px;
margin: 10px;
cursor: pointer;
}
.col:hover {
background: yellow;
}
JS:
$('.col').click(function() {
if ($(this).is('.clicked')) {
$(this).removeClass('clicked');
} else {
$(this).addClass('clicked')
}
});
Live demo: http://jsfiddle.net/S7r3D/1/
ETA: the problem with this solution is that it moves entire row down. I don't really see how to nicely achieve what you want...You could try to overflow the other divs, but it depends on your needs. Is such solution acceptable?
ETA2: actually I made it perfect I think! Have a look here: http://jsfiddle.net/S7r3D/3/
The crucial change was rearranging divs and putting them in columns instead.
HTML:
<div class="container">
<div class="fleft">
<div class="col">1</div>
<div class="col">4</div>
<div class="col">7</div>
</div>
<div class="fleft">
<div class="col">2</div>
<div class="col">5</div>
<div class="col">8</div>
</div>
<div class="fleft">
<div class="col">3</div>
<div class="col">6</div>
<div class="col">9</div>
</div>
<div>
CSS:
.col {
clear: both;
width: 100px;
min-height: 100px;
background: #ccc;
padding: 20px;
margin: 10px;
cursor: pointer;
}
.col:hover {
background: yellow;
}
.col.clicked {
height: 300px;
background-color: red;
}
.fleft
{
float: left;
}
JS: /* same as above */
Create three container divs, and afterwards, put {1, 4, 7} into div1, {2, 5, 8} into div2, and {3, 6, 9} into div3.
Otherwise you will have it very difficult to control their positioning.
I have 2 divs. One with N number of squares and another div with 1 square. I want that all squares should be inlined. i.e., the squares of div of "section-loaded" come in 3 lines and half of 4th line, one after the other, then the square of "section-toload" should come in the same 4th line and not down below. Here is the fiddle -
http://jsfiddle.net/UPA4V/
<div class="fix_width650px">
<div class="section-loaded">
<div class = "square"></div>
<div class = "square"></div>
<div class = "square"></div>
<div class = "square"></div>
.
.
.
</div>
<div class="section-toload">
<div class = "square"></div>
</div>
</div>
CSS-
.square{
width: 150px;
height: 150px;
padding: 5px;
text-align: center;
display: inline-block;
position: relative;
}
.section-loaded{
display: inline-block;
float: left;
}
.section-toload{
display: inline-block;
float: left;
position: relative;
overflow: hidden;
}
It would work if you instead setting sections as float, set squares as float.
only css you need:
.square{
width: 150px;
height: 150px;
float:left;
}
try this.
Live demo here
HTML
<div class="fix_width650px">
<div class="section-loaded">
<div class = "square"></div>
<div class = "square"></div>
<div class = "square"></div>
<div class = "square"></div>
</div>
<div class="section-toload">
<div class = "square sqgreen"></div>
<div class = "square sqgreen"></div>
<div class = "square sqgreen"></div>
</div>
</div>
CSS
.square{
width: 150px;
height: 150px;
padding: 5px !important;
text-align: center;
display: inline-block;
position: relative;
float:left;
border:2px dotted red;
margin:5px;
}
.sqgreen{
border:4px dotted green !important;
}
.fix_width650px
{
width:650px;
}
I don't think you can do that.
As 'setion-loaded' is taking more than 1 line, that means the width of this section becomes 100% and whatever the next is goes on new line i.e. 'section-toload' goes on new line.
What you can do is have all squares in one section and apply extra class 'loaded' if they are loaded and the class 'toload' of they are to be loaded.
<div class="section">
<div class="square loaded"></div>
<div class="square loaded"></div>
<div class="square loaded"></div>
<div class="square loaded"></div>
...
...
...
<div class="square toload"></div>
</div>
CSS -
.square {
float: left;
width: 150px;
/** other styles **/
}
You can't, because the shape of the section-loaded box will always be rectangular, while you want to inject your section-toload square inside it, in an arbitrary position.
You can dot it with squares only, or if you need sections, encapsulate each square in one section, like this:
Live demo: http://jsfiddle.net/2QLmJ/
HTML
<div class="fix_width650px">
<div class="section loaded">
<div class = "square"></div>
</div>
<div class="section loaded">
<div class = "square"></div>
</div>
<div class="section loaded">
<div class = "square"></div>
</div>
<div class="section loaded">
<div class = "square"></div>
</div>
<div class="section toload">
<div class = "square"></div>
</div>
</div>
CSS
.square{
width: 150px;
height: 150px;
padding: 5px;
text-align: center;
border: 1px solid #000;
}
.toload .square{
border: 1px solid red;
}
.section{
margin: 5px;
display: inline-block;
float: left;
}
Remove float-left from both the divs and add display:table-cell and vertical-align:bottom
.section-loaded{
display: table-cell;
}
.section-toload{
display: table-cell;
position: relative;
overflow: hidden;
vertical-align:bottom
}
DEMO
if you want something like this .
.square
{
width: 150px;
height: 150px;
padding: 5px;
text-align: center;
float:left;
position: relative;
border:1px solid red;
}
.section-loaded{
display: block;
width:486px;
float: left;
}
.section-toload{
display: block;
float: left;
position:absolute;
overflow: hidden;
}
<div class="fix_width650px" style="height:326px;">
<div class="section-loaded">
<div class = "square">square1</div>
<div class = "square">square2</div>
<div class = "square">square3</div>
<div class = "square">square4</div>
</div>
</div>
<div class="section-toload" style="position :relative;">
<div class = "square">section-toload</div>
</div>