I've added a footer onto a chat app i'm trying to make with socketio.
The issue I've got is that the markdown input group is not stretching to the page.
If i take out position: fixed; from the "footerr" class then it stretches to fit, but is no longer at the bottom of the page.
Ideally the footer will not go over the sidebar, will auto responsivly resize, aligned to the right and fit the whole "main" section of the page.
Can anyone help?
https://jsfiddle.net/fxyhgz7t/
<!DOCTYPE html>
<html lang="en">
<link href="https://fonts.googleapis.com/css2?family=Catamaran:wght#100&display=swap" rel="stylesheet">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/c551403873.js" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"
integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I=" crossorigin="anonymous"></script>
<!-- Custom styles for this template -->
<link href="../static/css/simple-sidebar.css" rel="stylesheet">
</head>
<body>
<div class="d-flex mainpage" id="wrapper">
<!-- Sidebar -->
<div class="sidebar border-right" id="sidebar-wrapper">
<div class="sidebar-heading font-weight-bolder text-center ">Basic Chat App</div>
<div class="list-group list-group-flush">
Dashboard
Shortcuts
Overview
Events
Profile
Status
</div>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<nav class="navbar navbar-expand-lg navbar-light topbar border-bottom">
<div class="row justify-content-between w-100">
<div class="col-4">
<button class="btn togglebutton" id="menu-toggle">Rooms</button>
</div>
<div class="col-4">
<div class="text-right h2">Main Room</div>
</div>
</div>
</nav>
<!--Messages ----->
<div class="container-fluid mainpage">
<div class="row mx-1 my-2 align-top">
<div class="col-md-auto text-left">
Lewis
</div>
<div class="col-md text-left">
<div class="row justify-content-start">
<div class="col-md-auto bg-warning text-right ml-2 py-1 message_local">
Test message from me
</div>
</div>
</div>
</div>
<div class="row mx-1 my-2 align-top">
<div class="col-md-auto text-right order-12">
Someone Else
</div>
<div class="col-md text-right order-5">
<div class="row justify-content-end">
<div class="col-md-auto text-right mr-2 py-1 message_remote">
Test message from another person
</div>
</div>
</div>
</div>
</div>
<footer class="footerr">
<div class="input-group mx-2 my-3">
<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
</footer>
</div> <!-- /#page-content-wrapper -->
</div>
<!-- Footer -->
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>
You just need to add width: 100%; to .footerr
/*!
* Start Bootstrap - Simple Sidebar (https://startbootstrap.com/templates/simple-sidebar)
* Copyright 2013-2020 Start Bootstrap
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-simple-sidebar/blob/master/LICENSE)
*/
.togglebutton{
color:#FAFAFF;
background-color: #B0B5B3;
}
.sidebar{
background-color: #353B3C!important;
color: #C6C7C4;
}
.topbar{
background-color: #22577A!important;
color: #EEF0F2;
}
.mainpage{
background-color: #EEF0F2!important;
}
.message_remote{
border-top-left-radius: 10px !important;
border-top-right-radius: 10px !important;
border-bottom-left-radius: 10px !important;
background-color: #A2999E!important;
}
.message_local{
border-top-left-radius: 10px !important;
border-top-right-radius: 10px !important;
border-bottom-right-radius: 10px !important;
background-color: #22577A!important;
color:#FAFAFF;
}
.tooltip {
display:inline-block;
position:relative;
border-bottom:1px dotted #666;
text-align:left;
}
.tooltip h3 {margin:12px 0;}
.tooltip .right {
min-width:200px;
max-width:400px;
top:50%;
left:100%;
margin-left:20px;
transform:translate(0, -50%);
padding:0;
color:#EEEEEE;
background-color:#444444;
font-weight:normal;
font-size:13px;
border-radius:8px;
position:absolute;
z-index:99999999;
box-sizing:border-box;
box-shadow:0 1px 8px rgba(0,0,0,0.5);
visibility:hidden; opacity:0; transition:opacity 0.8s;
}
.tooltip:hover .right {
visibility:visible; opacity:1;
}
.tooltip .right img {
width:400px;
border-radius:8px 8px 0 0;
}
.tooltip .text-content {
padding:10px 20px;
}
.tooltip .right i {
position: absolute;
top: 50%;
right: 100%;
margin-top: -12px;
width: 12px;
}
html, body {
font-family: 'Catamaran', sans-serif;
}
#wrapper {
overflow-x: hidden;
}
#sticky-footer {
flex-shrink: none;
}
.footerr {
position: fixed;
bottom: 0;
z-index: 1030;
width: 100%;
}
#sidebar-wrapper {
min-height: 100vh;
margin-left: -15rem;
-webkit-transition: margin .25s ease-out;
-moz-transition: margin .25s ease-out;
-o-transition: margin .25s ease-out;
transition: margin .25s ease-out;
}
#sidebar-wrapper .sidebar-heading {
padding: 0.875rem 1.25rem;
font-size: 1.2rem;
}
#sidebar-wrapper .list-group {
width: 15rem;
}
#page-content-wrapper {
min-width: 100vw;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: 0;
}
#media (min-width: 768px) {
#sidebar-wrapper {
margin-left: 0;
}
#page-content-wrapper {
min-width: 0;
width: 100%;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: -15rem;
}
}
<!DOCTYPE html>
<html lang="en">
<link href="https://fonts.googleapis.com/css2?family=Catamaran:wght#100&display=swap" rel="stylesheet">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/c551403873.js" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"
integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I=" crossorigin="anonymous"></script>
<!-- Custom styles for this template -->
<link href="../static/css/simple-sidebar.css" rel="stylesheet">
</head>
<body>
<div class="d-flex mainpage" id="wrapper">
<!-- Sidebar -->
<div class="sidebar border-right" id="sidebar-wrapper">
<div class="sidebar-heading font-weight-bolder text-center ">Basic Chat App</div>
<div class="list-group list-group-flush">
Dashboard
Shortcuts
Overview
Events
Profile
Status
</div>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<nav class="navbar navbar-expand-lg navbar-light topbar border-bottom">
<div class="row justify-content-between w-100">
<div class="col-4">
<button class="btn togglebutton" id="menu-toggle">Rooms</button>
</div>
<div class="col-4">
<div class="text-right h2">Main Room</div>
</div>
</div>
</nav>
<!--Messages ----->
<div class="container-fluid mainpage">
<div class="row mx-1 my-2 align-top">
<div class="col-md-auto text-left">
Lewis
</div>
<div class="col-md text-left">
<div class="row justify-content-start">
<div class="col-md-auto bg-warning text-right ml-2 py-1 message_local">
Test message from me
</div>
</div>
</div>
</div>
<div class="row mx-1 my-2 align-top">
<div class="col-md-auto text-right order-12">
Someone Else
</div>
<div class="col-md text-right order-5">
<div class="row justify-content-end">
<div class="col-md-auto text-right mr-2 py-1 message_remote">
Test message from another person
</div>
</div>
</div>
</div>
</div>
<footer class="footerr">
<div class="input-group mx-2 my-3">
<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
</footer>
</div> <!-- /#page-content-wrapper -->
</div>
<!-- Footer -->
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>
#Jaocampoo's answer should work. A better solution would be adding a container-fluid class to the footer, while maintaining the .footerr class.
Related
I have this simple layout. Not sure why the media screen for mobile overwrite my main css. At laptop size, it shows orange color and at mobile size is show yellow color.
/* main container */
#resume {
padding: 1rem;
margin-top: 2rem;
background-color:silver;
}
.parent {
display: flex;
flex-flow: column nowrap;
background-color:yellow;
}
/****************
* PHONE
****************/
#media screen and (min-width: 460px) {
#resume {
width: 95%;
margin: 0px auto;
}
.display {
max-width: 180px;
}
.child {
flex: 100%;
background-color:orange;
}
.topper {
order: -1;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
<title>Steve</title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="resume">
<div class="parent">
<div class="child wider">
<header class="clear" id="header">
<div>
<h1 class="name">Steve</h1>
<h2 class="label">Programmer</h2>
</div><span class="location"><span class="address">2712 Broadway St,</span> <span class="postalCode">CA 94115,</span> <span class="city">San Francisco,</span> <span class="region">California</span> <span class="countryCode">US</span></span>
<div id="contact">
<div class="website">
<span class="fa fa-external-link"></span> http://richardhendricks.com
</div>
<div class="email">
<span class="fa fa-envelope-o"></span> richard#valley.com
</div>
<div class="phone">
<span class="fa fa-mobile"></span> (912) 555-4321
</div>
</div>
<div id="profiles">
<div class="item">
<div class="username">
<span class="fa fa-twitter twitter social"></span> <span>neutralthoughts</span>
</div>
</div>
<div class="item">
<div class="username">
<span class="fa fa-soundcloud soundcloud social"></span> <span class="url">dandymusicnl</span>
</div>
</div>
</div>
</header>
</div>
<div class="child topper">
2
</div>
</div>
</div>
</body>
</html>
I think CSS for mobile screen shall set MAX-width instead of min-width. Try:
#media screen and (max-width: 460px)
The above CSS applies when the screen is narrower than 460px.
Because both your code works on desktop and you media query is under in the file so it's executed after
Try this one
/* main container */
/****************
* PHONE
****************/
#resume {
width: 95%;
margin: 0px auto;
}
.display {
max-width: 180px;
}
.child {
flex: 100%;
background-color:orange;
}
.topper {
order: -1;
}
#media screen and (max-width: 460px) {
#resume {
padding: 1rem;
margin-top: 2rem;
background-color: silver;
}
.parent {
display: flex;
flex-flow: column nowrap;
background-color: yellow;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
<title>Steve</title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="resume">
<div class="parent">
<div class="child wider">
<header class="clear" id="header">
<div>
<h1 class="name">Steve</h1>
<h2 class="label">Programmer</h2>
</div><span class="location"><span class="address">2712 Broadway St,</span> <span class="postalCode">CA 94115,</span> <span class="city">San Francisco,</span> <span class="region">California</span> <span class="countryCode">US</span></span>
<div id="contact">
<div class="website">
<span class="fa fa-external-link"></span> http://richardhendricks.com
</div>
<div class="email">
<span class="fa fa-envelope-o"></span> richard#valley.com
</div>
<div class="phone">
<span class="fa fa-mobile"></span> (912) 555-4321
</div>
</div>
<div id="profiles">
<div class="item">
<div class="username">
<span class="fa fa-twitter twitter social"></span> <span>neutralthoughts</span>
</div>
</div>
<div class="item">
<div class="username">
<span class="fa fa-soundcloud soundcloud social"></span> <span class="url">dandymusicnl</span>
</div>
</div>
</div>
</header>
</div>
<div class="child topper">
2
</div>
</div>
</div>
</body>
</html>
I am a bit new to bootstrap and would like some guidance regarding how to use "d-flex" to align the content center. I tried applying "d-flex justify-content-center" like what the documentation says but the alignments still does not work. Is there anything I am doing wrong? I attached an image below; looking for centered spacing after the "Testing!" so the pictures are more aligned in the center from top to bottom. I believe I got the horizontal alignment correct.
<div class="container">
<div class="row ">
<div class="col text-center">
<h1>Testing!</h1>
</div>
</div>
<div class="row body text-center">
<div class="col-6">
<h2>Shop Collections</h2>
<img class="img-fluid"src="images/rx782alloy.jpg" >
</div>
<div class="col-6">
<h2>Catalog</h2>
<img class="img-fluid" src="images/batmanbeyond.jpg" >
</div>
</div>
</div>
```[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/xz54x.png
Please check out this fiddle. I believe this will answer your question. I have given you a guideline that will clarify your concept regarding d-flex. The design is responsive, change the view to see the result.
https://jsfiddle.net/hilalrehan/9vyd6Lu2/140/
.adjust {
padding-top: 30px;
position: relative;
}
.text-area{
min-height: 139px;
}
.box {
padding: 0.2rem;
flex: 0 0 20rem;
}
.set{
flex-flow: wrap;
justify-content: center;
min-width: 20rem;
}
#media (min-width: 576px) {
.set {
max-width: none;
}
.box {
padding: 0rem;
}
}
#media (min-width: 1200px) {
.set {
justify-content: flex-end;
}
.box {
flex: 0 0 8rem;
}
}
<html>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-lg-12 order-2 order-lg-6 col-xl-6">
<h2 class="display-2"> Testing </h2>
<div class="d-flex set mx-auto ">
<div class="box">
<div class="text-area display-4 text-center text-white bg-success"> Shop Collections </div>
<div class="img bg-success"> <img src="https://i.stack.imgur.com/xz54x.png" class="img-fluid"> </div>
</div>
<div class="box">
<div class="text-area display-4 text-center adjust-text black bg-warning"> <div class="adjust"> Catalog</div> </div>
<div class="img bg-white "> <img src="https://i.stack.imgur.com/xz54x.png" class="img-fluid" > </div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</html>
Being upfront, I am terrible at CSS. My problem is I'm trying to center an image in a Bootstrap modal box that is centered on mobile and desktop and for the life of me, can't get it to work. How can I do this?
Thanks in advance!
This is the image
Here is one way of doing what you are looking for:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal with a centered image</h2>
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://picsum.photos/id/7/250/150" width="250" height="150">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
EDIT Adding a snippet to answer the comment about how can a flipcard instead of an image be centered.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="container">
<h2>Modal with a centered flipcard</h2>
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="flip-card" style="margin-left: auto; margin-right: auto;">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://picsum.photos/id/1005/300/300" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have an issue where the ng-scope css class is causing issues with my UI.
Essentially I want my toDoListRow div to have a height of 70%.
But this will not apply unless I define the ng-scope class to have a height of 100%, the issue with that is it then causes unexpected behaviour further down the line whenever a new scope is applied.
I have tried setting the ng-scope to have a min height instead of just height, but this still means my toDoListRow has no height at all.
See first image for what it should look like.
Second image is what it looks like when I don't apply any height to the ng-scope class or use min-height:100%.
index.html
<!DOCTYPE html>
<html lang="en" ng-app="ToDoListApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>To Do App</title>
<script src="angular/angular.min.js"></script>
<script src="app.module.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="app/assets/css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Acme&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/4c765e5630.js" crossorigin="anonymous"></script>
</head>
<body>
<div ng-controller="homePageCtrl">
<div class="row header">
<div class="col-12">
<h1>DOINGO</h1>
<p>0 Open Tasks</p>
</div>
</div>
<div class="row toDoListRow">
<div class="row newItem" ng-show="toDoList.length > 1" ng-repeat="item in toDoList">
<div class="col-2">
<button class="itemComplete btn"><i class="far fa-check-circle fa-2x"></i></button>
</div>
<div class="col-8">
<h4>{{item.project}}</h4>
<p>{{item.task}}.</p>
</div>
<div class="col-2">
<button class="btn deleteItem"><i class="far fa-times-circle fa-2x"></i></button>
</div>
</div>
</div>
<div class="row addItemRow">
<div class="col-12 text-center">
<button type="button" class="btn btn addItem" data-toggle="modal" data-target="#newItemModal">
<i class="fas fa-plus-circle fa-3x"></i>
</button>
<div class="modal fade" id="newItemModal" tabindex="-1" role="dialog" aria-labelledby="newItemModal"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title col-11 text-center" id="newItemModal">Add new item</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form ng-submit="addNewToDoTask()">
<div class="form-group">
<label for="projectInput"><strong>Project</strong></label>
<input type="text" class="form-control" id="projectInput"
ng-model="projectInput" placeholder="Enter the name of the project">
</div>
<div class="form-group">
<label for="taskInput"><strong>Task</strong></label>
<input type="text" class="form-control" id="taskInput" ng-model="taskInput"
placeholder="Enter your task details">
</div>
<button type="submit" class="btn modalSubmitButton">Add</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
</body>
</html>
styles.css
html,
body {
height: 100%;
width: 100%;
}
.row {
margin: 0;
}
.ng-scope {
min-height: 100%;
}
.header {
background-color: rgb(35, 35, 80);
color: white;
height: 20%;
width: 100%;
text-align: center;
padding-top: 2.5rem;
}
h1 {
font-family: 'Acme', sans-serif;
margin: 0;
}
.toDoListRow {
height: 70%;
width: 100%;
background-color: rgb(252, 70, 100);
}
.newItem {
width: 100%;
margin-top: 2rem;
}
.addItemRow {
height: 10%;
background-color: rgb(252, 70, 100);
}
button {
display: inline-block;
}
.modal-title {
text-align: center;
color: white;
}
.modal-header {
background-color: rgb(35, 35, 80);
}
.modal-body {
background-color: rgb(252, 70, 100);
}
.modalSubmitButton {
background-color: rgb(35, 35, 80);
color: white;
}
Don't use the ng-scope class for that purpose.
Instead define your own classes:
̶.̶n̶g̶-̶s̶c̶o̶p̶e̶ ̶{̶
.toDoList {
height: 100%;
}
.toDoListRow {
height: 70%;
width: 100%;
background-color: rgb(252, 70, 100);
}
And use it in the template:
<div ng-controller="homePageCtrl" class="toDoList">
<div class="row header">
<div class="col-12">
<h1>DOINGO</h1>
<p>0 Open Tasks</p>
</div>
</div>
<div class="row toDoListRow">
<div class="row newItem" ng-repeat="item in toDoList"
ng-show="toDoList.length > 1" >
<div class="col-2">
<button class="itemComplete btn">
<i class="far fa-check-circle fa-2x"></i>
</button>
</div>
This will make your CSS and HTML easier to understand, debug, test, and maintain.
New AngularJS developers often do not realize that ng-repeat, ng-switch, ng-view, ng-include and ng-if all create new child scopes, so the problem often shows up when these directives are involved.1
I want to create a dashboard from scratch for learning purposes using Bootstrap 3.3.7. I have problem with the left hand menu. I want it to occupy the whole area it gets (col-lg-1 column and 100% height). My problem is that the min-height:100% with height: auto doesn't work, but min-height:xxx px works well.
I saw other posts here saying that min-height:100% should work.
What I'm doing wrong?
Here is the plunker.
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<main style="margin-top: 0px; padding-top: 0px; padding-bottom: 0px;">
<div class="container-fluid padding-left-zero padding-right-zero">
<div class="container-fluid padding-left-zero padding-right-zero">
<div style="margin-bottom: -20px;">
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
<div class=" container-fluid row">
<div class="pull-left">
<a class="navbar-brand" href="/">Dashboard</a>
</div>
<div style="height: 50px; padding: 15px;" class="pull-right">
<select>
<option value="module">value</option>
</select>
</div>
</div>
</nav>
</div>
</div>
<div class="row container-fluid padding-left-zero padding-right-zero">
<!-- code of lenfthandmenu -->
<!-- <div class="col-lg-1 pull-left navbar-inverse fill">
<div ui-view="leftHandMenu"></div>
</div>-->
<div class="col-lg-1 pull-left navbar-inverse fill2">
<div ui-view="leftHandMenu"></div>
</div>
<div class="col-lg-11 pull-right">
<div ui-view="mainContent"></div>
</div>
</div>
<div>
<div class="navbar navbar-inverse navbar-fixed-bottom">Navbar bottom</div>
</div>
</div>
</main>
</body>
</html>
Css:
/* Styles go here */
body {
padding-top: 50px;
}
.padding-left-zero {
padding-left: 0px;
}
.padding-right-zero {
padding-right: 0px;
}
li {
list-style: none;
}
.silver-text {
color: silver;
}
.min-width-100-percent {
min-width: 100%;
}
.fill {
min-height: 100%;
height: auto;
}
.fill2 {
min-height: 300px;
height: auto;
}
Apply absolute position property and height as 100% like below.
.fill2 {
position:absolute;
height: 100%;
}
DEMO