Given the codepen below: https://codepen.io/ricocode/pen/Expwbyy
.container {
border: 1px solid black;
max-width: 250px;
}
.field,
.dropdown {
border: 1px solid red;
width: 100px;
display: inline-block;
margin: 5px 2%;
}
.message {
width: 200px;
height: 150px;
border: 1px solid green;
margin: 5px 2%;
}
<div class="container">
<div class="field">
First Name
</div>
<div class="field">
Last Name
</div>
<div class="field">
Email
</div>
<div class="field">
<div class="field dropdown" onclick="myfunc">
Department
</div>
<div class="field subdrop">
Sub-dept
</div>
</div>
<div class="message">
Message
</div>
</div>
When sub-dept is not visible, the fields align nicely.
When sub-dept is toggled as a result of choosing an option for department, I want department to stay in its initial location and have sub-dept push content downward but instead, sub-dept pushes Department up and shifts Email down with it.
I want Email and Department stay in the original location but have Message shifted downwards. How to do so?
I've tried making the min-width bigger to account for this addition but I don't want to have the extra space pre-accounted for.
the solution is to modify the code snippet for .dropdown-box
.dropdown-box {
top: 0;
position: relative;
box-sizing: border-box;
vertical-align: top;
}
thank you #pete user:1790982
Related
I'm using bulma as a CSS framework, I have something that looks like the following:
<div class="columns is-gapless">
<div class="column is-four-fifths carte" id="column1">
<div class="viewer">
...
</div>
</div>
<div class="column is-flex is-fullheight" id="column2">
...
</div>
</div>
in my css I have:
div.viewer{
height: 100%;
width: 100%;
}
The issue I'm facing is that my class viewer is inherting the height of columns and not from his parent 'column1'. in the end My class viewer overlaps my second column ('column2') and it's not the expected behaviour. I want my element viewer to stay inside the column1 div.
Also same issue if I want to have the position of my viewer to be let's say 20px from the right border of my #column1 I did:
div.viewer{
...
position: absolute;
right: 20px;
}
However the viewer is 20px from the right border of my browser window and not my #column1
Not sure about Bulma but even with a barebones examples the viewer class will stay inside column1 no matter how big it is. (I added display: flex; just to align the columns horizontally and some borders for a visual)
.column-container {
display: flex;
padding: 5px;
border: 2px solid black;
}
#column1 {
border: 2px solid blue;
}
.viewer {
width: 100px;
height: 100px;
background-color: gray;
border: 2px solid red;
}
#column2 {
border: 2px solid green;
}
<div class="column-container">
<div id="column1">
<p>col 1</p>
<div class="viewer">
<p>viewer</p>
</div>
</div>
<div id="column2">
<p>col 2</p>
</div>
</div>
I finally solved this by setting the position of my #column1. My solution was:
div#column1{
position: relative;
}
I have a question about divs. I have multiple-divs in an parrent div, when I add content to the inner divs divs. The inner divs are pushed down?
I want to know why? Because all my mine margins and padding are add default 0;
Thank you for your time.
https://jsfiddle.net/3w50gj28/
<div class="boxes">
<div class="box">
<h3>MyBMW Login</h3>
<form class="" action="index.html" method="post">
<input type="text" name="email" placeholder="Emailadres">
<input type="password" name="password" placeholder="Wachtwoord">
</form>
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.boxes {
margin-top: 25px;
width: 100%;
position: relative;
text-align: center;
}
.box {
display: inline-block;
width: 300px;
max-height: 400px;
min-height: 233px;
padding: 15px;
border: 1px solid #e6e6e6;
overflow-wrap: break-word;
background-color: #fff;
margin-right: 20px;;
}
div are Block-level Element and a block-level element always starts on a new line and takes up the full width available
Margin and padding in this case aren't what is causing it. If you have divs stacked on each other, as you add content to one it will grow and push the div below down.
I have a flow chart that was originally an image which ought to be simple enough to translate into CSS, but as I have little skill in CSS div manipulation I was hoping the wizards of Stack Overflow could help.
I'm trying to replicate the above image in CSS. It doesn't have to look exactly the same, but I'd like to keep the basic layout the same.
I've taken a stab at the second and third columns just to see if I could get that part figured out, but I can't seem to get the second item in the second column to line up with the first item in the second column.
If someone could help me with just that portion, I would be eternally grateful.
.RoleContainerTop {
border: 1px black solid;
margin: auto;
text-align: center;
width: 100px;
margin: 20px;
float: left;
}
.RoleContainerMiddle {
border: 1px black solid;
margin: auto;
text-align: center;
width: 100px;
margin-top: 75px;
float: left;
}
.RoleContainerBottom {
border: 1px black solid;
margin: auto;
text-align: center;
width: 100px;
margin-top: 150px;
float: left;
}
.RoleContainer p {
text-align: center
}
<div>
<div>
<div class="RoleContainerTop">
<p>
Abracadabra
</p>
</div>
<div class="RoleContainerMiddle">
<p>
Shazam
</p>
</div>
<div class="RoleContainerBottom">
<p>
Alakazam
</p>
</div>
</div>
</div>
I would do something like this. The key is to create your columns of variable width, and from there it's pretty simple. I chose percentage width but you could do it however you like.
I would also advise you to consolidate your css a bit :). You're repeating alot of code that is shared between like elements.
CSS:
* {
box-sizing: border-box;
}
.column-25 {
width: 25%;
padding: 10px;
float: left;
}
.column-25:last-child {
float: right;
}
.block {
width: 100%;
height: 60px;
margin-bottom: 20px;
border: 1px solid #000;
}
.block.center {
margin-top: 40px;
}
HTML:
<div class="container">
<div class="column-25">
<div class="block"></div>
</div>
<div class="column-25">
<div class="block"></div>
<div class="block"></div>
</div>
<div class="column-25">
<div class="block center"></div>
</div>
<div class="column-25">
<div class="block"></div>
<div class="block"></div>
</div>
</div>
From here, you could look into absolute positioned elements with some :before/:after wizardry to create the arrows if you'd like.
jsfiddle demo
i have a legend for a graph that sometimes is scrollable and sometimes isn't.
Unfortunately when the scrollbar shows up, it pushes all of the elements over to the left a bit. So they don't line up with a total (outside the scrollable area)
Example: http://jsfiddle.net/3sKVR/
A simple answer would be to just set a fixed width, but unfortunately, it has to be responsive.
Also, i can't use custom scrollbars to maintain consistency with the rest of the site and also bring down page-load times.
Any help would be greatly appreciated (with internet points!)
Cut down version of code:
HTML:
<div id="legend_cont">
<div id="legend_list">
<div id="legend">
<div class="legend_row">
<div class="legend_cell">
<div class="legend_colour" style="background-color:#ffb100"></div>
</div>
<div class="legend_cell">Merch G</div>
<div class="legend_cell legend_value">$1423.24</div>
</div>
<div class="legend_row">
<div class="legend_cell">
<div class="legend_colour" style="background-color:#ed5929"></div>
</div>
<div class="legend_cell">Merch L</div>
<div class="legend_cell legend_value">$1351.07</div>
</div>
<div class="legend_row">
<div class="legend_cell">
<div class="legend_colour" style="background-color:#3f9c35"></div>
</div>
<div class="legend_cell">Merch N</div>
<div class="legend_cell legend_value">$1194.90</div>
</div>
<div class="legend_row">
<div class="legend_cell">
<div class="legend_colour" style="background-color:#009bbb"></div>
</div>
<div class="legend_cell">Merch T</div>
<div class="legend_cell legend_value">$1188.14</div>
</div>
</div>
</div>
<div id="legend_total">Total:<span id="legend_total_value">$0.00</span>
</div>
</div>
CSS:
#legend_cont {
height: 100%;
border-left: 2px solid #ADADAD;
width: 40%;
float: right;
}
#legend_list {
height: 169px;
overflow: auto;
margin: 20px 4% 20px 7%;
}
#legend {
display: table;
width: 90%;
}
.legend_row {
display: table-row;
}
.legend_cell {
display: table-cell;
padding: 5px;
vertical-align: middle;
}
.legend_colour {
width: 10px;
height: 20px;
background-color: #c1c1c1;
border-radius: 3px;
}
.legend_value {
text-align: right;
}
#legend_total {
height: 50px;
line-height: 50px;
width: 88%;
border-top: 1px solid;
margin-left: 8%;
}
#legend_total_value {
float: right;
padding-right: 5px;
}
1) Make sure there is always a scroll bar
CSS
#legend_cont {
overflow-y: scroll;
}
2) Use js to grab the variable width of the scrollbar (example here)
3) Set the padding-right in #legend_total_value equal to that variable in jquery.
JS
$('#legend_total_value').css('padding-right', wScroll);
Try applying padding-right to compensate for the size of scrollbar when it's not there and position the total accordingly.
#legend_list {
height: 169px;
overflow: auto;
margin: 20px 4% 20px 7%;
padding-right:15px;
}
Demo
I have an issue with floating divs. I have a container st to fixed width, and I have child elements inside that which are all div elements. What I want is that, I need two elements to be shown in a row. The code that I wrote is as follows.
CSS
#container
{
width: 400px;
}
.item1
{
width: 180px;
height: 200px;
border: 1px solid red;
float: left;
margin: 10px 0 0 10px;
}
.item2
{
width: 180px;
height: 250px;
border: 1px solid red;
float: left;
margin: 10px 0 0 10px;
}
HTML
<div id="container">
<div class="item1">1</div>
<div class="item1">2</div>
<div class="item1">3</div>
<div class="item1">4</div>
<div class="item1">5</div>
<div class="item1">6</div>
<div class="item1">7</div>
<div class="item1">8</div>
<div class="item1">9</div>
</div>
This can be viewed at Demo1
But what I want is like this result. The only thing is that the height of the individual items can be different.
Hope I have made everything clear.
Thanks in advance
Additional clarification
The content elements will be generated dynamically in server and will be passed to the client.
Also the order should be like 1,2,3,4,...
The only thing is that in a row there should be two items and the first one should be aligned to the left side of the container.
You can't accomplish that with CSS only, but there is a jQuery plugin to do the trick. It's called jQuery Masonry, give it a try
You need a second wrapper:
<div id="container">
<div class="wrapper"><div class="item1">1</div></div>
<div class="wrapper"><div class="item1">2</div></div>
...
</div>
Float the wrapper and give it a fixed size. The items inside can have their own height.
I prefer using lists for this type of thing. Better HTML semantics.
<div class="container">
<ul>
<li><div class="item1">1</div></li>
<li><div class="item2">2</div></li>
</ul>
</div>
style:
.container ul {
width:400px;
}
.container li {
float:left;
height:200px;
width:180px;
}
If you want each pair of items to be in a row, and you have control over the dynamic generation of the content, see my edits to your fiddle here
To summarize:
Markup -
<div id="container">
<div class="itemrow">
<div class="item1">1</div>
<div class="item1">2</div>
</div>
<div class="itemrow">
<div class="item2">3</div>
<div class="item1">4</div>
</div>
<div class="itemrow">
<div class="item2">5</div>
<div class="item1">6</div>
</div>
<div class="itemrow">
<div class="item1">7</div>
<div class="item2">8</div>
</div>
<div class="itemrow">
<div class="item1">9</div>
</div>
</div>
CSS -
#container
{
width: 400px;
}
.itemrow
{
float: left;
clear: both;
}
.item1
{
width: 180px;
height: 200px;
border: 1px solid red;
float: left;
margin: 10px 0 0 10px;
}
.item2
{
width: 190px;
height: 250px;
border: 1px solid red;
float: left;
margin: 10px 0 0 10px;
}
Edit: Just read your above comment about having to edit the server side logic for rendering. Obviously this will only work if you can control that.
you're specifying item2 to be 10 pixels wider than item1 so I'm not clear on what you're trying to do....