Firstly, here's a JSFiddle demo: https://jsfiddle.net/y9bp4oat/
I'm currently using bootstrap's grid system to display a bunch of items in rows of 4. When you hover over an item it'll flip to the back and display more details. It works great, problem comes when there's an item directly below the item you're currently hovering over, the item below blocks or overlays itself on the item that's being hovered. I'm sorry if my explanation is confusing, the JSFiddle demo will let you see what I mean.
I've been trying to fix this issue with z-index, making sure the position isn't set to default but to no avail. I've been trying to fix this issue for days now. Any help would be much appreciated.
HTML:
<html>
<head>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<div class="row">
<div class="col-md-3 pull-left mb-3">
<div class="flip-container">
<div class="flipper">
<div class="front bg-dark">
</div>
<div class="back">
<div class="bg-dark mystyle text-center py-3" >
<h5>Restaurant</h5>
<h5>10 Reviews<h5>
<h5>Average Rating: 4.5/5 </h5>
<button href="#" type="button" class="btn btn-primary btn-sm">SeeMore</button>
<button href="#" type="button" class="btn btn-primary btn-sm">Reviews</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 pull-left mb-3">
<div class="flip-container">
<div class="flipper">
<div class="front bg-dark">
</div>
<div class="back">
<div class="bg-dark mystyle text-center py-3" >
<h5>Restaurant</h5>
<h5>10 Reviews<h5>
<h5>Average Rating: 4.5/5 </h5>
<button href="#" type="button" class="btn btn-primary btn-sm">See More</button>
<button href="#" type="button" class="btn btn-primary btn-sm">Reviews</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 pull-left mb-3">
<div class="flip-container">
<div class="flipper">
<div class="front bg-dark">
</div>
<div class="back">
<div class="bg-dark mystyle text-center py-3" >
<h5>Restaurant</h5>
<h5>10 Reviews<h5>
<h5>Average Rating: 4.5/5 </h5>
<button href="#" type="button" class="btn btn-primary btn-sm">See More</button>
<button href="#" type="button" class="btn btn-primary btn-sm">Reviews</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 pull-left mb-3">
<div class="flip-container">
<div class="flipper">
<div class="front bg-dark">
</div>
<div class="back">
<div class="bg-dark mystyle text-center py-3" >
<h5>Restaurant</h5>
<h5>10 Reviews<h5>
<h5>Average Rating: 4.5/5 </h5>
<button href="#" type="button" class="btn btn-primary btn-sm">See
More</button>
<button href="#" type="button" class="btn btn-primary btn
sm">Reviews</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 pull-left mb-3">
<div class="flip-container">
<div class="flipper">
<div class="front bg-dark">
</div>
<div class="back">
<div class="bg-dark mystyle text-center py-3" >
<h5>Restaurant</h5>
<h5>10 Reviews<h5>
<h5>Average Rating: 4.5/5 </h5>
<button href="#" type="button" class="btn btn-primary btn-sm">See More</button>
<button href="#" type="button" class="btn btn-primary btn-sm">Reviews</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
.mystyle{
height: 90px;
width: 254px;
color: white;
font-size: smaller;
padding: 5px 5px 5px 5px;
border-radius: 10px;
margin: 5px 1% 5px 1%;
float: left;
position: relative;
transition: 1s;
-webkit-transition: 1s;
text-align: left;
overflow: hidden;
background-color: white;
z-index: 5;
}
.flip-container{
perspective: 1000px;
}
.flip-container:hover .flipper ,
.flip-container.hover .flipper{
transform: rotateY(180deg);
}
.flip-container:hover .flipper .mystyle,
.flip-container.hover .flipper .mystyle{
height: 150px;
width: 254px;
background-color: grey;
color: white;
position: relative;
z-index: 5;
margin-bottom: 100px;
}
.flip-container,
.front,
.back{
height: 100px;
width: 254px;
}
.flipper{
transition: 1s;
transform-style: preserve-3d;
}
.front,
.back{
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front{
transform: rotateY(0deg);
}
.back{
transform: rotateY(180deg);
}
You need to set the z-index at the outer container:
.flip-container:hover{
position:relative;
z-index:1;
}
Demo: https://jsfiddle.net/lotusgodkk/r62wxp4L/3/
Related
I have a horizontal scrollable div where I have squared divs. I need to make these squared divs bigger, but I can't achieve this. In the example I provide here, there are 3 squared divs. Each time I add a new one, all of them get even smaller. How can I prevent them from shrinking and maintain my scrollable div?
Here's my codepen.
Set a min-width to your boxes, and make sure your container doesn't wrap.
Modified code is in the bottom of the CSS snippet
.publish-product-form {
margin-bottom: 15px;
}
.image-scroller {
border: 1px solid blue;
width: 375px;
height: auto;
white-space: nowrap;
position: relative;
overflow-x: scroll;
overflow-y: hidden;
background-color: white;
padding: 0px;
-webkit-overflow-scrolling: touch;
}
.img-box {
padding: 0px;
}
.img-holder {
margin-top: 20px;
}
.image-doesnt-exist {
width: 100%;
padding-bottom: 100%;
background-size: cover;
background-position: center;
border: 2px dotted #8ABE57;
border-radius: 0.25rem;
}
.add-img-button::before {
font-size: 1.2em;
}
.add-img-button {
color: #8ABE57;
position: absolute;
top: 50%;
left: 50%;
font-size: 1.2em;
transform: translate(-50%, -50%);
}
.add-img-button:hover {
color: #9FD362;
}
/**New css**/
.image-scroller .row {
flex-wrap: nowrap;
}
.image-scroller .img-box {
min-width: 180px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-primary" type="button" data-toggle="modal" data-target="#editProductModal">Click me</button>
<!-- Modal Editar Aviso -->
<div class="modal fade bd-example-modal-md publish-product-modal" tabindex="-1" role="dialog"
aria-labelledby="myLargeModalLabel" aria-hidden="true" id="editProductModal">
<div class="modal-dialog modal-md modal-dialog-centered" role="document">
<div class="modal-content publish-product-modal-content">
<div class="modal-header publish-product-modal-header">
<img src="images/logo-header.svg">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body publish-product-modal-body text-center col-lg-11 col-md-11 pb-5 pt-0 mx-auto">
<!-- Image Edition Section -->
<div class="publish-product-form col-12">
<form class="edit-ad-product-information">
<!--- MY IMAGE SCROLL TEST -->
<div class="row">
<div class="image-scroller col-12">
<div class="row">
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- /MY IMAGE SCROLL TEST-->
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /Modal Editar Aviso-->
remove col class from div.img-box,
also you need to change .row class' display property to block from flex
.row {
display: block;
white-space: nowrap
}
.img-box {
height: 125px;
width: 125px;
display: inline-block;
}
I am having some trouble with some of my bootstrap cards overlapping my navbar. I made sure that none of my positions were absolute and that the z indexes were handled properly, but I still get the same issue. doing padding-top on the body did not give me the result I wanted either. Here are some before and after pictures.
#top {
top: 0;
position: fixed;
z-index: 1;
}
.topbar {
height: 90px;
background-color: #24414e;
border-left: 2px solid #24414e;
border-right: 2px solid #24414e;
border-top: 2px solid #24414e;
border-bottom: 2px solid #24414e;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
animation-name: greeting;
animation-duration: 8s;
animation-delay: 1s;
}
#keyframes greeting {
0% {
background: url('https://cdn.dribbble.com/users/751466/screenshots/3360272/hello-3.gif');
background-size: 100% 100%;
}
60% {
opacity: 1;
}
}
/*
.topbar:hover{
background:url('https://cdn.dribbble.com/users/751466/screenshots/3360272/hello-3.gif');
background-size: 100% 100%;
}
*/
.logo {
transform: translateY(50%);
font-family: "Dancing Script";
color: #ffffff;
}
.holder {
width: 5%;
height: 80%;
margin-right: 30px;
margin-top: 10px;
}
.out {
margin-top: 46px;
color: #ffffff;
margin-right: 0;
}
.out:hover {
text-decoration: underline;
}
.menu {
height: 15%;
margin-top: 0px;
background-color: #f7ce3e;
}
/*
.iconbar{
margin-top: 20px;
margin-right: 20px;
margin-left:20px;
height =
text-align: center;
border-left: 2px solid #24414e;
border-right: 2px solid #24414e;
border-top: 2px solid #24414e;
border-bottom: 2px solid #24414e;
}
*/
.icon {
margin-top: 10px;
color: #24414e;
animation-name: iconSlide;
animation-duration: 1s;
}
.txt {
font-size: 15px;
visibility: hidden;
margin-top: 0px;
color: #24414e;
}
#keyframes iconSlide {
0% {
transform: translateX(600%);
}
100% {
transform: translateX(0);
}
}
.icon-1:hover~.txt-1 {
visibility: visible;
}
.icon-2:hover~.txt-2 {
visibility: visible;
}
.icon-3:hover~.txt-3 {
visibility: visible;
}
.icon-4:hover~.txt-4 {
visibility: visible;
}
.icon-5:hover~.txt-5 {
visibility: visible;
}
.icon-6:hover~.txt-6 {
visibility: visible;
}
.icon:hover {
color: #ffffff;
}
.rest {
height: 100%;
}
.contacts {
position: relative;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<!---This is for importing bootstrap and the CSS File--->
<head>
<title>Dashboard</title>
<link rel="stylesheet" href="templatestyle.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Dancing Script' rel='stylesheet'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!---Nav Bar and Header--->
<section id="top">
<!---Header--->
<div class="container-fluid topbar">
<h1 class="float-left logo">Example</h1>
<h5 class="float-right out">log out</h5>
<img src="blank-person-male.png" alt="profilepic" class="rounded-circle float-right holder"></img>
</div>
<!---Nav Bar--->
<div class="container-fluid menu" id="openMenu">
<div class="row">
<div class="col-2 text-center">
<i class="fa fa-tachometer fa-2x icon icon-1" aria-hidden="true"></i>
<h5 class="txt txt-1">Dashboard</h5>
</div>
<div class="col-2 text-center">
<i class="fa fa-user fa-2x icon icon-2" aria-hidden="true"></i>
<h5 class="txt txt-2">Profile</h5>
</div>
<div class="col-2 text-center">
<i class="fa fa-certificate fa-2x icon icon-3" aria-hidden="true"></i>
<h5 class="txt txt-3">Certificates</h5>
</div>
<div class="col-2 text-center">
<i class="fa fa-paper-plane fa-2x icon icon-4" aria-hidden="true"></i>
<h5 class="txt txt-4">Send/Apply</h5>
</div>
<div class="col-2 text-center">
<i class="fa fa-cog fa-2x icon icon-5" aria-hidden="true"></i>
<h5 class="txt txt-5">Settings</h5>
</div>
<div class="col-2 text-center">
<i class="fa fa-envelope fa-2x icon icon-6" aria-hidden="true"></i>
<h5 class="txt txt-6">Messages</h5>
</div>
</div>
</div>
</section>
<section class="rest container-fluid">
<h2 class="text-center"><u>Dashboard</u></h2>
<!---Contacts--->
<h4>Online contacts:</h4>
<div class="row contacts">
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border-success">
<div class="card-header">Person 1</div>
<div class="card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border-success">
<div class="card-header">Person 2</div>
<div class="card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border-success">
<div class="card-header">Person 3</div>
<div class="card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border-success">
<div class="card-header">Person 4</div>
<div class="card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border-success">
<div class="card-header">Person 5</div>
<div class="card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border-success">
<div class="card-header">Person 6</div>
<div class="card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border-success">
<div class="card-header">Person 7</div>
<div class="card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
This is a simple fix, just set your Header z-index: 2; and your cards z-index: 1;.
I didn't really go over your code but setting the header an higher z-index as the content for sure will fix it.
The answer is you have given position:fixed to the header(.top) to fix it at the top with top:0, so you must need to give margin-top to the section next to it containing classes class="rest container-fluid" otherwise it will overlap as it seems with absolute positioned element.
Setting margin:top:159px fix the issue.
Please note that 159px is top header's height here. Happy coding :)
Use the fixed-top class instead of the top CSS code. And add 160px padding-top for the body.
/*
The headers height is 159.5px
*/
body {
padding-top: 160px;
}
fixed-top removes the element that you use it for, from the normal flow of the content, and, hence, the element will overlay the other content
To fix the issue, you need to push down the main content equal or larger than the height of the fixed-top element. You can do so by setting the padding-top of the body equal or larger than the fixed-top element's height. For example, if the fixed-top element's height is 72px, padding-top of body should be, at least, 72px. If you wish, you can use relative units: padding-top: 4.5rem; instead of padding-top: 72px;.
body {
padding-top: 72px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="fixed-top bg-light">
<div>
<noscript>
<h1 style="color:#FF0000;">
This reportFile will not be navigable without Javascript, please enabled Javascript
</h1>
</noscript>
<img srcset="style/songkongheader.png 400w,style/songkongheader-medium.png 200w,style/songkongheader-small.png 100w," sizes="(max-width:800px) 200px,(max-width:600px) 100px,400px" class="mb-2">
</div>
<header>
<h2 class="subheading" title="Start Fixing Songs">
<a class="mx-2">
Fix Songs
</a>
</h2>
</header>
</div>
<main class="container-fluid bg-primary bd-">
<div class="row">
<div class="col py-5">Hello</div>
</div>
</main>
This is what both bootstrap-3 and bootstrap-4 has done. I recommend you to inspect it yourself.
You may find these two link useful.
w3schools - How to - fixed menu
teamtreehouse - div hiddne below fixed position navbar
A codepen of your work
In my code, the overflow-y: scroll property set under the "Online Contacts" section does not seem to be working. What's weirder is that when the position is absolute and I delete the "Reminders" header or I shift the header up, It does seem to work. I can't figure out what is causing this bug (Note: I am using Bootstrap 4 in this project).
Here is the code: https://jsfiddle.net/hdesh7/rL43unfj/1/
HTML:
<html lang="en">
<!---This is for importing bootstrap and the CSS File--->
<head>
<title>Dashboard</title>
<link rel="stylesheet" href="dashboardstyle.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Dancing Script' rel='stylesheet'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!---Nav Bar and Header--->
<section id = "top">
<!---Header--->
<div class="container-fluid topbar">
<h1 class="float-left logo">Example</h1>
<h5 class="float-right out">log out</h5>
<img src="blank-person-male.png" alt="profilepic" class="rounded-circle float-right holder"></img>
</div>
<!---Nav Bar--->
<div class="container-fluid menu" id = "openMenu">
<div class="row">
<div class = "col-2 text-center">
<i class="fa fa-tachometer fa-2x icon icon-1" aria-hidden="true"></i>
<h5 class = "txt txt-1">Dashboard</h5>
</div>
<div class = "col-2 text-center">
<i class="fa fa-user fa-2x icon icon-2" aria-hidden="true"></i>
<h5 class = "txt txt-2">Profile</h5>
</div>
<div class = "col-2 text-center">
<i class="fa fa-certificate fa-2x icon icon-3" aria-hidden="true"></i>
<h5 class = "txt txt-3">Certificates</h5>
</div>
<div class = "col-2 text-center">
<i class="fa fa-paper-plane fa-2x icon icon-4" aria-hidden="true"></i>
<h5 class = "txt txt-4">Send/Apply</h5>
</div>
<div class = "col-2 text-center">
<i class="fa fa-cog fa-2x icon icon-5" aria-hidden="true"></i>
<h5 class = "txt txt-5">Settings</h5>
</div>
<div class = "col-2 text-center">
<i class="fa fa-envelope fa-2x icon icon-6" aria-hidden="true"></i>
<h5 class = "txt txt-6">Messages</h5>
</div>
</div>
</div>
</section>
<section class = "rest container">
<h2 class = "text-center"><u>Dashboard</u></h2>
<!---Contacts--->
<h4>Online contacts:</h4>
<div class = "row contact">
<div class = "col-sm-6 col-md-4 col-lg-3">
<div class = "card border-success">
<div class="card-header">Person 1</div>
<div class = "card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class = "bg-primary rounded mx-auto .text-light" style="color: white">Send Chat</button>
</div>
</div>
</div>
<div class = "col-sm-6 col-md-4 col-lg-3">
<div class = "card border-success">
<div class="card-header">Person 2</div>
<div class = "card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class = "bg-primary rounded mx-auto .text-light" style="color: white">Send Chat</button>
</div>
</div>
</div>
<div class = "col-sm-6 col-md-4 col-lg-3">
<div class = "card border-success">
<div class="card-header">Person 3</div>
<div class = "card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class = "bg-primary rounded mx-auto .text-light" style="color: white">Send Chat</button>
</div>
</div>
</div>
<div class = "col-sm-6 col-md-4 col-lg-3">
<div class = "card border-success">
<div class="card-header">Person 4</div>
<div class = "card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class = "bg-primary rounded mx-auto .text-light" style="color: white">Send Chat</button>
</div>
</div>
</div>
<div class = "col-sm-6 col-md-4 col-lg-3">
<div class = "card border-success">
<div class="card-header">Person 5</div>
<div class = "card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class = "bg-primary rounded mx-auto .text-light" style="color: white">Send Chat</button>
</div>
</div>
</div>
<div class = "col-sm-6 col-md-4 col-lg-3">
<div class = "card border-success">
<div class="card-header">Person 6</div>
<div class = "card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class = "bg-primary rounded mx-auto .text-light" style="color: white">Send Chat</button>
</div>
</div>
</div>
<div class = "col-sm-6 col-md-4 col-lg-3">
<div class = "card border-success">
<div class="card-header">Person 7</div>
<div class = "card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class = "bg-primary rounded mx-auto .text-light" style="color: white">Send Chat</button>
</div>
</div>
</div>
</div>
<h4 class = "remind">Reminders:</h4>
</section>
<section class = "rest container">
</section>
</body>
CSS:
html{
overflow-y: scroll;
}
#top{
top: 0;
position: sticky;
z-index: 1;
}
.topbar{
height: 90px;
background-color: #24414e;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
/*
animation-name: greeting;
animation-duration: 8s;
animation-delay: 1s;
*/
}
#keyframes greeting{
0%{
background:url('https://cdn.dribbble.com/users/751466/screenshots/3360272/hello-3.gif');
background-size: 100% 100%;
}
60%{
opacity: 1;
}
}
/*
.topbar:hover{
background:url('https://cdn.dribbble.com/users/751466/screenshots/3360272/hello-3.gif');
background-size: 100% 100%;
}
*/
.logo{
transform: translateY(50%);
font-family: "Dancing Script";
color: #ffffff;
}
.holder{
width: 5%;
height: 80%;
margin-right: 30px;
margin-top: 10px;
}
.out{
margin-top: 46px;
color: #ffffff;
margin-right: 0;
}
.out:hover{
text-decoration: underline;
}
.menu{
height: 15%;
margin-top: 0px;
background-color: #f7ce3e;
}
/*
.iconbar{
margin-top: 20px;
margin-right: 20px;
margin-left:20px;
height =
text-align: center;
border-left: 2px solid #24414e;
border-right: 2px solid #24414e;
border-top: 2px solid #24414e;
border-bottom: 2px solid #24414e;
}
*/
.icon{
margin-top: 10px;
color: #24414e;
animation-name: iconSlide;
animation-duration: 1s;
}
.txt{
font-size: 15px;
visibility: hidden;
margin-top: 0px;
color: #24414e;
}
#keyframes iconSlide{
0% {
transform: translateX(600%);
}
100% {
transform: translateX(0);
}
}
.icon-1{
color: #ffffff;
}
.txt-1{
visibility: visible;
animation-name: iconSlide;
animation-duration: 1s;
}
.icon-1:hover ~ .txt-1{
visibility: visible;
}
.icon-2:hover ~ .txt-2{
visibility: visible;
}
.icon-3:hover ~ .txt-3{
visibility: visible;
}
.icon-4:hover ~ .txt-4{
visibility: visible;
}
.icon-5:hover ~ .txt-5{
visibility: visible;
}
.icon-6:hover ~ .txt-6{
visibility: visible;
}
.icon:hover{
color: #ffffff;
}
.rest{
height: 100%;
z-index: -1;
position: relative;
}
.contact{
height: 100px;
width: 100%;
border-width: 1px;
border-style: solid;
border-color: #24414e;
overflow-y: auto;
position: relative;
}
.card{
margin-top: 10px;
margin-bottom: 10px;
}
.remind{
margin-top: 20px;
}
The issue is caused by z-index: -1 in the .rest class (applied to the section element).
If you remove it works correctly
There is an element with a higher z-index value that is preventing you from scrolling. Namely .rest has z-index: -1.
Switch up your z-index values and make this scrollable container have a higher z-index
I am not able to align the text inside the buttons vertically using the vertical-align:middle style as used in vertical alignment of text and icon in bootstrap button
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="page-header">
<div class="row">
<div class ="col-md-3">
<h3 class="text-center" id="title">Kartikey</h3>
</div>
<div class ="col-md-1 col-md-offset-3" >
<button type="button" class="btn btn-default" ><h3 style="vertical-align:middle;">About</h3></button>
</div>
<div class="col-md-1">
<button type="button" class="btn btn-default"><h3 style="vertical-align:middle;">Portfolio</h3></button>
</div>
<div class="col-md-1">
<button type="button" class="btn btn-default"><h3 style="vertical-align:middle;">Contact</h3></button>
</div>
<div class="col-md-3">
</div>
</div>
</div>
</body>
Here's my code :
http://codepen.io/kartikeykant/pen/VPeWYN
.page-header{
height: 100px;
background-color: rgb(112, 137, 142);
margin-top: 0px;
}
#title{
font-size:400%;
color: white;
}
.btn{
margin-top:24px;
margin-right:50px;
margin-left:50px;
width:110px;
height:55px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="page-header">
<div class="row">
<div class ="col-md-3">
<h3 class="text-center" id="title">Kartikey</h3>
</div>
<div class ="col-md-1 col-md-offset-3" >
<button type="button" class="btn btn-default" ><h3 style="vertical-align:middle;">About</h3></button>
</div>
<div class="col-md-1">
<button type="button" class="btn btn-default"><h3 style="vertical-align:middle;">Portfolio</h3></button>
</div>
<div class="col-md-1">
<button type="button" class="btn btn-default"><h3 style="vertical-align:middle;">Contact</h3></button>
</div>
<div class="col-md-3">
</div>
</div>
</div>
</body>
Also the result in the code snipppet and codepen are different. How is it so?
Just use a margin:0 auto on your h3 tags.
.page-header{
height: 100px;
background-color: rgb(112, 137, 142);
margin-top: 0px;
}
#title{
font-size:400%;
color: white;
}
.btn{
margin-top:24px;
margin-right:50px;
margin-left:50px;
width:110px;
height:55px;
}
.btn h3{
margin:0 auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="page-header">
<div class="row">
<div class ="col-md-3">
<h3 class="text-center" id="title">Kartikey</h3>
</div>
<div class ="col-md-1 col-md-offset-3" >
<button type="button" class="btn btn-default" ><h3 style="vertical-align:middle;">About</h3></button>
</div>
<div class="col-md-1">
<button type="button" class="btn btn-default"><h3 style="vertical-align:middle;">Portfolio</h3></button>
</div>
<div class="col-md-1">
<button type="button" class="btn btn-default"><h3 style="vertical-align:middle;">Contact</h3></button>
</div>
<div class="col-md-3">
</div>
</div>
</div>
</body>
vertical-align:middle didn't work for me either. I ended up using flex.
In Bootstrap 4 this is just a matter of using the flex classes:
<div class="col-md-1">
<button type="button" class="btn btn-default d-flex align-items-middle justify-content-center">
<h3 class="m-0">Contact</h3>
</button>
</div>
If you are still stuck with Bootstrap 3, you can create your own class:
CSS:
.valign-content {
display:flex;
align-items: center;
justify-content: center;
}
.valign-content>h3 {
margin:0;
}
HTML
<div class="col-md-1">
<button type="button" class="btn btn-default valign-content">
<h3>Contact</h3>
</button>
</div>
Note that you need to remove margin from the h3 tags i both cases.
The margin-top: 20px; in class h3 pushes it down. Try troubleshooting it using F12 tools.
You are using <h3> inside <button>, is not "correct", remove <h3> and add "font-size: 24px;" in the ".btn" class.
.page-header{
height: 100px;
background-color: rgb(112, 137, 142);
margin-top: 0px;
}
#title{
font-size:400%;
color: white;
}
.btn {
margin-top:24px;
margin-right:50px;
margin-left:50px;
width:110px;
height:55px;
font-size: 24px;
}
<head>
</head>
<body>
<div class="page-header">
<div class="row">
<div class ="col-md-3">
<h3 class="text-center" id="title">Kartikey</h3>
</div>
<div class ="col-md-1 col-md-offset-4" >
<button type="button" class="btn btn-default" >About</button>
</div>
<div class="col-md-1">
<button type="button" class="btn btn-default">Portfolio</button>
</div>
<div class="col-md-1">
<button type="button" class="btn btn-default">Contact</button>
</div>
<div class="col-md-2">
</div>
</div>
</div>
</body>
I have multiple divs which can be flipped on hover via css transformation.
On each backside I have a bootstrap buttongroup with a dropdown button.
If I expand the dropdown-menu the list is hiding behind the next div.
How can I bring the list to the front?
http://www.bootply.com/3ugZnOsnY2
Just listen for bootstraps dropdown events and then adjust the elements z-index. Check the snippet, you should choose a bit more precise selectors than i did though.
$('.flip').hover(function(){
$(this).find('.card').toggleClass('flipped');
});
$('.btn-group').on('show.bs.dropdown', function () {
$(this).parentsUntil($( ".face", ".back")).css('zIndex', 200);
})
$('.btn-group').on('hidden.bs.dropdown', function () {
$(this).parentsUntil($( ".face", ".back")).css('zIndex', 0);
})
body{
padding-top:50px;
background: #555;
}
.flip {
-webkit-perspective: 800;
perspective: 800;
position: relative;
text-align: center;
}
.flip .card.flipped {
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
.flip .card {
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
transform-style: preserve-3d;
transition: 0.5s;
}
.flip .card .face {
-webkit-backface-visibility: hidden ;
backface-visibility: hidden ;
z-index: 2;
}
.flip .card .front {
position: absolute;
width: 100%;
z-index: 1;
}
.flip .card .back {
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="flip">
<div class="card">
<div class="face front">
<div class="well well-sm"> Front</div>
</div>
<div class="face back">
<div class="well well-sm">
Back
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Dropdown link 1</li>
<li>Dropdown link 2</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="flip">
<div class="card">
<div class="face front">
<div class="well well-sm"> Front</div>
</div>
<div class="face back">
<div class="well well-sm">
Back
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Dropdown link 1</li>
<li>Dropdown link 2</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Have fun!