I have it where the blue element row overlaps. But for some reason, the bottom div text foo is being pushed still be the flow. Why is this? I expect foo to be on the left and not effected by the flow because of z-index.
.goal-container {
width: 900px;
}
.progress-column {
display: inline-block;
float: left;
margin-top: 10px;
}
.goal-upper-well {
display: inline-block;
float: left;
background-color: #purple-blue;
width: 500px;
position: relative;
z-index: 2;
}
.goal-lower-well {
height: 300px;
width: 700px;
margin-top: -42px;
position: relative;
z-index: 0;
}
.goal-upper {
height: 43px;
position: relative;
z-index: 2;
}
<div class="goal-container">
<div class="goal-upper">
<div class="well well-sm goal-upper-well">
<button type="button" class="btn-small expand-button"
ng-click="isNavCollapsed = !isNavCollapsed"
aria-label="Left Align">
<span class="glyphicon glyphicon-plus"></span>
</button>
Goal: {{goal.desc}}
</div>
<div class="progress-column">
BARRRRRRRRRRR
</div>
</div>
<div class="goal-lower-well">
<div class="well well-lg goal-lower-well">foo</div>
</div>
</div>
This is because you have a negative top margin on your foo text. Just remove it and the foo text will go to the next line on the left.
.goal-lower-well {
height: 300px;
width: 700px;
/* margin-top: -42px; */ Remove it
position: relative;
z-index: 0;
}
You ned to clear the next 2 divs from floating
.goal-container {
width: 900px;
}
.progress-column {
display: inline-block;
clear: left;
float: left;
margin-top: 10px;
}
.goal-upper-well {
display: inline-block;
float: left;
background-color: #purple-blue;
width: 500px;
position: relative;
z-index: 2;
}
.goal-lower-well {
clear: left;
height: 300px;
width: 700px;
margin-top: -42px;
position: relative;
z-index: 0;
}
.goal-upper {
height: 43px;
position: relative;
z-index: 2;
}
<div class="goal-container">
<div class="goal-upper">
<div class="well well-sm goal-upper-well">
<button type="button" class="btn-small expand-button"
ng-click="isNavCollapsed = !isNavCollapsed"
aria-label="Left Align">
<span class="glyphicon glyphicon-plus"></span>
</button>
Goal: {{goal.desc}}
</div>
<div class="progress-column">
BARRRRRRRRRRR
</div>
</div>
<div class="goal-lower-well">
<div class="well well-lg goal-lower-well">foo</div>
</div>
</div>
Related
I'm trying to align several div containers with several other divs, but am having a problem.
I can't get the red (checkbox-container) divs to align next to the grey (button-container) divs.
Here's what it looks like now (I think the button being cut off at the bottom is just an issue with setting the developer options to view as mobile when I took a screenshot, because it looks alright in codepen).
And this is how I'm trying to make it look.
Could anyone help me out? I was thinking that I could have each checkbox as a child element of the button container, and then position it relative to that. The problem with that method is I want to ensure that when the screen is resized, the red checkbox-container divs don't overlap with anything in the green character-container div. So I figured having a separate div would be the best way to keep everything where it needs to be when the screen is resized, unless I'm mistaken?
Here's a codepen with the full code:
https://codepen.io/TheNomadicAspie/pen/NWjKwxE
And here's the relevant css:
.bottom-container {
position: absolute;
height: 31.8%;
width: 100vw;
background-color: green;
bottom: 0%;
}
.checkbox-grid {
float: right;
background-color: blue;
width: 7.45vh;
height: 100%;
}
.checkbox-container {
background-color: red;
width: 88%;
height: 22.5%;
top: -0.5vh;
margin-top: 0.5vh;
}
.buttons-grid {
float: right;
background-color: pink;
width: 38.2%;
right: 0%;
}
.button-container {
background-color: purple;
width: 88%;
height: 90%;
right: 0%;
margin-top: 0.5vh;
}
.buttons-grid button {
position: relative;
display: block;
background: grey;
height: 7.45vh;
width: 100%;
top: -0.5vh;
right: 0;
text-align: center;
}
And the HTML:
<div id="menu_bar" , class="menu-bar">
<div id="logo", class="logo">
</div>
<div id="title", class="title">Title</div>
<div id="menu", class="menu">
</div>
</div>
<div id="display" , class="display">
<div id="speech_bubble" , class="speech-bubble">
<div id="email_container" class="email-container">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
<button id="submit_email_btn" class="buttons">Submit</button>
</div>
<div id="question_text" class="question-text">Question</div>
</div>
</div>
</div>
<div id="bottom_container" , class="bottom-container">
<div id="buttons_grid" , class="buttons-grid">
<div id="button_1_container" , class="button-container">
<button>Button 1</button>
</div>
<div id="button_2_container" , class="button-container">
<button>Button 2</button>
</div>
<div id="button_3_container" , class="button-container">
<button>Button 3</button>
</div>
<div id="button_4_container" , class="button-container">
<button>Button 4</button>
</div>
</div>
<div id="checkbox_grid" , class="checkbox-grid">
<div id="checkbox_1_container" , class="checkbox-container">
</div>
<div id="checkbox_2_container" , class="checkbox-container">
</div>
<div id="checkbox_3_container" , class="checkbox-container">
</div>
<div id="checkbox_4_container" , class="checkbox-container">
</div>
</div>
<div id="character_container" , class="character-container"></div>
</div>
</div>
I was able to get it working. I aligned checkbox-grid to the top of bottom-container, then added a margin-bottom to each checkbox-container until the spacing was correct, and added a margin-right to checkbox-grid to add spacing. Looks perfect now.
.bottom-container {
position: absolute;
height: 31.8%;
width: 100vw;
background-color: green;
bottom: 0%;
}
.checkbox-grid {
display: absolute;
float: right;
background-color: blue;
width: 7.45vh;
height: 100%;
margin-right: 1vh;
}
.checkbox-container {
background-color: red;
width: 100%;
height: 22.5%;
margin-bottom: 0.8vh;
}
.buttons-grid {
float: right;
background-color: pink;
width: 38.2%;
right: 0%;
}
.button-container {
background-color: purple;
width: 88%;
height: 90%;
right: 0%;
margin-top: 0.5vh;
}
.buttons-grid button {
position: relative;
display: block;
background: grey;
height: 7.45vh;
width: 100%;
top: -0.5vh;
right: 0;
text-align: center;
}
Hi i am using this code.....
But when i add new div .myContainer after it is comes up. If i use clear both it not working.
#container {
width: 100px;
height: 100px;
position: relative;
}
#navi,
#infoi {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#infoi {
z-index: 10;
}
<div id="container">
<div id="navi">a</div>
<div id="infoi">
<img src="https://appharbor.com/assets/images/stackoverflow-logo.png" height="20" width="32" />b
</div>
</div>
<div class="myContainer">
ABCDEFGHICJLMNOP
</div>
I have broken my head on the following css.
JSFiddle:
<div id='new_task_wrap'>
<div class='box'>
<div class='first_row'>
<div class='description' contenteditable='true'>
</div>
<div class='calendar dropdown'>
<i class="fa fa-calendar" aria-hidden="true"></i>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
My dropdown menu is hidden behind the divs of contenteditable elment. Any ideas how to fix it?
Important: The div heights should not be changed to show the dropdown menu.
Remove overflow: auto on .first-row
$(document).on('click', '.dropdown', function() {
$(this).find('.dropdown-content').toggle();
});
#new_task_wrap {
position: relative;
display: flex;
}
#new_task_wrap > .box {
width: 100%;
border-style: solid;
border-color: #98afc8;
}
#new_task_wrap > .box > .first_row {
display: flex;
width: 100%;
/*overflow-y: auto;*/
}
#new_task_wrap > .box > .first_row > .description {
background-color: white;
display: inline-block;
font-weight: 400;
padding: 9px 9px 9px 9px;
cursor: text;
outline: 0;
flex-grow: 1;
overflow-y: auto;
}
#new_task_wrap > .box > .first_row > .calendar {
padding-top: 8px;
cursor: pointer;
}
.right-add-on {
position: relative;
}
.right-add-on >:not([contenteditable=true]) {
position: absolute;
right: 0;
color: #67829e;
cursor: pointer;
}
.dropdown {
position: relative;
vertical-align: middle;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
min-width: 160px;
background-color: yellow;
padding: 12px 16px;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='new_task_wrap'>
<div class='box'>
<div class='first_row'>
<div class='description' contenteditable='true'>
</div>
<div class='calendar dropdown'>
<i class="fa fa-calendar" aria-hidden="true"></i>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
Updated jsFiddle
Just change overflow-y to visible
Refer this
The overflow-y property specifies what to do with the top/bottom edge of the content - if it overflows the element's content area.
#new_task_wrap > .box > .first_row {
display: flex;
overflow-y: visible; //Here is the change
width: 100%;
}
use position: absolute for .dropdown and position it accordingly
here is the updated Fiddle http://jsfiddle.net/z0kfdahu/2/
Having some trouble getting the desired effect on an image overlay with responsive image. What I want is upon hovering over the image, the colour block and text to appear as shown, but for the text to be in the vertical centre of the div. I have tried vertical-middle but it doesn't seem to be working. Can't make the width and height set value as need to collapse and expand. If anyone can help i'd appreciate it. Thanks
Code, CSS below
.overlay-box {
position: relative;
}
.overlay {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(38,150,198,0.5);
}
.overlay p {
color: #ffffff;
text-align: center;
}
.overlay-box:hover .overlay {
display: block;
}
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-3" style="margin-bottom: 20px;">
<div class="overlay-box">
<a href="#" target="_blank">
<div class="overlay">
<p>1st line<br>2nd line<br><br>
3rd line</p>
</div>
<img src="http://placehold.it/2000x2000" class="img-responsive "/></a>
</div>
</div>
</div>
img{
max-width: 100%;
height: auto;
}
.overlay-box {
position: relative;
}
.overlay {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(38,150,198,0.5);
}
.overlay:before {
content: '';
display: inline-block;
width: 1px;
height: 100%;
vertical-align: middle;
border: 1px solid;
}
.overlay p {
color: #ffffff;
text-align: center;
display: inline-block;
vertical-align: middle;
width: 90%;
}
.overlay-box:hover .overlay {
display: block;
}
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-3" style="margin-bottom: 20px;">
<div class="overlay-box">
<a href="#" target="_blank">
<div class="overlay">
<p>1st line<br>2nd line<br><br>
3rd line</p>
</div>
<img src="http://placehold.it/2000x2000" class="img-responsive "/></a>
</div>
</div>
</div>
You need to wrap the overlay with another div(since tables seem to ignore their height and width when they're absolute) and add position:absolute to it. Then add dislpay:table and dislpay:table-cell; vertical-align:middle for the child divs.
Check out this fiddle: https://jsfiddle.net/65cvzcev/
I have a wrapper with absolute positioing and a bunch of divs inside it:
<div class="wrapper">
<div class="f inactive" style="width:12.5%"></div>
<div class="f" style="width:9.722222222222223%"></div>
<div class="f" style="width:9.722222222222223%"></div>
<div class="f" style="width:9.722222222222223%"></div>
<div class="f" style="width:9.722222222222223%"></div>
<div class="f" style="width:9.722222222222227%"></div>
<div class="f" style="width:9.722222222222227%"></div>
<div class="f" style="width:9.722222222222227%"></div>
</div>
.wrapper {
position: absolute;
width: 100%;
top: 0px;
background-color: #000;
padding:0;
margin:0;
}
i {
background-color: #83b209;
width: 100%;
}
div.f {
font-size: 0;
height: 12px;
position: relative;
display: inline-block;
background-color: #83b209;
}
div.f.inactive {
background: red;
opacity: 1;
}
The jsfiddle is here. As you can see, for some reason the wrapper is bigger than the inner divs when I want it to be same height as inner divs. You shouldn't be able to see the black bacground...
You can set line-height to 0 in your wrapper to solve this.
.wrapper {
line-height: 0;
}
Put height: 12px; on your .wrapper and put height: 100%; on your div.f
I've updated your Fiddle by setting a height on the wrapper and matching that in your divs.
Does that achieve what you wanted?
<div class="wrapper">
<div class="f inactive" style="width: 12.5%"></div>
<div class="f" style="width: 9.722222222222223%"></div>
<div class="f" style="width: 9.722222222222223%"></div>
<div class="f" style="width: 9.722222222222223%"></div>
<div class="f" style="width: 9.722222222222223%"></div>
<div class="f" style="width: 9.722222222222227%"></div>
<div class="f" style="width: 9.722222222222227%"></div>
<div class="f" style="width: 9.722222222222227%"></div>
</div>
.wrapper {
position: absolute;
width: 100%;
top: 0px;
background-color: #000;
padding:0;
margin:0;
height:15px;
}
i {
background-color: #83b209;
width: 100%;
}
div.f {
font-size: 0;
height: 15px;
position: relative;
display: inline-block;
background-color: #83b209;
}
div.f.inactive {
background: red;
opacity: 1;
}
I will just write this little answer.
display: inline-block; is causing this problem. You may want to go read up about what it does but you look like you have tried to solve it by keeping the <i></i> together and using font-size: 0;. Clearly not working for you tho.
So solution one, is to put font-size: 0; on the wrapper as you have it to low to affect the output.
CSS:
.rangeslider-wrapper {
position: absolute;
width: 100%;
top: 0px;
background-color: #000;
font-size: 0;
}
Demo here
Another solution is to use float: left; and not bother with display: inline-block;.
CSS:
.rangeslider .rangeslider-bg i {
font-size: 0;
height: 12px;
position: relative;
float: left;
}
Demo Here