the following code generates a bootstrap navbar with a notification icon and I want to execute a function when I click the notification button to expand the dropdown and when I close the dropdown how do I do this in javascript?
I have try'd selecting the dropdown and modifying the click function but that executes when you click a element in the dropdown not when you click the button.
#ex4 {
color: white;
width: auto;
}
#ex4 .p1.has-badge:after {
position: absolute;
right: 10%;
top: 8%;
content: attr(data-count);
font-size: 40%;
padding: .2em;
border-radius: 50%;
line-height: 1em;
color: white;
background: rgba(255, 0, 0, .85);
text-align: center;
min-width: 1.5em;
}
form.logout {
padding-left: 10px;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<!-- Font awesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Page style -->
<link rel="stylesheet" href="CSS/index.css">
<!-- Title -->
<title>Social Feed</title>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Social Feed</a>
<div class="d-flex align-items-center">
<div class="dropdown">
<a class="btn btn-secondary" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
<div id="ex4">
<span class="p1 fa-stack fa-2x has-badge" data-count="0" id="badge">
<i class="p2 fa fa-bell fa-stack-1x xfa-inverse"></i>
</span>
</div>
</a>
<div class="dropdown-menu dropdown-menu-end">
<div id="notifications-header">
<h1>Notifications</h1>
</div>
<div id="notifications">
</div>
</div>
</div>
<form a name="logout" class="logout" action="PHP/Logout.php" method="get">
<button type="submit" class="btn btn-danger">Log Out</button>
</form>
</div>
</div>
</nav>
</body>
</script>
</html>
Hook into the Dropdown events
var myDropdown = document.getElementById('myDropdown')
//expand/open
myDropdown.addEventListener('show.bs.dropdown', function () {
// do something when opened...
})
//hide/close
myDropdown.addEventListener('hide.bs.dropdown', function () {
// do something when closed...
})
Codeply
Related
I am a novice in web development using flask/jinja. I have content in my word file. I want to read the word file contents (text3.docs) into my html document (home.html). The home.html extends from base.html. I tried the below code but I am getting decoding error. kindly help.
Project structure:
Home.html
{% extends 'base.html'%}
{% block title %}Home{% endblock %}
{% block content%}
<p>{{file}}</p>
{% endblock%}
base.html
<!DOCTYPE html>
<html lang="english">
<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">
<link rel="shortcut icon" href={{url_for('static', filename='images/logo1.png')}}>
<title>{% block title%}{% endblock %}</title>
<!-- Bootstrap CSS CDN -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
crossorigin="anonymous"
>
<!-- Our Custom CSS -->
<link rel="stylesheet" href={{url_for('static', filename='stylesheets/style.css')}}>
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<nav class=" navbar navbar-expand-lg navbar-light fixed-top bg-light py-lg-0 " id="customNavbar">
<a class="navbar-brand" href="/">
<!-- Add logo -->
<img src={{url_for('static', filename='images/logo1.png')}} alt="logo">
</a>
<button class="navbar-toggle-collapsed d-block d-sm-block d-md-none" type="button"
data-toggle="collapse"
data-target="#navbarResponsive"
aria-controls="navbarResponsive"
aria-expanded="true"
aria-label="Toggle navigation"
id="togglerButton">
<span class="line"></span>
<span class="line"></span>
<span class="line" style="margin-bottom: 0;"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home</a>
</li>
</ul>
</div>
<form class="lg-flex">
<button type="button" href="/signin" class="btn btn-custom">Sign In</button>
<button type="button" class="btn btn-custom">Sign Up</button>
</form>
</nav>
</div>
{% block content %}{% endblock %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
</body>
</html>
routes.py
from flask import render_template, Blueprint
routes = Blueprint('routes', __name__)
f = open('Website/static/data/text3.docx', 'r', encoding="utf8")
file = f.read()
#routes.route('/')
def home():
return render_template('Home.html', file=file)
main.py
from Website import create_app
app = create_app()
if __name__ == '__main__':
app.run(debug=True)
style.css (css file might not be required but still i am providing below for reference)
#customNavbar .navbar-nav .nav-item .nav-link {
color: #4a438f;
font-weight: bold;
}
#customNavbar .btn-custom {
background-color: #4a438f;
color: #fff;
}
body {
margin-top: 60px;
font-family: 'Poppins', sans-serif;
background: #fff;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #4a438f;
text-align: justify;
}
I am using Bootstrap Vue b-dropdown (https://bootstrap-vue.org/docs/components/dropdown) like so:
I want to be able to style the button (to open the dropdown) as a circle with a + icon inside of it.
I can create the circle using the following css:
.btn-circle.btn-xl {
width: 70px;
height: 70px;
padding: 10px 16px;
border-radius: 35px;
font-size: 24px;
line-height: 1.33;
}
.btn-circle {
width: 30px;
height: 30px;
padding: 6px 0px;
border-radius: 15px;
text-align: center;
font-size: 12px;
line-height: 1.42857;
}
And then using
<b-button
class="btn btn-circle btn-xl"
>
<i class="far fa-plus" />
</b-button>
Generates my circular button.
However,when using bootstrap vue dropdown, the option to style the button is with using the template:
<template #button-content>
<b-button
class="btn btn-circle btn-xl"
>
<i class="far fa-plus" /><span class="sr-only">{{ $tU('general_actions') }}</span>
</b-button>
</template>
This does however give the correct result, but semantically, it creates a button inside a button.
How do I solve this so that it's not longer a button inside a button, but it still gives the correct layout?
EDIT: I tried creating a codepen, but I don't know why nothing is showing up...
https://codepen.io/anjazb/pen/zYBoMQp
If you want to add classes to the toggle button inside <b-dropdown>, use the toggle-class prop.
There might also be an easier way for you to create a round button by using the utility class rounded-circle, to create a round border radius, and px-2 to adjust the padding to fit correctly.
new Vue({
el: '#app'
})
<script src="https://unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.18.1/dist/bootstrap-vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.18.1/dist/bootstrap-vue-icons.js"></script>
<link href="https://unpkg.com/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue#2.18.1/dist/bootstrap-vue.css" rel="stylesheet" />
<div id="app">
<b-button variant="primary" class="rounded-circle px-2">
<b-icon icon="plus" scale="2"></b-icon>
</b-button>
<b-dropdown variant="primary" toggle-class="rounded-circle px-2" no-caret>
<template #button-content>
<b-icon icon="plus" scale="2"></b-icon>
</template>
<b-dropdown-item>Item 1</b-dropdown-item>
<b-dropdown-item>Item 2</b-dropdown-item>
<b-dropdown-item>Item 3</b-dropdown-item>
</b-dropdown>
</div>
Even this will work in version 4 by using:
css:border-radius:100%;
bootstrap: removing dropdown-toggle and using
<i class="fa fa-plus" aria-hidden="false"></i></button>
the whole code is like :
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0-11/css/all.min.css">
<link rel="stylesheet" href="style.css">
<title>Title</title>
<style>
</style>
</head>
<body>
<div>
<button class="btn btn-primary " style="border-radius:100%;" id="dropdownMenuButton" data-toggle="dropdown">
<i class="fa fa-plus" aria-hidden="false"></i></button>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">1</a>
<a class="dropdown-item" href="#">2</a>
<a class="dropdown-item" href="#">3</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
see:
https://jsfiddle.net/9ubdkm2r/1/
I've been learning bootstrap and I have a very basic page I'm working on to learn hands on with. I tried adding in a dropdown and it doesn't dropdown at all when it is clicked, I checked to forum and the main thing was people not having the bootstrap js link, so I made sure I included that, and I'm pretty sure that I have all the proper links for it to work. (code is being weird in snippet, works normally on everything else) Thanks for the help, my code is:
.div1 {
background-color:#80bfff;
}
.div2 {
background-color:#ccffff;
}
.div3 {
background-color:#80bfff;
}
.row {
height: calc(100vh - 300px);
}
#main {
background-color: #3333ff;
}
#main_head {
height: 150px;
margin: 0;
}
#main_foot {
height: 150px;
background-color:#3333ff;
margin: 0;
position: absolute;
left: 0;
right: 0;
}
h1 {
color: black;
}
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="test.css">
<script src="test.js"></script>
<div class="container-fluid" id="main">
<h1 id="main_head">This is a heading</h1>
<div class="row">
<div class="col-sm-2 div1">
<div class="btn-group-vertical">
<h4>These buttons don't work yet because I haven't implemented anything yet</h4>
<button type="button" class="btn btn-warning">Button 1</button>
<button type="button" class="btn btn-info">Button 2</button>
<button type="button" class="btn btn-success">Button 3</button>
</div>
</div>
<div class="col-sm-8 div2">
</div>
<div class="col-sm-2 div3">
<div class="container">
<h4>This is a dropdown menu</h4>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Click the dropdown menu
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Dropdown 1</li>
<li>Dropdown 2</li>
<li>Dropdown 3t</li>
</ul>
</div>
</div>
</div>
</div>
<div id="main_foot" class="container-fluid"><h1>This is a footer</h1></div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
First you'r calling two bootstrap version one in the head and one on the footer , second you need to call popper.js before bootstrap.js
see snippet
.div1 {
background-color:#80bfff;
}
.div2 {
background-color:#ccffff;
}
.div3 {
background-color:#80bfff;
}
.row {
height: calc(100vh - 300px);
}
#main {
background-color: #3333ff;
}
#main_head {
height: 150px;
margin: 0;
}
#main_foot {
height: 150px;
background-color:#3333ff;
margin: 0;
position: absolute;
left: 0;
right: 0;
}
h1 {
color: black;
}
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="test.css">
<script src="test.js"></script>
<div class="container-fluid" id="main">
<h1 id="main_head">This is a heading</h1>
<div class="row">
<div class="col-sm-2 div1">
<div class="btn-group-vertical">
<h4>These buttons don't work yet because I haven't implemented anything yet</h4>
<button type="button" class="btn btn-warning">Button 1</button>
<button type="button" class="btn btn-info">Button 2</button>
<button type="button" class="btn btn-success">Button 3</button>
</div>
</div>
<div class="col-sm-8 div2">
</div>
<div class="col-sm-2 div3">
<div class="container">
<h4>This is a dropdown menu</h4>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Click the dropdown menu
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Dropdown 1</li>
<li>Dropdown 2</li>
<li>Dropdown 3t</li>
</ul>
</div>
</div>
</div>
</div>
<div id="main_foot" class="container-fluid"><h1>This is a footer</h1></div>
</div>
</body>
</html>
I think you sould try using another CDN files, this worked for me
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Just learning Bootstrap and I snagged a theme online and while working on the nav bar, found that the toggle button doesn't toggle back to close after being opened. I've done quite a bit of searching but have had a hard time finding anything that could help me... Attached is the code I am working on. Any and all help is appreciated.
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>CardSpoiler</title>
<meta name="description" content="BlackTie.co - Free Handsome Bootstrap Themes" />
<meta name="keywords" content="themes, bootstrap, free, templates, bootstrap 3, freebie,">
<meta property="og:title" content="">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="fancybox/jquery.fancybox-v=2.1.5.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,600,300,200&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="prefetch" href="images/zoom.png">
</head>
<style>
body {
background: #232526;
background: -webkit-linear-gradient(to right, #232526 , #414345);
background: linear-gradient(to right, #232526 , #414345);
margin: 0em;
vertical-align: middle;
}
li { cursor: pointer; cursor: hand; }
.navbar-toggle{
background-color: #232526;
}
</style>
<body>
<div class="navbar navbar-fixed-top" data-activeslide="1">
<div class="container">
<!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav row">
<li data-slide="1" class="col-12 col-sm-1"><a id="home" title="Home"><span class="icon icon-home"></span> <span class="text">Home</span></a></li>
<li data-slide="2" class="col-12 col-sm-1"><a id="warrior" title="Warrior" class="external nav"><span class="icon icon-filter"></span> <span class="text">Warrior</span></a></li>
<li data-slide="3" class="col-12 col-sm-1"><a id="druid" href="../../../CardSpoiler.html" title="Druid"><span class="icon icon-leaf"></span> <span class="text">Druid</span></a></li>
<li data-slide="4" class="col-12 col-sm-1"><a id="priest" href="../../../CardSpoiler.html" title="Priest"><span class="icon icon-plus-sign"></span> <span class="text">Priest</span></a></li>
<li data-slide="5" class="col-12 col-sm-1"><a id="paladin" href="../../../CardSpoiler.html" title="Paladin"><span class="icon icon-heart"></span> <span class="text">Paladin</span></a></li>
<li data-slide="6" class="col-12 col-sm-1"><a id="hunter" href="../../../CardSpoiler.html" title="Hunter"><span class="icon icon-screenshot"></span> <span class="text">Hunter</span></a></li>
<li data-slide="1" class="col-12 col-sm-1"><a id="mage" href="../../../CardSpoiler.html" title="Mage"><span class="icon icon-fire"></span> <span class="text">Mage</span></a></li>
<li data-slide="2" class="col-12 col-sm-1"><a id="shaman" href="../../../CardSpoiler.html" title="Shaman"><span class="icon icon-tint"></span> <span class="text">Shaman</span></a></li>
<li data-slide="3" class="col-12 col-sm-1"><a id="warlock" href="../../../CardSpoiler.html" title="Warlock"><span class="icon icon-user"></span> <span class="text">Warlock</span></a></li>
<li data-slide="4" class="col-12 col-sm-1"><a id="rogue" href="../../../CardSpoiler.html" title="Rogue"><span class="icon icon-eye-close"></span> <span class="text">Rogue</span></a></li>
<li data-slide="5" class="col-12 col-sm-1"><a id="minions" href="../../../CardSpoiler.html" title="Minions"><span class="icon icon-chevron-up"></span> <span class="text">Minions</span></a></li>
<li data-slide="6" class="col-12 col-sm-1"><a id="spells" href="../../../CardSpoiler.html" title="Spells"><span class="icon icon-chevron-down"></span> <span class="text">Spells</span></a></li>
</ul>
<div class="row">
<div class="col-sm-2 active-menu"></div>
</div>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar -->
</body>
<!-- SCRIPTS -->
<script src="js/html5shiv.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox.pack-v=2.1.5.js"></script>
<script src="js/script.js"></script>
<!-- fancybox init -->
<script>
$(document).ready(function(e) {
var lis = $('.nav > li');
menu_focus( lis[0], 1 );
$(".fancybox").fancybox({
padding: 10,
helpers: {
overlay: {
locked: false
}
}
});
});
document.getElementById("home").onclick = function () {
location.href = "../../../CardSpoiler.html";
};
document.getElementById("warrior").onclick = function () {
location.href = "../../../CardSpoiler_Warrior.html";
};
document.getElementById("druid").onclick = function () {
location.href = "../../../CardSpoiler_Druid.html";
};
document.getElementById("priest").onclick = function () {
location.href = "../../../CardSpoiler_Priest.html";
};
document.getElementById("paladin").onclick = function () {
location.href = "../../../CardSpoiler_Paladin.html";
};
document.getElementById("hunter").onclick = function () {
location.href = "../../../CardSpoiler_Hunter.html";
};
document.getElementById("mage").onclick = function () {
location.href = "../../../CardSpoiler_Mage.html";
};
document.getElementById("shaman").onclick = function () {
location.href = "../../../CardSpoiler_Shaman.html";
};
document.getElementById("warlock").onclick = function () {
location.href = "../../../CardSpoiler_Warlock.html";
};
document.getElementById("rogue").onclick = function () {
location.href = "../../../CardSpoiler_Rogue.html";
};
document.getElementById("minions").onclick = function () {
location.href = "../../../CardSpoiler_MSOG_Minions.html";
};
document.getElementById("spells").onclick = function () {
location.href = "../../../CardSpoiler_MSOG_Spells.html";
};
</script>
</html>
The problem was with the z-index of the .navbar-toggle. The list items had a bigger z-index, while the .navbar-toggle lacked it. Adding this to your CSS will work:
.navbar-toggle {
z-index: 5;
}
Try playing around with Working JSBin.
To compare it with the original code you had, see Old Code.
I am trying to get the FAB from materializeCSS to work but nothing I try is working. Heres my code:
index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DevWright Education</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="http://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc="
crossorigin="anonymous"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.js"></script>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body style="background-color: #eceff1;">
<de-root>
<img src="assets/images/ripple.gif" alt="">
</de-root>
</body>
</html>
new-post-card.component.html:
<div class="card">
<div class="card-content">
<span class="card-title">Post something!</span>
<!-- Fixed Action Button -->
<div class="fixed-action-btn horizontal click-to-toggle" style="bottom: 45px; right: 24px;">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
<li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
<li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
<li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
</ul>
</div>
</div>
</div>
I've tried using angular2-materialize but i cant find the right component to work with it.
In my case it was because the position on the FAB was fixed, so changing
<div class="fixed-action-btn horizontal click-to-toggle" style="bottom: 45px; right: 24px;">
to
<div class="fixed-action-btn horizontal click-to-toggle" style="bottom: 45px; right: 24px; position:static;">
fixed the problem.