I am building a Electron app of which layout would be like this:
| header bar |
|col 1| col 2| col 3|
| bottom bar |
There would be 3 columns in the main view between the fixed top and bottom bar while the 3 columns are y-scrollable and each of them has a separate html embedded.
This is the html and SCSS code of my layout but all the columns stick to the top and hidden by the header bar and the bottom bar didn't even show up.
Any idea to fix this? Thanks!
HTML
<body>
<div id="top-bar" class="row h-15">
app title
</div>
<div class="container-fluid">
<div id="main-screen" class="row">
<div id="main-col-1" class="col-4 main-col">
<button id="btn-img-1" type="button" class="btn btn-img btn-lg">btn 1</button>
</div>
<div id="main-col-2” class="col-4 main-col">
<button id="btn-img-2” type="button" class="btn btn-img btn-lg">btn 2</button>
</div>
<div id="main-col-3” class="col-4 main-col">
<button id="btn-img-3” type="button" class="btn btn-img btn-lg">btn 3</button>
</div>
</div>
</div>
<div id="bottom-bar" class="row h-20 text-center" style="margin-bottom:0">
</div>
</body>
SCSS
html {
}
body {
min-width: map-get($base, width);
background-color: map-get($base, background);
overflow-x: hidden;
}
#main-screen{
display:block;
position:relative;
}
.main-col{
padding: 0em;
height: 100%;
color: #3d02bd;
overflow-y:scroll;
}
#main-col-1{
background-color: #e25bff;
}
#main-col-2{
background-color: #ddb1ff;
}
#main-col-3{
background-color: #fbefff;
}
.btn-img{
color: #ffffff;
background-color:#3d02bd;
}
#top-bar {
position: fixed;
left: 0;
top: 0;
width: 100%;
margin-bottom: 0;
background-color: #2a095f;
color:#ffffff;
border: 0;
font-size: 3.5em;
letter-spacing: 0.1em;
opacity: 0.9;
}
#bottom-bar {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
margin-bottom: 0;
background-color: #3d02bd;
color:#ffffff;
border: 0;
font-size: 2.5em;
letter-spacing: 0.1em;
}
Check This code
also change ” to "
html {
}
body {
min-width: map-get($base, width);
background-color: map-get($base, background);
overflow-x: hidden;
}
#main-screen{
display:block;
position:relative;
}
.main-col{
padding: 0em;
height: 100%;
color: #3d02bd;
width:33.33%;
float:left;
overflow-y:scroll;
}
#main-col-1{
background-color: #e25bff;
}
#main-col-2{
background-color: #ddb1ff;
}
#main-col-3{
background-color: #fbefff;
}
.btn-img{
color: #ffffff;
background-color:#3d02bd;
}
#top-bar {
width: 100%;
margin-bottom: 0;
background-color: #2a095f;
color:#ffffff;
border: 0;
font-size: 3.5em;
letter-spacing: 0.1em;
opacity: 0.9;
margin-bottom:15px;
}
#bottom-bar {
width: 100%;
text-align: center;
margin-bottom: 0;
background-color: #3d02bd;
color:#ffffff;
border: 0;
font-size: 2.5em;
letter-spacing: 0.1em;
margin-top:15px;
display:inline-block;
}
<div id="top-bar" class="row h-15">
app title
</div>
<div class="container-fluid">
<div id="main-screen" class="row">
<div id="main-col-1" class="col-4 main-col">
<button id="btn-img-1" type="button" class="btn btn-img btn-lg">btn 1</button>
</div>
<div id="main-col-2" class="col-4 main-col">
<button id="btn-img-2" type="button" class="btn btn-img btn-lg">btn 2</button>
</div>
<div id="main-col-3" class="col-4 main-col">
<button id="btn-img-3" type="button" class="btn btn-img btn-lg">btn 3</button>
</div>
</div>
</div>
<div id="bottom-bar" class="row h-20 text-center" style="margin-bottom:0">bottom bar
</div>
Related
I have a cart menu that I'm filling with items, on web they show up as 4 columns of items, but on mobile they show up as 3 columns.
Also, when a column isn't full, I want the item/s to be left-aligned, but now they are being centered and look out of place.
How can I set it up like this without redirecting to a separate page for mobile?
Can I achieve it with percentages rather than absolute sizes or some other way?
index.html:
<link rel="stylesheet" href="styles2.css" />
<div class="imgbox">
<img class="center-stretch" src="images/banner.png">
</div>
<section class="container content-section border">
<div class="group-title">
Item Group 1
</div>
<div class="shop-items">
<div class="shop-item">
<img class="shop-item-image" src="images/item1.jpg">
<span class="shop-item-title">Item 1</span>
<div class="shop-item-price">$10</div>
<div class="shop-item-details">
<button class="btn btn-primary btn-addtocart" type="button">ADD TO CART</button>
</div>
</div>
<div class="shop-item">
<img class="shop-item-image" src="images/item2.jpg">
<span class="shop-item-title">Item 2</span>
<div class="shop-item-price">$10</div>
<div class="shop-item-details">
<button class="btn btn-primary btn-addtocart" type="button">ADD TO CART</button>
</div>
</div>
<div class="shop-item">
<img class="shop-item-image" src="images/item3.jpg">
<span class="shop-item-title">Item 3</span>
<div class="shop-item-price">$10</div>
<div class="shop-item-details">
<button class="btn btn-primary btn-addtocart" type="button">ADD TO CART</button>
</div>
</div>
<div class="shop-item">
<img class="shop-item-image" src="images/item4.jpg">
<span class="shop-item-title">Item 4</span>
<div class="shop-item-price">$10</div>
<div class="shop-item-details">
<button class="btn btn-primary btn-addtocart" type="button">ADD TO CART</button>
</div>
</div>
<div class="shop-item">
<img class="shop-item-image" src="images/item5.jpg">
<span class="shop-item-title">Item 5</span>
<div class="shop-item-price">$10</div>
<div class="shop-item-details">
<button class="btn btn-primary btn-addtocart" type="button">ADD TO CART</button>
</div>
</div>
<div class="shop-item">
<img class="shop-item-image" src="images/item6.jpg">
<span class="shop-item-title">Item 6</span>
<div class="shop-item-price">$10</div>
<div class="shop-item-details">
<button class="btn btn-primary btn-addtocart" type="button">ADD TO CART</button>
</div>
</div>
<div class="shop-item">
<img class="shop-item-image" src="images/item7.jpg">
<span class="shop-item-title">Item 7</span>
<div class="shop-item-price">$10</div>
<div class="shop-item-details">
<button class="btn btn-primary btn-addtocart" type="button">ADD TO CART</button>
</div>
</div>
<div class="shop-item">
<img class="shop-item-image" src="images/item8.jpg">
<span class="shop-item-title">Item 8</span>
<div class="shop-item-price">$10</div>
<div class="shop-item-details">
<button class="btn btn-primary btn-addtocart" type="button">ADD TO CART</button>
</div>
</div>
</section>
<footer class="main-footer">
<div class="container main-footer-container">
<img class="center-mini" src="images/banner.jpg">
</div>
</footer>
styles2.css:
#font-face {
font-family: "Courier New";
font-weight: normal;
font-style: normal;
}
* {
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: bold;
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Courier New", Courier, monospace;
color: white;
}
.imgbox {
display: grid;
height: 100%;
}
.center-stretch {
width: auto;
max-height: 100vh;
margin: auto;
}
.content-section {
margin: 1em;
}
.container {
width: auto;
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5em;
}
.border {
border: 2px solid black;
}
.group-title {
margin-top: 10px;
font-weight: bold;
text-align: center;
color: black;
font-size: 2.5em;
}
.shop-items {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.shop-item {
margin: 10px;
}
.shop-item-image {
height: 250px;
}
.shop-item-title {
font-size: 1.1em;
display: block;
flex-grow: 1;
color: black;
text-align: center;
margin: 5px
}
.shop-item-price {
display: block;
width: 100%;
text-align: center;
font-weight: bold;
font-size: 1.5em;
color: black;
}
.shop-item-details {
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
}
.btn {
text-align: center;
vertical-align: middle;
padding: .2em .2em;
cursor: pointer;
}
.btn-primary {
color: #52A3FF;
border: 2px solid #52A3FF;
background-color: white;
padding: 0.5em 1.2em;
border-radius: 0em;
}
.btn-primary:hover {
background-color: #52A3FF;
color: white;
}
.btn-addtocart {
}
.main-footer {
background-color: #52A3FF;
color: white;
padding: .25em 0;
}
.main-footer-container {
display: flex;
align-items: center;
}
.center-mini {
width: 40%;
max-height: 100vh;
margin: auto;
}
I'm using Bootstrap 3.3.7 and Angular 5.2.0. I have a loop with the addition of a new entry. Entries are added to "cards". But the problem is that they are now added vertically. And how can I make it so that they are added all along the horizontally by about 5 "cards" in a row as a new record is added ie 6 was transferred to a new row.
html and all css on the cards: :
.card{
display: inline-block;
position: relative;
width: 100%;
margin: 25px 0;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14);
border-radius: $border-radius-base;
color: $mdb-card-body-text;
background: $mdb-card-body-background;
.card-height-indicator {
margin-top: 100%;
}
.title{
margin-top: 0;
margin-bottom: 5px;
}
.card-image {
height: 60%;
position: relative;
overflow: hidden;
margin-left: 15px;
margin-right: 15px;
margin-top: -30px;
border-radius: $border-radius-large;
img {
width: 100%;
height: 100%;
border-radius: $border-radius-large;
pointer-events: none;
}
.card-title {
position: absolute;
bottom: 15px;
left: 15px;
color: $mdb-card-image-headline;
font-size: $font-size-h4;
text-shadow: 0 2px 5px rgba(33, 33, 33, 0.5);
}
}
.category:not([class*="text-"]){
color: $gray-color;
}
.card-content{
padding: 15px 20px;
.category{
margin-bottom: 0;
}
}
.card-header{
#include shadow-big();
margin: -20px $margin-base 0;
border-radius: $border-radius-base;
padding: $padding-base;
background-color: $gray-color;
.title{
color: $white-color;
}
.category{
margin-bottom: 0;
color: rgba($white-color, .62);
}
&.card-chart{
padding: 0;
min-height: 160px;
+ .content{
h4{
margin-top: 0;
}
}
}
.ct-label{
color: rgba($white-color, .7);
}
.ct-grid{
stroke: rgba(255, 255, 255, 0.2);
}
.ct-series-a .ct-point,
.ct-series-a .ct-line,
.ct-series-a .ct-bar,
.ct-series-a .ct-slice-donut{
stroke: rgba(255,255,255,.8);
}
.ct-series-a .ct-slice-pie,
.ct-series-a .ct-area{
fill: rgba(255,255,255,.4);
}
}
.chart-title{
position: absolute;;
top: 25px;
width: 100%;
text-align: center;
h3{
margin: 0;
color: $white-color;
}
h6{
margin: 0;
color: rgba(255,255,255, .4);
}
}
.card-footer{
margin: 0 20px 10px;
padding-top: 10px;
border-top: 1px solid #eeeeee;
.content{
display: block;
}
div{
display: inline-block;
}
.author{
color: $gray-color;
}
.stats{
line-height: 22px;
color: $gray-color;
font-size: $font-size-small;
.material-icons{
position: relative;
top: 4px;
font-size: $font-paragraph;
}
}
h6{
color: $gray-color;
}
}
img{
width: 100%;
height: auto;
}
.category{
.material-icons{
position: relative;
top: 6px;
line-height: 0;
}
}
.category-social{
.fa{
font-size: 24px;
position: relative;
margin-top: -4px;
top: 2px;
margin-right: 5px;
}
}
.author{
.avatar{
width: 30px;
height: 30px;
overflow: hidden;
border-radius: 50%;
margin-right: 5px;
}
a{
color: $black-color;
text-decoration: none;
.ripple-container{
display: none;
}
}
}
.table{
margin-bottom: 0;
tr:first-child td{
border-top: none;
}
}
[data-background-color="purple"]{
background: linear-gradient(60deg, $purple-400, $purple-600);
#include shadow-big-color($brand-primary);
}
[data-background-color="blue"]{
background: linear-gradient(60deg, $blue-900, $blue-900);
#include shadow-big-color($brand-info);
}
[data-background-color="green"]{
background: linear-gradient(60deg, $green-400, $green-600);
#include shadow-big-color($brand-success);
}
[data-background-color="orange"]{
background: linear-gradient(60deg, $orange-400, $orange-600);
#include shadow-big-color($brand-warning);
}
[data-background-color="red"]{
background: linear-gradient(60deg, $red-400, $red-600);
#include shadow-big-color($brand-danger);
}
[data-background-color]{
color: $white-color;
a{
color: $white-color;
}
}
}
.card-stats{
.title{
margin: 0;
}
.card-header{
float: left;
text-align: center;
i{
font-size: 36px;
line-height: 56px;
width: 56px;
height: 56px;
}
}
.card-content{
text-align: right;
padding-top: 10px;
}
}
.card-nav-tabs{
.header-raised{
margin-top: -$margin-base * 2;
}
.nav-tabs{
background: transparent;
padding: 0;
}
.nav-tabs-title{
float: left;
padding: 10px 10px 10px 0;
line-height: 24px;
}
}
.card-plain{
background: transparent;
box-shadow: none;
.card-header{
margin-left: 0;
margin-right: 0;
}
.content{
padding-left: 5px;
padding-right: 5px;
}
.card-image{
margin: 0;
border-radius: $border-radius-base;
img{
border-radius: $border-radius-base;
}
}
}
.iframe-container{
margin: 0 -20px 0;
iframe{
width: 100%;
height: 500px;
border: 0;
#include shadow-big();
}
}
.card-profile,
.card-testimonial{
margin-top: 30px;
text-align: center;
.btn-just-icon.btn-raised{
margin-left: 6px;
margin-right: 6px;
}
.card-avatar{
max-width: 130px;
max-height: 130px;
margin: -50px auto 0;
border-radius: 50%;
overflow: hidden;
#include shadow-big();
& + .content{
margin-top: 15px;
}
}
&.card-plain{
.card-avatar{
margin-top: 0;
}
}
}
<div class="col-lg-3 col-md-6 col-sm-6">
<div *ngFor="let note of notes" >
<div class="card-header" data-background-color="blue">
<i class="material-icons">store</i>
</div>
<div class="card-content" >
<p class="category">{{note.name}} </p>
</div>
<div class="card-footer">
<div class="stats">
<button class="button-save" ><i class="fa fa-eye"></i></button>
<button class="button-trash" ><i class="fa fa-trash"></i></button>
</div>
</div>
</div>
</div>
Add the *ngFor on the following element
<div class="col-lg-3 col-md-6 col-sm-6" *ngFor="let note of notes">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6" *ngFor="let note of notes">
<div class="card-header" data-background-color="blue">
<i class="material-icons">store</i>
</div>
<div class="card-content">
<p class="category">{{note.name}} </p>
</div>
<div class="card-footer">
<div class="stats">
<button class="button-save"><i class="fa fa-eye"></i></button>
<button class="button-trash"><i class="fa fa-trash"></i></button>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6" *ngFor="let note of notes">
<div class="card-header" data-background-color="blue">
<i class="material-icons">store</i>
</div>
<div class="card-content">
<p class="category">{{note.name}} </p>
</div>
<div class="card-footer">
<div class="stats">
<button class="button-save"><i class="fa fa-eye"></i></button>
<button class="button-trash"><i class="fa fa-trash"></i></button>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6" *ngFor="let note of notes">
<div class="card-header" data-background-color="blue">
<i class="material-icons">store</i>
</div>
<div class="card-content">
<p class="category">{{note.name}} </p>
</div>
<div class="card-footer">
<div class="stats">
<button class="button-save"><i class="fa fa-eye"></i></button>
<button class="button-trash"><i class="fa fa-trash"></i></button>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6" *ngFor="let note of notes">
<div class="card-header" data-background-color="blue">
<i class="material-icons">store</i>
</div>
<div class="card-content">
<p class="category">{{note.name}} </p>
</div>
<div class="card-footer">
<div class="stats">
<button class="button-save"><i class="fa fa-eye"></i></button>
<button class="button-trash"><i class="fa fa-trash"></i></button>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6" *ngFor="let note of notes">
<div class="card-header" data-background-color="blue">
<i class="material-icons">store</i>
</div>
<div class="card-content">
<p class="category">{{note.name}} </p>
</div>
<div class="card-footer">
<div class="stats">
<button class="button-save"><i class="fa fa-eye"></i></button>
<button class="button-trash"><i class="fa fa-trash"></i></button>
</div>
</div>
</div>
</div>
</div>
You need to modify the Bopotstrap grid structure to incorporate 5 columns in a row. Try using the following structure, you will be able to get what you want.
.col.col-2 {
flex: 0 0 20%;
max-width: 20%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col col-2">
1 columns
</div>
<div class="col col-2">
2 columns
</div>
<div class="col col-2">
3 columns
</div>
<div class="col col-2">
4 columns
</div>
<div class="col col-2">
5 columns
</div>
<div class="col col-2">
6 columns
</div>
</div>
</div>
I'm trying to set my navbar to be on top whenever I scroll, but when i use position: fixed; the navbar disappears. Here's my html and css respectively.
<nav>
<div class="navbar">
<button class="btn button"> Home <A href="#"> </button>
<button class="btn button"> About Me </button>
<button class="btn button"> Portfolio</button>
<button class="btn button"> Contact Me </button>
</div>
</nav>
<div class="background-img">
</div>
<div class="portfolio">
<img src="https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwjP5v6bzfDWAhXEto8KHc_gBDoQjRwIBw&url=http%3A%2F%2Fhomequity.us%2Fdesignhouse%2Fbungalow_house_design_malaysia.html&psig=AOvVaw3hVzFHYi5ropXAhSrn1oIx&ust=1508087256948636">
</div>
The CSS
nav{
background-color: transparent;
position: fixed;
}
.btn{
background-color: Black;
color: white;
font-size: 30px;
padding: 10px;
margin: 10px 193px 10px 0px;
}
.background-img {
background: url(https://images.unsplash.com/photo-1497215842964-222b430dc094?dpr=1&auto=compress,format&fit=crop&w=2100&h=&q=80&cs=tinysrgb&crop=);
background-size: 100% 100%;
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
position: relative;
}
`
You still need to define it's fixed position as top:0.
nav{
background-color: transparent;
position: fixed;
top:0;
width:100%;
z-index:15;
}
The reason is z-index value. And one more thing you probably forget to close the a tag in nav section.
nav{
background-color: transparent;
position: fixed;
z-index:99999; /* add z-index value maximum */
}
.btn{
background-color: Black;
color: white;
font-size: 30px;
padding: 10px;
margin: 10px 193px 10px 0px;
}
.background-img {
background: url(https://images.unsplash.com/photo-1497215842964-222b430dc094?dpr=1&auto=compress,format&fit=crop&w=2100&h=&q=80&cs=tinysrgb&crop=);
background-size: 100% 100%;
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
position: relative;
}
<nav>
<div class="navbar">
<button class="btn button"> Home </button><!-- You need to close the a tag -->
<button class="btn button"> About Me </button>
<button class="btn button"> Portfolio</button>
<button class="btn button"> Contact Me </button>
</div>
</nav>
<div class="background-img">
</div>
<div class="portfolio">
<img src="https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwjP5v6bzfDWAhXEto8KHc_gBDoQjRwIBw&url=http%3A%2F%2Fhomequity.us%2Fdesignhouse%2Fbungalow_house_design_malaysia.html&psig=AOvVaw3hVzFHYi5ropXAhSrn1oIx&ust=1508087256948636">
</div>
This is my div structure. I'm having difficulties achieving the following.
How can I make all 3 buttons (Sub 1, Sub 2, Sub 3) visible and make the height of DIV 1 to the height of its children buttons?
Fiddle
html:
.sub {
position: relative;
background-color: lime;
}
.itmHolder {
position: relative;
}
.Buttons {
display: inline-block;
padding: 12px 8px;
}
.itmHolder:nth-child(2),
.itmHolder:nth-child(3) {
position: absolute;
top: 0;
}
.og {
margin-top: 15px;
position: relative;
text-align: center;
}
<div class="og">
<div class="itmHolder">
<div class="sub">DIV 1</div>
<div class="sub">DIV 2</div>
<div class="sub">
<button type="button" class="Buttons">Sub 1</button>
<button type="button" class="Buttons">Sub 2</button>
<button type="button" class="Buttons">Sub 3</button>
</div>
</div>
<div class="itmHolder">
<button type="button" class="normalBtn">Button</button>
</div>
</div>
Expected output:
well I removed obsolete elements and css definitions and now it looks exactly like the image:
.sub {
position: relative;
background-color: lime;
overflow: hidden;
}
.itmHolder {
position: relative;
}
.Buttons {
display: inline-block;
padding: 12px 8px;
}
.og {
margin-top: 15px;
position: relative;
text-align: center;
}
<div class="row">
<div class="og">
<div class="itmHolder">
<div class="sub">
<button type="button" class="Buttons">Sub 1</button>
<button type="button" class="Buttons">Sub 2</button>
<button type="button" class="Buttons">Sub 3</button>
</div>
</div>
<div class="itmHolder">
<button type="button" class="normalBtn">Button</button>
</div>
</div>
</div>
fiddle
You just have to change your css a little:
.Buttons{
display: inline-block;
padding: 1px 8px;
height: 100%;
line-height: 100%;
}
.itmHolder > :nth-child(2) , .itmHolder > :nth-child(3){
position: absolute;
top:0;
width: 100%;
}
https://jsfiddle.net/t5au23ra/7/
I would have made somethin like that
.wrapper {
width: 500px;
text-align: center;
margin: 0 auto;
}
.subs {
background-color: green;
}
.subs button {
height: 30px;
}
<div class="wrapper">
<div class="subs">
<button>Sub1</button>
<button>Sub2</button>
<button>Sub3</button>
</div>
<button>Button</button>
</div>
Your problem and your markup is not understandable. Don't know why you have used pos:abs property. If you want as in your figure then, you don't need that much codes. Look at this fiddle .
HTML
<div class="make-center">
<div class="sub">
<button type="button" class="Buttons">Sub 1</button>
<button type="button" class="Buttons">Sub 2</button>
<button type="button" class="Buttons">Sub 3</button>
</div>
<button type="button" class="normalBtn">Button</button>
</div>
CSS
.make-center {
text-align: center;
padding: 20px 0;
}
.sub {
background: lime;
}
.normalBtn,
.Buttons {
padding: 10px;
border: 1px solid gray;
}
The spacing between buttons are because of default button border ( browser's default rendering ).
i hope you want like this type of menu
<ul class="itmHolder">
<li>DIV 1</li>
<li>DIV 2
<ul class="sub">
<li> <button type="button" class="Buttons">Sub 1</button></li>
<li> <button type="button" class="Buttons">Sub 2</button></li><li>
<button type="button" class="Buttons">Sub 3</button></li>
<button type="button" class="normalBtn">Button</button>
</ul>
</li>
</ul>
css
.itmHolder{ margin:0; padding:0;}
.itmHolder li{ display:inline-block; position:relative;}
.itmHolder li .sub{display:none; height:50px; background:lime; width:100%; position:absolute; width:500px;}
.itmHolder li:hover .sub {display:block;}
.itmHolder li:hover .sub button{height:50px; margin:0 2px;}
.normalBtn{top:50px;margin-left:250px;position:absolute}
use this.
Remove this from your css: Demo
.itmHolder :nth-child(2) , .itmHolder :nth-child(3){
position: absolute;
top:0;
}
As per your expected output. This could help you.
HTML
<div>
<div class="parent">
<button>SUB1</button>
<button>SUB2</button>
<button>SUB3</button>
</div>
<div>
<button>Button</button>
</div>
</div>
CSS
.parent {
background-color: lime;
}
div{
text-align: center;
}
.parent button{
margin: 0;
padding:0;
height: 55px;
width: 50px;
}
I have a website where I want a header and a sidebar.
My intended functionality is that the sidebar extends to the bottom of the page, which it does. However, it has content that extends beyond the viewport, I'm guessing because the .menu is sized to 100% of the entire body container, yet is pushed down because of the header.
How do I make it such that the menu only extends all the way down the viewport?
<body>
<div class="container-fluid">
<header class='row'>
<div class="col-md-1">
<a href="#" class="menu-icon-link">
<i class="glyphicon glyphicon-list"></i>
</a>
</div>
<div class="input-group col-md-4 col-md-offset-4">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="glyphicon glyphicon-search"></i></button>
</span>
</div>
</header>
<div class="row menu-container">
<div class="menu col-md-2">
Lorem ipsum...
</div>
</div>
</div>
</body>
My CSS:
html, body{
height: 100%;
margin: 0;
padding: 0;
}
body {
position: relative;
padding: 3.5em 0 0 0;
box-sizing: border-box;
}
.menu-container {
display: block;
}
.menu {
position: fixed;
top: 3.5em;
padding: 1em;
background: #A9E2AD;
height: 100%;
overflow-y: scroll;
}
.glyphicon-list {
font-size: 1.5em;
color: #FFF;
}
header {
background: #50af4c;
color: #fff;
position: fixed;
top: 0;
width: 100%;
padding: 0.5em 1em;
display: block;
}
You don't need to use an explicit height, you can use positioning for what you want.
.menu {
position: fixed;
top: 3.5em;
bottom: 0; //add this
padding: 1em;
background: #A9E2AD;
//height: 100%;
overflow-y: scroll;
}