Let's assume the following situation:
Code for this situation:
<html>
<head>
<style>
.box {
border-style: solid;
border-width: 1px;
width: 700px;
height: 300px;
padding: 3px;
}
.element {
border-style: solid;
border-width: 0px;
width: 25%;
height: 20px;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="element">element 1</div>
<div class="element">element 2</div>
<div class="element">element 3</div>
<div class="element">element 4</div>
<div class="element">element 5</div>
<div class="element">element 6</div>
<div class="element">element 7</div>
<div class="element">element 8</div>
<div class="element">element 9</div>
<div class="element">element 10</div>
</div>
</body>
</html>
width set to 50% - 2 columns
width set to 33% - 3 columns
and the question is: how to count number of columns using Selenium except reading width value :)
Page is written in RWD and number of columns will depend on width of page for given device
Related
I am building a Gantt chart using CSS. I calculate the 'offset' of a task from the first date in the header, and the width of the task based on the duration as a percentage of the total range between the dates in the header - see example. This largely works fine except for when there are too many months in the header, and so the overflow starts to scroll, because the percentage of the offset & width are applied to the container width excluding the scrollable portion. How can I fix this so the these values are applied to the actual scrollable width of the container? (Hopefully without using any JS)
In the example, the task should start at 50% (i.e. start of month 7) and run for 25% (i.e. to end of month 9). You can check this by removing the min-width:300px;
(Note that the red background will ultimately be transparent)
.container {
overflow-x: auto;
width:100%;
background-color:#eee;
}
.container .months {
display:flex;
flex-direction:row;
}
.container .months .month {
min-width:300px;
padding:5px 10px;
border:solid 1px black;
flex: 1 0 0%;
}
.container .bars .bar {
display:flex;
flex-direction:row;
}
.container .bars .bar .spacer {
background-color:red;
}
.container .bars .bar .task {
background-color:yellow;
}
<div class="container">
<div class="months">
<div class="month">Month 1</div>
<div class="month">Month 2</div>
<div class="month">Month 3</div>
<div class="month">Month 4</div>
<div class="month">Month 5</div>
<div class="month">Month 6</div>
<div class="month">Month 7</div>
<div class="month">Month 8</div>
<div class="month">Month 9</div>
<div class="month">Month 10</div>
<div class="month">Month 11</div>
<div class="month">Month 12</div>
</div>
<div class="bars">
<div class="bar">
<span class="spacer" style="width:50%"></span>
<span class="task" style="width:25%">Task 1</span>
</div>
</div>
</div>
display: grid on the container will fix the issue. The bars will be inside a track that has the same size as the months element
.container {
overflow-x: auto;
display: grid;
background-color:#eee;
}
.container .months {
display:flex;
flex-direction:row;
}
.container .months .month {
min-width:300px;
padding:5px 10px;
border:solid 1px black;
flex: 1 0 0%;
}
.container .bars .bar {
display:flex;
flex-direction:row;
}
.container .bars .bar .spacer {
background-color:red;
}
.container .bars .bar .task {
background-color:yellow;
}
<div class="container">
<div class="months">
<div class="month">Month 1</div>
<div class="month">Month 2</div>
<div class="month">Month 3</div>
<div class="month">Month 4</div>
<div class="month">Month 5</div>
<div class="month">Month 6</div>
<div class="month">Month 7</div>
<div class="month">Month 8</div>
<div class="month">Month 9</div>
<div class="month">Month 10</div>
<div class="month">Month 11</div>
<div class="month">Month 12</div>
</div>
<div class="bars">
<div class="bar">
<span class="spacer" style="width:50%"></span>
<span class="task" style="width:25%">Task 1</span>
</div>
</div>
</div>
Okay, I want to position overlapping elements based on the order they appear in a list. So the first will not be translated, the second will be translated 60px, the third 120px, etc... This is just a simplified version of what I achieve. Also, in the example there are three elements, in real life I won't know how many elements there will be. This is variable.
Below is a simple snippet that can achieve what I want, but you can easily see the problem with this: way to many lines of css... So the question is, how to position something based on its order? I assume that I should do something with :nth-child(n)? But how can I use the order of the element (n) to calculate its position?
.wizard :nth-child(1) {
position: absolute;
width: 400px;
border-style: solid;
transform: translateX(calc(0 * 60px));
}
.wizard :nth-child(2) {
position: absolute;
width: 400px;
border-style: solid;
transform: translateX(calc(1 * 60px));
}
.wizard :nth-child(3) {
position: absolute;
width: 400px;
border-style: solid;
transform: translateX(calc(2 * 60px));
}
<div class="wizard">
<div class="step" style="background-color: red;">Step 1</div>
<div class="step" style="background-color: yellow;">Step 2</div>
<div class="step" style="background-color: green;">Step 3</div>
</div>
UPDATE:
This is what I really want (in the end), where the different steps are sliding in from right to left...
Don't use position:absolute and consider negative margin to create the overlap
.wizard {
display:flex;
margin:5px;
}
.wizard > div {
width:400px;
flex-shrink:0;
border-style: solid;
}
.wizard > div:not(:first-child) {
margin-left:-340px;
}
<div class="wizard">
<div class="step" style="background-color: red;">Step 1</div>
</div>
<div class="wizard">
<div class="step" style="background-color: red;">Step 1</div>
<div class="step" style="background-color: yellow;">Step 2</div>
</div>
<div class="wizard">
<div class="step" style="background-color: red;">Step 1</div>
<div class="step" style="background-color: yellow;">Step 2</div>
<div class="step" style="background-color: green;">Step 3</div>
</div>
<div class="wizard">
<div class="step" style="background-color: red;">Step 1</div>
<div class="step" style="background-color: yellow;">Step 2</div>
<div class="step" style="background-color: green;">Step 3</div>
<div class="step" style="background-color: purple;">Step 4</div>
</div>
<div class="wizard">
<div class="step" style="background-color: red;">Step 1</div>
<div class="step" style="background-color: yellow;">Step 2</div>
<div class="step" style="background-color: green;">Step 3</div>
<div class="step" style="background-color: purple;">Step 4</div>
<div class="step" style="background-color: lightblue;">Step 5</div>
</div>
Is JavaScript okay?
let wizard = document.querySelector(".wizard");
wizard_children = wizard.childNodes;
wizard_children.forEach(myFunction);
function myFunction(child, index) {
child.style.transform = "translateX((index*60)+'px')"
}
if you know in advance the number of .step that you have, then you can easily achieve this in scss using a for-loop:
$stepNumber: 3;
#for $i from 1 through $stepNumber {
.step:nth-of-type(#{$i}) {
transform: translateX(calc(#{$i - 1} * 60px));
}
}
Here is the jsfiddle.
If you don't know the amount of .step, then you will need to add some JavaScript to it.
I'm trying to implement layout where on desktop screen size we have 2 columns, and one column on mobile/tablets
is it possible to make this code:
<div class="posts-2-col">
<div class="post">Post 1</div>
<div class="post">Post 2</div>
<div class="post">Post 3</div>
<div class="post">Post 4</div>
<div class="post">Post 5</div>
<div class="post">Post 6</div>
</div>
to render like this:
(knowing that height of each post can e different)
I just put the fixed height to image a higher post
Jsfiddle
*{
box-sizing: border-box;
}
.posts-2-col{
width: 300px;
margin: 0 -10px;
}
.posts-2-col .post{
border: 1px solid red;
width: 135px;
margin: 0 5px;
margin-bottom: 10px;
float: left;
}
<div class="posts-2-col">
<div class="post">Post 1</div>
<div class="post">Post 2</div>
<div class="post" style="height: 50px">Post 3</div>
<div class="post">Post 4</div>
<div class="post">Post 5</div>
<div class="post">Post 6</div>
<div class="post">Post 7</div>
</div>
I want to achieve a grid like the shown below:
I have been looking to Twitter Bootstrap grid system, but since it is oriented to rows, I can't see how to achieve this.
Is there any way of doing it, or should I stick to manually css?
You can nest Rows and cols:
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-md-12">left top</div>
<div class="col-md-12">left bottom</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-12">right top</div>
<div class="col-md-12">right bottom</div>
</div>
</div>
</div>
See http://getbootstrap.com/css/#grid under "Nesting Columns"
You can still use Bootstrap grid with some custom styles:
.block {
border: 3px #222 solid;
padding: 10px;
margin-bottom: 10px;
}
.block-1 {
height: 100px;
}
.block-2 {
height: 50px;
}
.block-3 {
height: 50px;
}
.block-4 {
height: 100px;
}
<link data-require="bootstrap-css#*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<div class="container">
<div class="row">
<div class="col-xs-8">
<div class="block block-1">Block 1</div>
<div class="block block-2">Block 2</div>
</div>
<div class="col-xs-4">
<div class="block block-3">Block 3</div>
<div class="block block-4">Block 4</div>
</div>
</div>
</div>
Just set 2 parents width col-xs-* with children
main{padding: 20px}
section, article{display: inline}
article, div{border: 4px solid black; margin-bottom: 10px}
article:nth-child(1){height: 80px}
article:nth-child(2){height: 40px}
div:nth-child(1){height: 30px}
div:nth-child(2){height: 90px}
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<main class=row>
<section class="col-xs-8">
<article></article>
<article></article>
</section>
<aside class="col-xs-4">
<div></div>
<div></div>
</aside>
</main>
Read more about Grid system .
Hello I am trying to create a row layout of divs.
Unknown known number of divs per row. Could be 1 could be 25.
I used a table layout display: table; because it seems to be the only way to get equal sizes for all 'div's on the row, without knowing their sizes and with no wrapping of divs when the page shrinks.
How would I do this same thing but have the divs height also be dynamic.
I am trying to avoid the old layout technique of using tables and using tables in tables to fix something like this.
Here is an example in jdFiddle. As you can see Row 2 Column 1 has extra lines but every cell on that row has grown to match it.
http://jsfiddle.net/djlerman/G9dgQ/2/
CSS:
#row {
display: table;
table-layout: fixed;
width: 95%;
margin: 0 auto;
}
#row div {
display: table-cell;
}
.column {
border: 1px solid;
-moz-border-radius: 15px;
border-radius: 15px;
border-color: grey;
box-shadow: grey 1em 1em 1em
-webkit-gradient: grey 1em 1em 1em
-moz-linear-gradient: grey 1em 1em 1em
margin: 0 auto;
padding: 5px;
text-align: center;
}
HTML:
<div id="row">
<div class="column">
Column 1
</div>
<div class="column">
Column 2
</div>
</div>
<div id="row">
<div class="column">
Column 1
<br />Line 1<br />Line 2<br />Line 3<br />Line 4<br />Line 5<br />Line 6<br />Line 7<br />
</div>
<div class="column">
Column 2
</div>
<div class="column">
Column 3
</div>
<div class="column">
Column 4
</div>
<div class="column">
Column 5
</div>
<div class="column">
Column 6
</div>
<div class="column">
Column 7
</div>
<div class="column">
Column 8
</div>
</div>
<div id="row">
<div class="column">
Column 1
</div>
<div class="column">
Column 2
</div>
<div class="column">
Column 3
</div>
</div>
Thanks,
~Donavon
+-------------------------------------------------------------------+
Tried to give an answer to what I figured but it wont let me post and answer. So here it is...
Jeeze. This 'div' stuff is crazy complicated. :-(
Here is what I came up with. Thanks to the responses I got and LOTS of googleing.
Hope it can help others:
http://jsfiddle.net/djlerman/G9dgQ/5/
CSS:
.row {
display: table;
table-layout: fixed;
width: 95%;
margin: 0 auto;
}
.row div {
display: table-cell;
}
.column {
border: 0px;
margin: 0 auto;
padding: 0px;
text-align: center;
overflow: auto;
vertical-align: top;
}
.border {
padding: 5px;
border: 1px solid;
-moz-border-radius: 15px;
border-radius: 15px;
border-color: grey;
border-color: grey;
box-shadow: grey .25em .25em .25em;
-webkit-gradient: grey .25em .25em .25em;
-moz-linear-gradient: grey .25em .25em .25em;
vertical-align: top;
text-align: center;
overflow: auto;
margin: 0 auto;
width: 1000px;
max-width: 1000px;
}
.columnSpace {
width: 10px;
}
.rowSpace {
height: 10px;
}
HTML:
<div class="row">
<div class="column">
<div class="border">Column 1</div>
</div>
<div class="columnSpace"></div>
<div class="column">
<div class="border">Column 2</div>
</div>
</div>
<div class="rowSpace"></div>
<div class="row">
<div class="column">
<div class="border">Column 1
<br />Line 1
<br />Line 2
<br />Line 3
<br />Line 4
<br />Line 5
<br />Line 6
<br />Line 7
<br />
</div>
</div>
<div class="columnSpace"></div>
<div class="column">
<div class="border">Column 2</div>
</div>
<div class="columnSpace"></div>
<div class="column">
<div class="border">Column 3</div>
</div>
<div class="columnSpace"></div>
<div class="column">
<div class="border">Column 4</div>
</div>
<div class="columnSpace"></div>
<div class="column">
<div class="border">Column 5</div>
</div>
<div class="columnSpace"></div>
<div class="column">
<div class="border">Column 6</div>
</div>
<div class="columnSpace"></div>
<div class="column">
<div class="border">Column 7</div>
</div>
<div class="columnSpace"></div>
<div class="column">
<div class="border">Column 8</div>
</div>
</div>
<div class="rowSpace"></div>
<div class="row">
<div class="column">
<div class="border">Column 1</div>
</div>
<div class="columnSpace"></div>
<div class="column">
<div class="border">Column 2
<br />Line 1
<br />Line 2
<br />Line 3</div>
</div>
<div class="columnSpace"></div>
<div class="column">
<div class="border">Column 3</div>
</div>
</div>
It seems SO will let me post an answer to this now, so I am putting the answer in the answer section.
Jeeze. This 'div' stuff is crazy complicated. :-(
Here is what I came up with. Thanks to the responses I got and LOTS of googleing.
Hope it can help others:
http://jsfiddle.net/djlerman/G9dgQ/5/
CSS:
.row {
display: table;
table-layout: fixed;
width: 95%;
margin: 0 auto;
}
.row div {
display: table-cell;
}
.column {
border: 0px;
margin: 0 auto;
padding: 0px;
text-align: center;
overflow: auto;
vertical-align: top;
}
.border {
padding: 5px;
border: 1px solid;
-moz-border-radius: 15px;
border-radius: 15px;
border-color: grey;
border-color: grey;
box-shadow: grey .25em .25em .25em;
-webkit-gradient: grey .25em .25em .25em;
-moz-linear-gradient: grey .25em .25em .25em;
vertical-align: top;
text-align: center;
overflow: auto;
margin: 0 auto;
width: 1000px;
max-width: 1000px;
}
.columnSpace {
width: 10px;
}
.rowSpace {
height: 10px;
}
HTML:
<div class="row">
<div class="column">
<div class="border">Column 1</div>
</div>
<div class="columnSpace"></div>
<div class="column">
<div class="border">Column 2</div>
</div>
</div>
<div class="rowSpace"></div>
<div class="row">
<div class="column">
<div class="border">Column 1
<br />Line 1
<br />Line 2
<br />Line 3
<br />Line 4
<br />Line 5
<br />Line 6
<br />Line 7
<br />
</div>
</div>
<div class="columnSpace"></div>
<div class="column">
<div class="border">Column 2</div>
</div>
<div class="columnSpace"></div>
<div class="column">
<div class="border">Column 3</div>
</div>
<div class="columnSpace"></div>
<div class="column">
<div class="border">Column 4</div>
</div>
<div class="columnSpace"></div>
<div class="column">
<div class="border">Column 5</div>
</div>
<div class="columnSpace"></div>
<div class="column">
<div class="border">Column 6</div>
</div>
<div class="columnSpace"></div>
<div class="column">
<div class="border">Column 7</div>
</div>
<div class="columnSpace"></div>
<div class="column">
<div class="border">Column 8</div>
</div>
</div>
<div class="rowSpace"></div>
<div class="row">
<div class="column">
<div class="border">Column 1</div>
</div>
<div class="columnSpace"></div>
<div class="column">
<div class="border">Column 2
<br />Line 1
<br />Line 2
<br />Line 3</div>
</div>
<div class="columnSpace"></div>
<div class="column">
<div class="border">Column 3</div>
</div>
</div>
Updated Fiddle
Here are the relevant changes to your CSS:
#row {
display: block;
table-layout: fixed;
width: 95%;
margin: 0 auto;
white-space: nowrap;
}
#row div {
display: inline-block;
vertical-align: top;
}
What this does
The table-cell display is going to (surprise) make the div behave like a td. Really, what you want is an inline-block. I've updated the CSS to reflect this, and changed the #row container to a simple block display. Then, I set the vertical alignment of the child divs to the top, which is necessary because (by default) the browser wants to align inline content to the baseline (the text bottom) of the container.
Adding the white-space: nowrap; prevents the divs from breaking when they expand beyond their container, which should solve that issue as well.
This should address your problem adequately.
UPDATE 2
Here's a flexbox approach;
This will preserve the expansion of the row to fill available space like you were talking about in the comments.