I have a modal where I have dropdowns in the element.
The problem is since I have an overflow set, the dropdown, although it appears, does not appear on top of the modal. I understand since it's because I set an overflow:auto on the parent.
Is there any way via CSS that I can ignore the parent and show the dropdown above the "modal"?
You'll see in the example, the content in the red line is visible if you scroll. Which is the expected behaviour based on my code at the moment. What is the adjustment I will need to make to show that dropdown above the modal?
Tried fixing with z-index and I read somewhere on SO to set the grandparent to position relative.
Prefer a CSS only solution.
Thanks!
.w-100 {
width: 100%;
height: 100%;
}
.h-100 {
width: 100%;
height: 100%:
}
.modal-overlay {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
display: block;
z-index: 65;
padding-top: 100px;
overflow: auto;
background-color: rgba(0,0,0,.6);
}
.modal-small {
max-width: 600px;
width: 40%;
margin: 0 auto;
float: none;
display: block;
position: relative;
background-color: #fff;
padding: 0;
}
.container {
min-height: 120px;
max-height: 400px;
overflow: auto;
padding: 15px;
}
.element-container {
height: 100px;
width: 100%;
display: inline-block;
padding: 10px;
margin-bottom: 10px;
position: relative;
}
.element-flex-container {
display: flex;
align-items: center;
height: 100%;
padding: 5px 15px;
border-radius: 2px;
border-bottom: 3px solid rgba(0,0,0,.1);
border-left: 1px solid rgba(0,0,0,.1);
border-right: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(0,0,0,.1);
}
.avatar {
height: 32px;
width: 32px;
border-radius: 100%;
margin-right: 10px;
}
.flex-1 {
flex: 1;
}
.dropdown-width {
text-align: right;
width: 100px;
}
.dropdown-container {
display: inline;
position: relative;
}
.toggle-dropdown {
color: #4caf50
}
.dropdown {
position: absolute;
border: 1px solid red;
left: auto;
right: 0;
width: 120px;
display: block;
background-color: #fff;
z-index: 10;
margin-bottom: 20px;
padding: 0;
}
<div class="modal-overlay">
<div class="modal-small">
<div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
<div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
<div class="container">
<!-- Repeat of elements -->
<div class="element-container">
<div class="element-flex-container">
<img src="http://images.freeimages.com/images/previews/7ab/chrysanthemum-3-1621562.jpg" class="avatar" />
<div class="flex-1">
Something here
</div>
<div class="dropdown-width">
<div class="dropdown-container">
<div class="toggle-dropdown">
Toggle
</div>
<div class="dropdown">
Something here
<br />
Something else
<br />
Something else
<br />
Something else
<br />
Something else
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You need to make the dropdown element position: fixed, the dropdown container positon: absolute and the parent position:relativefor this to work. You can adjust the positining of the container element using top, right, left, bottom but you'll need to use negative margins on the fixed element.
.w-100 {
width: 100%;
height: 100%;
}
.h-100 {
width: 100%;
height: 100%:
}
.modal-overlay {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
display: block;
z-index: 65;
padding-top: 100px;
overflow: auto;
background-color: rgba(0,0,0,.6);
}
.modal-small {
max-width: 600px;
width: 40%;
margin: 0 auto;
float: none;
display: block;
position: relative;
background-color: #fff;
padding: 0;
}
.container {
min-height: 120px;
max-height: 400px;
overflow: auto;
padding: 15px;
}
.element-container {
height: 100px;
width: 100%;
display: inline-block;
padding: 10px;
margin-bottom: 10px;
position: relative;
}
.element-flex-container {
display: flex;
align-items: center;
height: 100%;
padding: 5px 15px;
border-radius: 2px;
border-bottom: 3px solid rgba(0,0,0,.1);
border-left: 1px solid rgba(0,0,0,.1);
border-right: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(0,0,0,.1);
}
.avatar {
height: 32px;
width: 32px;
border-radius: 100%;
margin-right: 10px;
}
.flex-1 {
flex: 1;
}
.dropdown-width {
text-align: right;
width: 100px;
}
.dropdown-container {
display: inline;
position: absolute;
top: 0;
right:0;
}
.toggle-dropdown {
color: #4caf50
}
.dropdown {
position: fixed;
border: 1px solid red;
width: 120px;
display: block;
background-color: #fff;
z-index: 10;
margin-bottom: 20px;
padding: 0;
}
<div class="modal-overlay">
<div class="modal-small">
<div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
<div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
<div class="container">
<!-- Repeat of elements -->
<div class="element-container">
<div class="element-flex-container">
<img src="http://images.freeimages.com/images/previews/7ab/chrysanthemum-3-1621562.jpg" class="avatar" />
<div class="flex-1">
Something here
</div>
<div class="dropdown-width">
<div class="dropdown-container">
<div class="toggle-dropdown">
Toggle
</div>
<div class="dropdown">
Something here
<br />
Something else
<br />
Something else
<br />
Something else
<br />
Something else
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
you need used z-index 999, and position relative in dropdown css.
Example:
.w-100 {
width: 100%;
height: 100%;
}
.h-100 {
width: 100%;
height: 100%:
}
.modal-overlay {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
display: block;
z-index: 65;
padding-top: 100px;
overflow: auto;
background-color: rgba(0,0,0,.6);
}
.modal-small {
max-width: 600px;
width: 40%;
margin: 0 auto;
float: none;
display: block;
position: relative;
background-color: #fff;
padding: 0;
}
.container {
min-height: 120px;
max-height: 400px;
overflow: auto;
padding: 15px;
}
.element-container {
height: 100px;
width: 100%;
display: inline-block;
padding: 10px;
margin-bottom: 10px;
position: relative;
}
.element-flex-container {
display: flex;
align-items: center;
height: 100%;
padding: 5px 15px;
border-radius: 2px;
border-bottom: 3px solid rgba(0,0,0,.1);
border-left: 1px solid rgba(0,0,0,.1);
border-right: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(0,0,0,.1);
}
.avatar {
height: 32px;
width: 32px;
border-radius: 100%;
margin-right: 10px;
}
.flex-1 {
flex: 1;
}
.dropdown-width {
text-align: right;
width: 100px;
}
.dropdown-container {
display: inline;
position: relative;
}
.toggle-dropdown {
color: #4caf50
}
.dropdown {
position: relative;
z-index: 9999;
border: 1px solid red;
left: auto;
right: 0;
width: 120px;
display: block;
background-color: #fff;
z-index: 10;
margin-bottom: 20px;
padding: 0;
}
<div class="modal-overlay">
<div class="modal-small">
<div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
<div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
<div class="container">
<!-- Repeat of elements -->
<div class="element-container">
<div class="element-flex-container">
<img src="http://images.freeimages.com/images/previews/7ab/chrysanthemum-3-1621562.jpg" class="avatar" />
<div class="flex-1">
Something here
</div>
<div class="dropdown-width">
<div class="dropdown-container">
<div class="toggle-dropdown">
Toggle
</div>
<div class="dropdown">
Something here
<br />
Something else
<br />
Something else
<br />
Something else
<br />
Something else
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Related
I have two rectangles with a background effect. On their own, the hover function works well and translates the top div up and to the right, however I soon as I put this code into a flex container, the hover does not work anymore. Anybody know why? Heres the code without the flex container:
body {
padding: 100px;
margin: 0;
}
.box {
width: 200px;
height: 200px;
background-color: black;
border: solid 2px black;
border-radius: 15px;
z-index: -1;
display: inline-block;
}
.box2 {
position: relative;
width: 200px;
height: 200px;
left: 2px;
bottom: 5px;
background-color: white;
border: solid 2px black;
border-radius: 15px;
}
.box2:hover {
bottom: 8px;
left: 4px;
}
<body>
<div class="box">
<div class="box2">
</div>
</div>
<div class="box">
<div class="box2">
</div>
</div>
</body>
Add display: flex; to the body afterwards and the code wont work anymore.
Here is my try, I delete the z-index.
body {
padding: 100px;
margin: 0;
display: flex;
}
.box {
width: 200px;
height: 200px;
background-color: black;
border: solid 2px black;
border-radius: 15px;
display: inline-block;
}
.box2 {
position: relative;
width: 200px;
height: 200px;
left: 2px;
bottom: 5px;
background-color: white;
border: solid 2px black;
border-radius: 15px;
}
.box2:hover {
left: 8px;
bottom: 4px;
}
<body>
<div class="box">
<div class="box2">
</div>
</div>
</body>
I am trying to get a div height take the remaining space between two divs.
<div id='company_col' class='contact_columns'>
<div id='company_title' class ='col_title'>
<h3>Company</h3>
</div>
<hr>
<div id='company_list' class='contact_lists'>
</div>
<div id='company_edit_bar' class='edit_bar'>
<div id='company_add_btn' class='edit_btn'>
<i class='fa fa-plus' aria-hidden='true'></i>
</div>
<div id='company_delete_btn' class='edit_btn'>
<i class='fa fa-minus' aria-hidden='true'></i>
</div>
</div>
Here is the JS Fiddle: https://jsfiddle.net/xqLpqsdk/
I need to make .contact_lists to fill the space between .col_title and .edit_bar so the scroll bar is only displayed between those 2 divs
I've tried making .contact_lists position absolute but that didn't work.
If I am not wrong this will solve your issue. Please take a look at this,
#contact_editor_wrapper {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
z-index: 10000;
}
#contact_editor {
display: block;
position: absolute;
width: 100%;
max-width: 1400px;
height: 100%;
min-height: 400px;
max-height: 800px;
background-color: #99AFC5;
border: solid 1px black;
border-radius: 10px;
margin: 0 auto;
padding: 2.5px 5px;
}
#x_contact_editor {
display: inline-block;
position: absolute;
right: 5px;
cursor: pointer;
}
.contact_editor_row {
margin: .5% 0;
}
#contact_editor_title_wrapper {
display: block;
width: 100%;
height: 4%;
}
#contact_editor_title {
padding: 6px 0;
text-align: center;
font-size: 20px;
text-shadow: 0 1px 1px rgba(0,0,0,.2);
}
#contact_columns {
display: flex;
height: 89%;
width: 100%;
flex-direction: row;
justify-content: center;
}
.contact_columns {
display: flex;
flex-flow: column;
height: 100%;
background-color: white;
margin: 0 .25%;
border: 1px solid black;
border-radius: 5px;
overflow: hidden;
}
#type_col {
width: 14.5%;
}
#company_col {
width: 42%;
}
#contact_col {
width: 42%
}
#contact_editor_btns {
display: block;
width: 100%;
height: 4%;
}
.col_title {
display: block;
text-align: center;
width: 100%;
height: auto;
margin-top: 9px;
text-shadow: 0 1px 1px rgba(0,0,0,.2);
border-bottom: 1px solid black;
}
.contact_lists {
position: relative;
height: 100%;
overflow-y: scroll;
}
.edit_bar {
display: block;
//position: absolute;
bottom: 0;
width: 100%;
height: auto;
border-top: 1px solid black;
border-radius: 0 0 5px 5px;
background-color: #00162C;
}
.edit_btn {
color: white;
display: inline-block;
height: 100%;
margin: 0;
padding: 0;
border-right: 1px solid black;
transition: all .5s ease;
}
.edit_btn:hover {
background-color: #99AFC5;
transition: all .5s ease;
}
.edit_btn i {
margin: 4px 8px;
}
#company_delete_btn, #contact_delete_btn {
margin-left: -2.5px;
}
<div id='contact_editor_wrapper' class='hide_contact_editor'>
<div id='contact_editor'>
<div id='x_contact_editor'>
<i class='fa fa-times' aria-hidden='true'></i>
</div>
<div id='contact_editor_title_wrapper' class='contact_editor_row'>
<div id='contact_editor_title'>Contact Editor</div>
</div>
<div id='contact_columns' class='contact_editor_row'>
<div id='type_col' class='contact_columns'>
<div id='type_title' class ='col_title'>
<h3>Type</h3>
</div>
<hr>
<div id='type_list' class='contact_lists'>
</div>
</div>
<div id='company_col' class='contact_columns'>
<div id='company_title' class ='col_title'>
<h3>Company</h3>
</div>
<hr>
<div id='company_list' class='contact_lists'>
</div>
<div id='company_edit_bar' class='edit_bar'>
<div id='company_add_btn' class='edit_btn'>
<i class='fa fa-plus' aria-hidden='true'></i>
</div>
<div id='company_delete_btn' class='edit_btn'>
<i class='fa fa-minus' aria-hidden='true'></i>
</div>
</div>
</div>
<div id='contact_col' class='contact_columns'>
<div id='contact_title' class ='col_title'>
<h3>Contact</h3>
</div>
<hr>
<div id='contact_list' class='contact_lists'>
</div>
<div id='contact_edit_bar' class='edit_bar'>
<div id='contact_add_btn' class='edit_btn'>
<i class='fa fa-plus' aria-hidden='true'></i>
</div>
<div id='contact_delete_btn' class='edit_btn'>
<i class='fa fa-minus' aria-hidden='true'></i>
</div>
</div>
</div>
</div>
<div id='contact_editor_btns' class='contact_editor_row'>
</div>
</div>
</div>
How to make the inside divs fit to the contents in the below html
I tried with display:inline-block but it moves the 2nd div to the bottom.
<div class="ms-table">
<div class="tableCol-75">
</div>
<div class="tableCol-25">
</div>
</div>
There you go:
.ms-table {
width: 80%;
}
.tableCol-70 {
float: left;
width: 70%;
border: 1px solid black;
margin-right: 10px;
}
.tableCol-25 {
float: left;
width: 25%;
border: 1px solid blue;
}
<div class="ms-table">
<div class="tableCol-70">
My name is abc and I live in ams.
</div>
<div class="tableCol-25">
I love junk food even though it is unhealthy
</div>
</div>
use display: table
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.ms-table{
display: table;
width: 100%;
height: 100px;
}
.table-cell{
display: table-cell;
vertical-align: top;
padding: 15px;
}
.tableCol-75{
width: 75%;
background: #ccc;
}
.tableCol-25{
width: 25%;
background: #000;
color: #fff;
}
<div class="ms-table">
<div class="table-cell tableCol-75">75%</div>
<div class="table-cell tableCol-25">25%</div>
</div>
use display: inline-block;
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.ms-table{
width: 100%;
min-height: 100px;
}
.table-cell{
display: inline-block;
vertical-align: top;
padding: 15px;
}
.tableCol-75{
width: 75%;
background: #ccc;
}
.tableCol-25{
width: 25%;
background: #000;
color: #fff;
}
<div class="ms-table">
<div class="table-cell tableCol-75">75%</div><!--
--><div class="table-cell tableCol-25">25%</div>
</div>
below is my code, the thumb Divs are starting from left but how can I make them centralized?
.thumbsPanel {
border: thin black dashed;
width: 800px;
height: 500px;
margin: 0 auto;
}
.thumbs {
float: left;
width: 100px;
height: 100px;
border: 0;
margin: 0 1em 1em 0;
}
<div class="thumbsPanel">
<div class="thumbs"><img src="1.jpg"></div>
<div class="thumbs"><img src="2.jpg"></div>
<div class="thumbs"><img src="3.jpg"></div>
</div>
There's not much point in floating the divs if you want to center them. Instead make them inline-block elements and use text-align:center on the parent:
.thumbsPanel {
border: thin black dashed;
width: 800px;
height: 500px;
margin: 0 auto;
text-align: center;
}
.thumbs {
display: inline-block;
width: 100px;
height: 100px;
border: 0;
margin: 0 1em 1em 0;
}
<div class="thumbsPanel">
<div class="thumbs">
<a href="1.html">
<img src="1.jpg">
</a>
</div>
<div class="thumbs">
<a href="2.html">
<img src="2.jpg">
</a>
</div>
<div class="thumbs">
<a href="3.html">
<img src="3.jpg">
</a>
</div>
</div>
My favorite method is to add a text-align: center; to the parent element, then use display: inline-block; instead of float: left;
.thumbsPanel {
border: thin black dashed;
width: 800px;
height: 500px;
margin: 0 auto;
text-align: center;
}
.thumbs {
display: inline-block;
width: 100px;
height: 100px;
border: 0;
margin: 0 1em 1em 0;
}
<div class="thumbsPanel">
<div class="thumbs"><img src="1.jpg"></div>
<div class="thumbs"><img src="2.jpg"></div>
<div class="thumbs"><img src="3.jpg"></div>
</div>
You can use inline-block to thumbs instead of float left like:
.thumbsPanel {
border: thin black dashed;
width: 800px;
height: 500px;
margin: 0 auto;
text-align: center;
}
.thumbs {
display: inline-block;
border:1px solid #000;
width: 100px;
height: 100px;
margin: 0 1em 1em 0;
}
<div class="thumbsPanel">
<div class="thumbs">a</div>
<div class="thumbs">b</div>
<div class="thumbs">c</div>
</div>
If you want to conserve your floating behavior you should add an container to your thumbs, also using float dont forget to clearfix the container like:
.thumbsPanel {
border: thin black dashed;
width: 800px;
height: 500px;
margin: 0 auto;
text-align: center;
}
.thumbsWrap {
display: inline-block;
overflow: hidden;
}
.thumbs {
float: left;
width: 100px;
height: 100px;
border: 1px solid #000;
margin: 0 1em 1em 0;
}
<div class="thumbsPanel">
<div class="thumbsWrap">
<div class="thumbs">a</div>
<div class="thumbs">b</div>
<div class="thumbs">c</div>
</div>
</div>
I have searched a lot for this, I can not find an answer.
I want the div SubTopicInfo1 to appear when hovering over the div subTopicNav1. I need it to be only CSS.
Here is what I have:
Fiddle
HTML:
<div id="NavBar">
<div id="Mainbutton">
<center><h2 style="margin-top: 7px;"> Main </h2></center>
</div>
<div id="topic1button">
<center><h2 style="margin-top: 7px;"> Skiing </h2></center>
</div>
<div id="topic2button">
<center><h2 style="margin-top: 12px;"> Movies </h2></center>
</div>
</div>
<div id="Main">
<div id="IntroImage">
</div>
<div id="Title">
<h2 id="Titlemain"> TYLER POTTS</h2>
</div>
<div id="SubTopicNav">
<div id="subTopicNav1">
<center><h2>About Me</h2></center>
</div>
<div id="subTopicNav2">
<center><h2>Skiing</h2></center>
</div>
<div id="subTopicNav3">
<center><h2>Movies</h2></center>
</div>
</div>
<div id="SubTopicInfo">
<div id="SubTopicInfo1">
<h1> Test </h1>
</div>
<div id="SubTopicInfo2">
</div>
<div id="SubTopicInfo3">
</div>
</div>
<div id="Footer">
</div>
</div>
CSS:
#NavBar
{
width: 750px;
height: 40px;
background-color: white;
margin: 0 auto;
border-top: 5px solid #FFD640;
border-bottom: 5px solid #FFD640;
}
#topic2button
{
width: 100px;
height: 45px;
margin-top:-50px;
margin-left: 215px;
float:left;
}
#topic2button:hover
{
background-color: #FFD640;
}
#Mainbutton
{
width: 100px;
height: 45px;
margin-top:;
margin-left: 315px;
float:left;
}
#Mainbutton:hover
{
background-color: #FFD640;
}
#topic1button
{
width: 100px;
height: 45px;
float: left;
}
#topic1button:hover
{
background-color: #FFD640;
}
#Main
{
width: 750px;
height: 1000px;
margin: 0 auto;
background-color: white;
}
#IntroImage
{
width: 750px;
height: 150px;
background-image:url("http://skiersedgeproshop.com/wp/wp-content/uploads/2013/11/snow-mountain-ski1.jpg")
}
#IntroImage:hover
{
opacity: 0.8;
}
#Title
{
width: 500px;
height: 40px;
border-top: 5px solid #FFD640;
border-bottom: 5px solid #FFD640;
margin:0 auto;
margin-top: 10px;
}
#Titlemain
{
margin-left: 170px;
margin-top: 6px;
}
#SubTopicNav
{
width: 150px;
height: 400px;
border-top: 5px solid #FFD640;
border-bottom: 5px solid #FFD640;
margin-top: 25px;
float:left;
}
#subTopicNav1
{
margin-top: 60px;
width: 150px;
height: 50px;
}
#subTopicNav2
{
margin-top: 60px;
width: 150px;
height: 50px;
}
#subTopicNav3
{
margin-top: 60px;
width: 150px;
height: 50px;
}
#subTopicNav1:hover
{
margin-top: 60px;
width: 150px;
height: 50px;
background-color: #FFD640;
}
#subTopicNav2:hover
{
margin-top: 60px;
width: 150px;
height: 50px;
background-color: #FFD640;
}
#subTopicNav3:hover
{
margin-top: 60px;
width: 150px;
height: 50px;
background-color: #FFD640;
}
#SubTopicInfo
{
width: 600px;
height: 400px;
border-top: 5px solid #FFD640;
border-bottom: 5px solid #FFD640;
margin-top: 25px;
float: left;
}
#SubTopicInfo1
{
display:none;
background-color: #FFD640;
}
#subTopicNav1:hover + #SubTopicInfo1
{
display: block;
}
Thanks.
You wont be able to do so with just CSS in your situation.
#subTopicNav1:hover + #SubTopicInfo1 {}
Works if #SubTopicInfi1 is next to (after #subTopicInfo1 closing tag) the container.
explained here:
How to affect other elements when a div is hovered
So you probably should look into a solution with Jquery/javascript!
Please try something like this:
(Hide the extra info panel by default, then make it visible on :hover like below)
<style>
.link {
display: block;
}
.link:hover p{
visibility: visible;
}
.info{
visibility: hidden;
}
</style>
<body>
<div class="link">
Text Here
<p class="info"> Info Here</p>
</div>
</body>
Here is the working Demo http://jsfiddle.net/H9fGP/1/
maybe its not the exact example. but I hope it helps :)
the main thing is that the sub info has absolute position
I rearanged the html and added some css.
.container
{
border-top: 5px solid #FFD640;
margin-top: 25px;
}
#SubTopicNav
{
position:relative;
}
#SubTopicNav > div > div
{
position:absolute;
left:200px;
top:0px;
display:none;
width: 600px;
height: 400px;
margin-top: 25px;
float: left;
}
#SubTopicInfo
{
display:none;
background-color: #FFD640;
}
#SubTopicNav > div:hover >div
{
display: block;
}