I'm using Bootstrap Card, and in the footer, I have two buttons. What I need to do is align one button in the absolute center and another smaller button on the left side of the footer. And both buttons should be vertically middle aligned.
Here is my code:
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div class="card-footer">
<div class="btn-wrapper text-center">
<a class="btn btn-secondary text-dark btn-sm">Remove</a>
<a class="btn btn-warning" style="">Next</a>
</div>
</div>
</div>
This aligns both cards to the center. But I need the Next button in center while the Remove button to the left. How do I do that?
Here is the jsbin for it: https://jsbin.com/vesobayuci/1/edit?html,js,output
Check the updated JSBIN
.remove-btn {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.btn-wrapper {
position: relative;
}
Please check Demo
https://output.jsbin.com/cezegetufe
.btn-wrapper .btn-secondary {
line-height: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Card Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.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.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Card Header and Footer</h2>
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div class="card-footer">
<div class="btn-wrapper text-center d-flex justify-content-between">
<a class="btn btn-secondary btn-sm text-white d-flex align-items-center">Remove</a>
<a class="btn btn-warning" style="">Next</a>
</div>
</div>
</div>
</div>
</body>
</html>
You can absolutely position them like so
.card-footer .btn-wrapper{
position: relative;
min-height: 40px;
}
.card-footer .btn-wrapper .btn{
position: absolute;
top: 50%;
}
.card-footer .btn-wrapper .btn-warning{
left: 50%;
transform: translate(-50%, -50%);
}
.card-footer .btn-wrapper .btn-secondary{
left: 0;
transform: translate(0, -50%);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
<h2>Card Header and Footer</h2>
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div class="card-footer">
<div class="btn-wrapper text-center">
<a class="btn btn-secondary pull-left text-dark btn-sm">Remove</a>
<a class="btn btn-warning" style="">Next</a>
</div>
</div>
</div>
</div>
You can do this using transform property and Bootstrap 4 classes
.btn-warning {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Card Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Card Header and Footer</h2>
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div class="card-footer">
<div class="btn-wrapper position-relative">
<a class="btn btn-secondary text-dark btn-sm">Remove</a>
<a class="btn btn-warning position-absolute">Next</a>
</div>
</div>
</div>
</div>
</body>
</html>
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'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.
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've tried to everything to vertically center my h1 and h3 tag in Foundation 6. I've tried the transform translate, flexbox, and tried multiple examples here on stack over flow, and nothing works. When I use absolute positioning to center the content the, the headings get in the way of the top-bar nav on smaller screens, id there anyway to fix this issue, and Could some give me a hand with this? The h1 tag, and the h3 tag are located in line 48, and 49 of my codepen.
Codepen link
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="off-canvas-wrapper">
<div class="off-canvas position-left" id="offCanvas" data-off-canvas data-transition="overlap">
<!-- Close button -->
<button class="close-button" aria-label="Close menu" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
<ul class="vertical menu">
<li>Home</li>
<li>About</li>
<li>References</li>
<li>Contact</li>
</ul>
</div><!-- off-canvas menu -->
<div class="off-canvas-content" data-off-canvas-content>
<!-- Your page content lives here -->
<div class="hero-image">
<div class="expanded header-intro row">
<button type="button" class="button float-right show-for-medium" data-toggle="offCanvas">Menu</button><!-- Button to open off-canvas menu -->
<div class="title-bar" data-responsive-toggle="menu" data-hide-for="medium"><!--top bar navigation -->
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar show-for-small-only" id="menu">
<div class="top-bar-left">
<ul class="dropdown vertical menu" data-dropdown-menu>
<li class="menu-text">Foundation Framework</li>
<li>Home</li>
<li>About</li>
<li>Reference</li>
<li>About</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="small-12 text-center columns">
<h1>Foundation</h1> <!-- CAN'T VERTICALLY CENTER THIS TAG -->
<h3>Foundation For Sites</h3> <!-- CAN'T VERTICALLY CENTER THIS TAG -->
</div>
</div>
</div><!-- Eno of hero-image section -->
</div><!-- off-canvas-content-->
</div><!-- off-canvas wrapper-->
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>
you can use flexbox; you need to set a height to your flexbox container to see the centered title
here an example : https://codepen.io/anon/pen/YQPPaM
$(document).foundation();
.hero-image {
background: url(https://www.freewebheaders.com/wordpress/wp-content/gallery/mountains-snow/mountains-snow-header-7050.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
padding-bottom: 25%;
}
.container{
height : 100vh;
display: flex;
flex-direction : column;
justify-content : center;
align-items : center;
}
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="off-canvas-wrapper">
<div class="off-canvas position-left" id="offCanvas" data-off-canvas data-transition="overlap">
<!-- Close button -->
<button class="close-button" aria-label="Close menu" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
<ul class="vertical menu">
<li>Home</li>
<li>About</li>
<li>References</li>
<li>Contact</li>
</ul>
</div><!-- off-canvas menu -->
<div class="off-canvas-content" data-off-canvas-content>
<!-- Your page content lives here -->
<div class="hero-image">
<div class="expanded header-intro row">
<button type="button" class="button float-right show-for-medium" data-toggle="offCanvas">Menu</button><!-- Button to open off-canvas menu -->
<div class="title-bar" data-responsive-toggle="menu" data-hide-for="medium"><!--top bar navigation -->
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar show-for-small-only" id="menu">
<div class="top-bar-left">
<ul class="dropdown vertical menu" data-dropdown-menu>
<li class="menu-text">Foundation Framework</li>
<li>Home</li>
<li>About</li>
<li>Reference</li>
<li>About</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="small-12 text-center columns container">
<h1>Foundation</h1> <!-- like the h1 centered vertically -->
<h3>Foundation For Sites</h3> <!-- like to have the h3 centered vertically -->
</div>
</div>
</div><!-- Eno of hero-image section -->
</div><!-- off-canvas-content-->
</div><!-- off-canvas wrapper-->
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>
try this
h1 {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h3 {
margin: 0;
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
}
Reference: w3schools
I suppose you're using flex-grid, so you can just add align-middle class to you row. This will add align-items: center; attribute, and align your columns' content vertically in the center.
.row {
max-width: 960px;
margin-left: auto;
margin-right: auto;
display: flex;
flex-flow: row wrap;
height: 200px;
}
.align-middle {
align-items: center;
}
.column, .columns {
flex: 1 1 0px;
padding-left: 20px;
padding-right: 20px;
min-width: initial;
}
<div class="row align-middle">
<div class="small-12 text-center columns">
<h1>Foundation</h1> <!-- CAN'T VERTICALLY CENTER THIS TAG -->
<h3>Foundation For Sites</h3> <!-- CAN'T VERTICALLY CENTER THIS TAG -->
</div>
</div>