I'm using bootstrap's navbar and it shows perfectly on a large screen, but when it gets to mobile, it disappears completely.
I've tried #media and changing the sizes but it's not really working.
**css**
#navbar {display: inline-block; background-color: #ffffff; color: #FFFFFF;}
#navbar a:link {outline: 0;}
#navbar a:visited {color: #101010; margin:2px; padding: 5px;}
#navbar a:active,
#navbar a:hover {background-color: #f5f5f5; color: #C21315;text-decoration: none; outline: 0;}
/* NAVIGATION BAR LINKS */
#navbar li a { display: inline-block; overflow:visible; }
#navbar li { display: inline-block; overflow:visible; }
#media screen and (max-width: 600px) {
#navbar {display: block;}
}
**Bootstrap navbar**
<nav id="navbar" class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle-"collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only"> Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a style=" font-size: 1.1em; padding-left: 25px; padding-right: 35px;" href="#"> <span class="glyphicon glyphicon-home" aria-hidden="true"></span><span class="sr-only">Home</span></a></li>
<li class="dropdown">
<a style=" font-size: 1.3em; padding-left: 25px; padding-right: 35px;" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
About </a>
<ul class="dropdown-menu" >
<li>Our Library</li>
<li>Action2</li>
<li>Action3</li>
<li>Action</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Does the space collapse or does it just look hidden?
I can't replicate your problem. Works fine on my machine. Can you paste the whole HTML file here? (including the javascript and css imports). If you are not using the cdn (you have your .js and .css files downloaded and linked from some folder, just write the version of these imported files)
It has been solved (somewhat)
I needed to add .navbar-toggle and .navbar-toggle .icon-barin the css
Related
I'm working on a Responsive Mega Menu and I can't seem to get it to open the mobile toggler/display nav links.
I've looked into a few different fixes but as a beginner (still in school) they're outside of my scope of understanding.
A) One Solution suggested a conflicting issue where they needed to !important a display.
B) The other solution I found suggested that the ID/Selectors weren't targeting properly. (I think this might be my issue... but I'm not sure what ID/Selectors would be causing the problem as I've tried playing around with them and not really got anywhere.)
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="section">
<div class="container">
<div class="row">
<div class="col-12">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<img src="/images/logonobg2.png" alt="Musical Logo" width="200" aria-hidden="true">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#dropdown01" aria-controls="navbars" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown megamenu-li">
<a class="nav-link" href="" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">About</a>
<div class="dropdown-menu megamenu" aria-labelledby="dropdown01">
<div class="row">
<div class="col-sm-6 col-lg-3">
<h5>Musical Soloists</h5>
<a class="dropdown-item" href="#">About Us</a>
<a class="dropdown-item" href="#">Charity Info</a>
<a class="dropdown-item" href="#">Artistic Director</a>
<a class="dropdown-item" href="#">Board of Directors</a>
</div>
<div class="col-sm-6 col-lg-3">
<h5>More Links</h5>
<a class="dropdown-item" href="#">Staff & Volunteers</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
<div class="col-sm-6 col-lg-3">
<h5>Musical Soloists</h5>
<a class="dropdown-item" href="#">About Us</a>
<a class="dropdown-item" href="#">Charity Info</a>
<a class="dropdown-item" href="#">Artistic Director</a>
<a class="dropdown-item" href="#">Board of Directors</a>
</div>
<div class="col-sm-6 col-lg-3">
<h5>Musical Soloists</h5>
<a class="dropdown-item" href="#">About Us</a>
<a class="dropdown-item" href="#">Charity Info</a>
<a class="dropdown-item" href="#">Artistic Director</a>
<a class="dropdown-item" href="#">Board of Directors</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown megamenu-li">
<a class="nav-link" href="" id="dropdown02" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Education & Community</a>
<div class="dropdown-menu megamenu" aria-labelledby="dropdown02">
<div class="row">
<div class="col-sm-6 col-lg-3">
<h5>Musical in School</h5>
<a class="dropdown-item" href="#">About Us</a>
<a class="dropdown-item" href="#">Charity Info</a>
<a class="dropdown-item" href="#">MiS Gallery</a>
<a class="dropdown-item" href="#">Booking / Fees</a>
</div>
<div class="col-sm-6 col-lg-3">
<h5>Summer Music Institute</h5>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<div class="col-sm-6 col-lg-3">
<h5>Certain Events Awards</h5>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
.section {
padding: 3px 50px;
background-color: black;
}
.nav-link {
color: aliceblue;
}
.megamenu-li {
position: static;
}
.megamenu {
position: absolute;
width: 100%;
left: 0;
right: 0;
padding: 15px;
border-radius: 0%;
opacity: 95%;
}
.navbar {
padding-left: 15%;
margin: 1rem 2rem;
background-color: #26272b !important;
}
/* Styles TopNav Logo away from Nav-links in normal view and in the responsive menu. */
.topnavlogo {
margin-bottom: 2px;
}
.container-fluid {
align-content: space-around;
}
/* affects all top nav besides Home (.Disabled) */
.navbar a:hover {
color: #f17917;
}
/* This section wraps the top nav */
.section {
background-color: #26272b;
}
.dropdown-menu {
border-radius: 0%;
}
/* TOP NAV SEARCH FORM STYLES BEGIN */
/* TOP NAV SEARCH FORM STYLES BEGIN
-------------------------------------- */
.form-control:focus {
border-color: #f17917;
box-shadow: none; /* removes blue hue/shadow from topnav search text input */
}
.btn {
border-color: #f17917;
color: #f17917;
margin-right: 20%;
}
.btn:hover {
background-color: #f17917;
border-color: #f17917;
}
/* TOP NAV SEARCH FORM STYLES END */
/* Top Nav Styles End */
/* Main Styles Begin */
main {
margin: 7rem 4rem;
text-align: justify;
}
/* Main Styles End */
http://jsfiddle.net/uhrzo30p
Page pushed to the left and title section pushing the width of the page. I'm new to web Dev, So please let me know where I made the mistake and how to correct it. Full CSS and HTML codes included. Bootstrap version 4. This is a personal blog, my am was to make each post page responsive the same way the homepage made responsive. I can't figure out how to do it. Red arrows show where it pushed to the right
https://github.com/GreshanBovithanthrige/Personal-Blog.git
Git Hub Repo link
html {
height: 100%;
}
body {
font-family: "Montserrat";
color: #000;
min-height: 100%;
display: flex;
flex-direction: column;
}
#title {
background-color: #082032;
color: #fff;
text-align: center;
}
.gb-img {
position: relative;
padding: 5% 0%;
}
h1 {
font-family: 'Montserrat', sans-serif;
font-weight: 900;
font-size: 3rem;
line-height: 1.5;
/* display: flex; */
}
.heading {
text-align: center;
margin: auto;
}
.container-fluid {
padding: 3% 15%;
}
h3 {
font-family: 'Montserrat';
font-weight: bold;
color: #000;
}
h2 {
font-family: 'Montserrat', sans-serif;
font-weight: bold;
font-size: 3rem;
line-height: 1.5;
}
p {
color: #40514E;
}
/* Navigation Bar */
.navbar {
padding-bottom: 4.5rem;
}
.navbar-brand {
font-family: "Alumni Sans";
font-weight: 500;
font-size: 2.7rem;
}
.nav-item {
padding: 0 18px;
}
.nav-link {
font-size: 1.2rem;
font-family: "Montserrat";
font-weight: 300;
}
/* Buttons */
.about-button {
margin: 2% 0% 5% 0%;
}
.card-button {
width: 180px;
margin: auto;
}
/* Features Secition */
#features {
padding: 7% 15%;
}
.feature-box {
text-align: center;
padding: 5%;
}
.card {
background-color: #212529;
border-radius: .50rem;
}
.card-text {
color: #fff;
}
.card-title {
color: #fff;
}
.post-column {
padding-bottom: 5%;
}
/* Footer */
#footer {
padding: 7% 15%;
text-align: center;
background-color: #334756;
margin-top: auto;
}
.p-text {
color: #fff;
}
.sm-icon {
padding: 20px 10px;
}
/* About me page styles */
.about-page-p {
text-align: left;
padding-top: 10%;
padding-bottom: 10%;
padding-left: 30%;
padding-right: 30%;
}
/* Posts Section */
/* Post 1 */
.post1 {
text-align: justify;
padding: 7% 15%;
}
.office-image {
display: block;
margin-left: auto;
margin-right: auto;
padding: 3% 0%;
}
/* Post 2 */
.post2 {
text-align: justify;
padding: 7% 15%;
}
#media (min-width: 320px) and (max-width: 767px) {
/* .row {
position: relative;
} */
.container-fluid{
position: relative;
width: 100%;
}
.common{
margin: auto;
padding-left: 12%;
padding-bottom: 20px;
}
body{
padding:0%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>GB</title>
<link rel="SHORTCUT ICON" href="images/GB.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Ubuntu:ital,wght#0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Alumni+Sans:wght#500&display=swap" rel="stylesheet">
</head>
<body>
<section id="title">
<div class="container-fluid">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark navbar">
<a class="navbar-brand" href="index.html">GB</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Posts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-me.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#footer">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- Title -->
<!-- <div class="row"> -->
<div class="section">
<div class="container">
<div class="row">
<div class="col-sm">
<h1>Hello.</h1>
<h2>I'm Greshan Bovithanthrige</h2>
<h4>A Sys Admin based in Sri Lanka</h4>
About me
</div>
<div class="col-sm row common">
<img src="images/GB.png" height="280" width="280">
</div>
</div>
</div>
</div>
<!-- </div> -->
</section>
<section id="features">
<div class="row">
<div class="col-lg-4 col-md-12 post-column">
<div class="card">
<img class="card-img-top" src="images/image-gmfl.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">All of us in whatever context is tasked with getting more from less!</h5>
<p class="card-text">The energy behind writing this article came from an interview I had the privilege to watch recently.</p>
</div>
Read More
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 post-column"">
<div class=" card">
<img class="card-img-top" src="images/RAM.jpeg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Is it necessary to stress test your RAM/Memory?</h5>
<p class="card-text">The short answer is YES. You should. But, it really depends on the context.</p>
</div>
Read More
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 post-column"">
<div class=" card">
<img class="card-img-top" src="images/image-gmfl.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Lorem Ipsum is simply dummy text of the printing</h5>
<p class="card-text">orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. </p>
</div>
Read More
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
</section>
<section id="features">
<div class="row">
<div class="col-lg-4 col-md-12 post-column"">
<div class=" card">
<img class="card-img-top" src="images/image-gmfl.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Lorem Ipsum is simply dummy text of the printing</h5>
<p class="card-text">orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. </p>
</div>
Read More
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 post-column"">
<div class=" card">
<img class="card-img-top" src="images/image-gmfl.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Lorem Ipsum is simply dummy text of the printing</h5>
<p class="card-text">orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. </p>
</div>
Read More
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 post-column"">
<div class=" card">
<img class="card-img-top" src="images/image-gmfl.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Lorem Ipsum is simply dummy text of the printing</h5>
<p class="card-text">orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. </p>
</div>
Read More
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<span style="color:#FFF;"><span /><i class="fab fa-facebook sm-icon"></i>
<a href="https://instagram.com/gbovithanthrige"><span style="color:#FFF;"><span /><i class="fab fa-instagram sm-icon"></i><a />
<a href="https://twitter.com/gbovithanthrige"><span style="color:#FFF;"><span /><i class="fab fa-twitter sm-icon"></i><a />
<span style="color:#FFF;"><span /><i class="fab fa-linkedin-in sm-icon"></i>
<span style="color:#FFF;"><span /><i class="fas fa-envelope-square sm-icon"></i>
<p class="p-text">Crafted by Greshan Bovithanthrige</p>
</footer>
</body>
</html>
I am trying to move the hamburger menu to the far right, so it looks better on mobile and aligin the ul, so it's also on the right.
I have added navbar-toggler-right to the navbar-toggler and have also added navbar-nav mr-auto to the ul, but while its on the right of the text, it's still not on the right and the links are aligned to the left for some reason. Any ideas?
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;}
.navbar-text { overflow-wrap: break-word;
}
}
span.text {
float: left;
margin-right: 30px;
}
span.text p{margin-top: 15px!important;}
.navbar-toggle .icon-bar{
margin-left: auto;
margin-top none !important; }
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
overflow-x: hidden !important;
}
}
#media screen and (max-width: 600px) {
.topnav a:hover {
background-color: #ddd;
color: black;
}
#media screen and (max-width: 600px) {
img.content{ width:80%;
border:#01009C 1px solid; display: block; margin: 0 auto; vertical-align:middle !important; }
}
}
.container{ word-wrap: break-word!important; padding:0px; background:orangered;}
.topnav {
overflow: hidden;
margin-bottom: 10px;
}
.topnav a.navbar-brand{
display:none;
vertical-align: top;
}
.topnav .nav-link i{
margin-top:5px;
}
.topnav .nav-link img{
margin-top:5px;
}
.navbar-header img{
width:100px;
}
.topnav a {
font-family:MuseoSans-500;
display: inline-block;
text-decoration: none;
font-size: 20px;
font-weight: normal;
font-style: normal;
}
/*
h2 { font-size:25px !important; font-family: MuseoSans-100 !important;
font-weight: normal;
font-style: normal;
clear:both; color: orangered;
} */
.active {
color: white;
}
.topnav .icon {
display: none;
}
.navbar-text{ white-space: normal; font-size:40px; color:orangered;word-wrap: break-word!important;}
img.content{
border:#01009C 1px solid; display: block; margin: 0 auto; vertical-align:middle !important; }
.container{background:white;overflow:hidden!important;}
.img-fluid {
max-width: 100%;
height: auto;
}
#media (max-width:768px){
.topnav a{
font-size:18px !important;
}
img { vertical-align: top!important;}
.topnav .nav-link img, .topnav .nav-link i {margin:-4 ; width:20px;}
.navbar-header h1{
font-size:35px!important; word-wrap: break-word!important;
}
h2{font-size:25px!important;}
html{ overflow-x: hidden;}
}
.navbar
#media(max-width:540px){
.topnav a.navbar-brand{
display: block;
transform: translateX(43%);
}
.form-inline .form-control {
display: inline-block !important;
width: auto!important
}
.nav-item a {text-align:left!important;}
.topnav .nav-link i{
margin-top:0;
}
.topnav .nav-link img{
margin-top:0;
}
.link1{
display:none;
}
.navbar-header img{
width:100px;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar justify-content-center">
<div class="navbar-brand navbar-header">
<img class="img-fluid" src="includes/om.svg" width="100" >
<h1 class="navbar-text primary">Grampian Yoga Association</h1>
</div>
</nav>
<body>
<nav class="navbar navbar-expand-lg topnav " id="myTopnav">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><i class="material-icons">
menu
</i></i></span>
<span class="text"><p>Toggle navigation</p></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navbar-default" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="<?php echo $sitepath; ?>">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo $sitepath; ?>/summerclasses.php">Summer Classes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo $sitepath; ?>/teachers.php">Classes and Teachers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo $sitepath; ?>/seminars.php">Seminars</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo $sitepath; ?>/com.php">Committee</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo $sitepath; ?>/accounts.php">Accounts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo $sitepath; ?>/about.php">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo $sitepath; ?>/membership.php">Membership</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo $sitepath; ?>/maintain.php">Links</a>
</li>
</div>
</nav>
Try adding right: 15px; and position: absolute; to navbar-toggler-icon to move the menu to the right.
.navbar-toggler-icon {
right: 15px;
position: absolute;
}
I am trying to make the datetimepicker responsive for bootstrap but having issues.
I have seen this plugin:
https://github.com/niftylettuce/bootstrap-datepicker-mobile#requirements
which would be great to use in my application, but the problem is my application doesn't use jQuery (nor do I want it to).
I have the datepicker set up like this:
<div class="col-md-4">
<div ng-model="controller.today" datepicker ng-change="controller.getArchive()"></div>
</div>
Does anyone know how I can make the datetimepicker responsive without using jQuery?
Well I managed to fix this myself.
I created my own templates which looked like this:
<script id="template/datepicker/datepicker.html" type="text/ng-template">
<div class="datepicker" ng-switch="datepickerMode" role="application" ng-keydown="keydown($event)">
<daypicker ng-switch-when="day" tabindex="0"></daypicker>
<monthpicker ng-switch-when="month" tabindex="0"></monthpicker>
<yearpicker ng-switch-when="year" tabindex="0"></yearpicker>
</div>
</script>
<script id="template/datepicker/day.html" type="text/ng-template">
<div>
<div class="row">
<div class="col-xs-2">
<button class="btn btn-default btn-block" ng-click="move(-1)" tabindex="-1"><span class="fa fa-chevron-left"></span></button>
</div>
<div class="col-xs-8">
<button class="btn btn-default btn-block" ng-click="toggleMode()" ng-disabled="datepickerMode === maxMode" tabindex="-1">{{ title }}</button>
</div>
<div class="col-xs-2">
<button class="btn btn-default btn-block"><span class="fa fa-chevron-right"></span></button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="flexbox">
<div ng-repeat="label in labels track by $index">
<small aria-label="{{ label.full }}">{{ label.abbr }}</small>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="flexbox" ng-repeat="row in rows track by $index">
<div ng-repeat="dt in row track by dt.date">
<button class="btn btn-default btn-block" ng-class="{'btn-info': dt.selected, active isactive(dt)}" ng-click="select(dt.date)" ng-disabled="dt.disabled" tabindex="-1"><span ng-class="{'text-muted': dt.secondary, 'text-info' dt.current}">{{ dt.label }}</span></button>
</div>
</div>
</div>
</div>
</div>
</script>
Then I created 2 SASS files, one for the actual datepicker:
.datepicker {
text-align: center;
.row {
> div {
padding-left: 1px;
padding-right: 1px;
&:first-child {
padding-left: 15px;
}
&:last-child {
padding-right: 15px;
}
}
> .col-xs-12,
> .col-sm-12,
> .col-md-12,
> .col-lg-12 {
padding-left: 15px;
padding-right: 15px;
}
}
.flexbox {
margin-top: -1px;
&:first-child {
margin-top: 2px;
}
}
}
and a flexbox one:
.flexbox {
display: flex;
> div {
-ms-flex: 1 auto;
flex: 1 auto;
margin-left: -1px;
&:first-child {
margin-left: 0;
}
}
}
This solved my issue.
I will update this when I have all templates replaced and I will add a jsfiddle.
I'm new to Angular and need to repeat objects until the data is exhausted.
Here's the code snippet that I wish to repeat.
<!-- Start box content -->
<div class='span3 box box-nomargin' style="margin-left: 0px !important;">
<!-- Now starts the box content -->
<div class='box-header red-background'>
<div class="title text-center span12" style="font-weight: 600;">Skyfall</div>
<div class="normal text-center span12 utilMonSmallTitle">Network: <span class="utilMonSmallText">My First Network</span></div>
<div class="normal text-center span12 utilMonSmallTitle">Site: <span class="utilMonSmallText">My Site 388_ascdaaf298</span></div>
</div>
<div class='box-content text-center' style="padding-bottom: 0px;">
<!-- Start box content Header -->
<div class="title span4 text-left" style="color: black; padding-left: 5px; font-size: 14px; font-weight: 600; margin-top: -5px;">Hardware</div>
<div class="title span3 text-center" style="color: black; padding-left: 20px; font-size: 14px; font-weight: 600; margin-top: -10px;">
<i id="icon508Compliant" class="icon-remove-sign" style="font-size: 40px; color: red;"></i>
<!-- The icons are: icon-remove-circle, icon-warning-sign, icon-ok-circle -->
</div>
<div class="title span4 text-right" style="color: black; padding-left: 5px; font-size: 14px; font-weight: 600; margin-top: -5px;">Software</div><br><br>
<!-- End box content Header -->
<!-- Start box content body -->
<div class="row-fluid">
<div class="span6">
<span style="font-size:24px; font-weight: bold; border-right: solid black 1px; margin-bottom: 2px; padding-right: 5px;">
<span id="hwVal1">{{hardwareAlerts[0].critical}}</span>
</span>
<span style="font-size:24px; font-weight: bold; padding-left: 8px;">
<span id="hwVal2">{{hardwareAlerts[0].warning}}</span>
</span>
</div>
<div class="span6">
<span style="font-size:24px; font-weight: bold; border-right: solid black 1px; margin-bottom: 2px; padding-right: 5px;">
<span id="swVal1">{{softwareAlerts[0].critical}}</span>
</span>
<span style="font-size:24px; font-weight: bold; padding-left: 8px;">
<span id="swVal2">{{softwareAlerts[0].warning}}</span>
</span>
</div>
</div>
<!-- End box content Body -->
<!-- Start box content footer buttons -->
<div class="row-fluid">
<button class="btn btn-small btnBoxLeft"><i class="icon-warning-sign">View Critical</i></button>
<button class="btn btn-small btnBoxRight"><i class="icon-warning-sign">View All</i></button>
</div>
<!-- End box content footer buttons -->
</div>
<!-- Now ends the box content -->
</div>
<!-- End box content -->
So that whole snippet of code will REPEAT within a FLATTY Bootstrap "ROW" until there's no more data.
I'm used to Handlebars.js but Angular is a little tricky.
It needs to repeat based on the number of NETWORKS there are.
For instance: If there are 10 networks, the above code should repeat 10 times displaying 10 BOXES.
I have my controllers and directives code working... just need to understand the "REPEAT" stuff.
Thank you all.
You need to use ng-repeat
<div class='span3 box box-nomargin' style="margin-left: 0px !important;" ng-repeat="object in objects">
Where in the above snippet objects would be your ARRAY of objects. If you only have an object and you wish to iterate keys, use ng-repeat="(k, v) in objects". (Where k is your property name and v is the value of said property)
To display the data, simply reference the property within the repeater where you wish to use it via:
{{object.PROPERTY}}
Or, if using the (k, v) in objects simply do {{k}} or {{v}}