I am trying to use MaterializeCSS Icon to work on the navbar. In the code posted, arrow-drop_down doesn't seem to work. Instead, it shows just a text. Icons render on other pages except in the app.component.html file.
I tried to import the below code directly in the index.html file. Still the same result. Am I missing something here? Also, I cannot figure out a reason why Icons display in any other component apart from app.component.html
Any help would be much appreciated. Thank you. Let me know if more details are required.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>UiCommunity</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<header>
<nav class="white">
<div class="container nav-wrapper">
Community
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>
<a routerLink="/" routerLinkActive="active">HOME</a>
</li>
<li>
<a routerLink="/event" routerLinkActive="active">EVENTS</a>
</li>
<li *ngIf="!authenticated()">
<a routerLink="/login" routerLinkActive="active">LOGIN</a>
</li>
<li *ngIf=!authenticated()>
<a routerLink="/register" routerLinkActive="active">SIGNUP</a>
</li>
<li *ngIf=authenticated()>
<a routerLink="/logout" class="black-text">LOGOUT</a>
</li>
<li *ngIf=authenticated()>
<a routerLink="/profile" class="dropdown-trigger black-text" data-target="dropdown1">PROFILE<i class="material-icons right">arrow_drop_down</i></a>
</li>
<li>
<a class="btn waves-effect waves-lime lime darken-4 white-text">Donate</a>
</li>
</ul>
</div>
</nav>
<ul id='dropdown1' class='dropdown-content'>
<li>one</li>
<li>two</li>
<li class="divider" tabindex="-1"></li>
<li>three</li>
<li><i class="material-icons">view_module</i>four</li>
<li><i class="material-icons">cloud</i>five</li>
</ul>
</header>
<main>
<router-outlet></router-outlet>
</main>
<footer></footer>
This is my style.css
/* You can add global styles to this file, and also import other style files */
#import "../node_modules/materialize-css/dist/css/materialize.css";
#import url('https://fonts.googleapis.com/css?family=Philosopher');
#import url('https://fonts.googleapis.com/icon?family=Material+Icons');
Can you try to import your styles file directly on your app component ts/js file? If you got all the dependencies installed and it works on other pages, it is probably an importing or wrong path issue.
Related
links on the page
Hi!
The above picture is the links on the page I want to build (T&C is the active link and has its own content below it), wherein whenever someone clicks on another link, for instance, FAQ, the text should move from right to left smoothly and occupy t&C current position and display its own content.
I was trying this via bootstrap tabs but no luck, is there any different approach to it?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 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/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tabs With Dropdown Menu</h3>
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Submenu 1-1</li>
<li>Submenu 1-2</li>
<li>Submenu 1-3</li>
</ul>
</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
</body>
</html>
(I can't comment yet, so I put it in an answer)
Please add the HTML and CSS (and maybe JS) source code to get help.
I've recently been playing around with Materialize-css trying to get use to building websites. However, I noticed that when I try to add JavaScript features it does not seem to work. I've double checked to make sure I have all the right folders in place - js, css, & fonts, and the correct script loading as well. Here is a sample of my jQuery & index.html file:
$('.parallax').parallax();
$('.dropdown-trigger').dropdown();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<ul id="dropdown1" class="dropdown-content">
<li>macOS</li>
<li>iOS</li>
<li class="divider"></li>
<li>Android</li>
</ul>
<!--<div class="navbar-fixed">-->
<nav>
<div class="nav-wrapper" style="background-color: #323643;">
Logo
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Home</li>
<li>About</li>
<li><a class="dropdown-trigger" href="#" data-target="dropdown1">Downloads<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
<!--</div>-->
<div class="parallax-container">
<div class="parallax"><img src="images/oneway.jpg"></div>
</div>
<div class="section white">
<div class="row container">
<h2 class="header">Parallax</h2>
<p class="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
</div>
</div>
<div class="parallax-container">
<div class="parallax"><img src="images/oneway.jpg"></div>
</div>
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
As you can see I'm trying to add a Parallax, and a drop down menu button to my website. In order to do this I've been instructed to add the jQuery '$('.parallax').parallax();', and '$('.dropdown-trigger').dropdown();', in the $(document).ready(function()) in the materialize.js file. See the documentation here: https://materializecss.com/parallax.html, & https://materializecss.com/dropdown.html.
Here is a picture of what I'm getting when I run this code:
The Downloads drop down button should be displaying one, two, three, etc., when I click it, and there should be a background image using the Parallax. Does anyone notice something I'm missing?
I think your library placing is wrong. Please check it with below changes. Now I am not getting any error
$(document).ready(function(){
$('.parallax').parallax();
$('.dropdown-trigger').dropdown();
});
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<!--Import Google Icon Font-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js'></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<ul id="dropdown1" class="dropdown-content">
<li>macOS</li>
<li>iOS</li>
<li class="divider"></li>
<li>Android</li>
</ul>
<!--<div class="navbar-fixed">-->
<nav>
<div class="nav-wrapper" style="background-color: #323643;">
Logo
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Home</li>
<li>About</li>
<li><a class="dropdown-trigger" href="#" data-target="dropdown1">Downloads<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
<!--</div>-->
<div class="parallax-container">enter code here
<div class="parallax"><img src="images/oneway.jpg"></div>
</div>
<div class="section white">
<div class="row container">
<h2 class="header">Parallax</h2>
<p class="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
</div>
</div>
<div class="parallax-container">
<div class="parallax"><img src="images/oneway.jpg"></div>
</div>
</body>
</html>
I figured it out.
Apparently the JQuery is supposed to be added to this function:
(function($){
$(function(){
$('.sidenav').sidenav();
$('.parallax').parallax();
}); // end of document ready
})(jQuery);
I have been trying to use MateralizeCSS; only designed and created by Google; as an alternative for Bootstrap as a test and to see the differences by myself. However there is something that is weird with Materalize. The HTML Setup stated on their official website is simple, but when I try to resize the window and press the hamburger icon nothing happens. This means that the JavaScript is not loaded correctly, but it's actually included in my HTML file. First I tried to use the CDNs and it's not working. So I decided to download the files and link them in the file, but it's still not working.
My HTML:
<!DOCTYPE html>
<html lang="en-US" class="gr__materializecss_com">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Template</title>
<!-- Import Google Icon Font -->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="materialize/css/materialize.css">
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css"> -->
</head>
<body>
<nav role="navigation" class="light-green">
<div class="nav-wrapper container">
Brand
<ul class="right hide-on-med-and-down">
<li>Home</li>
<li>About</li>
<li>Sign Up</li>
<li>Login</li>
</ul>
<ul class="side-nav" id="nav-mobile">
<li>Home</li>
<li>About</li>
<li>Sign Up</li>
<li>Login</li>
</ul>
<i class="material-icons">menu</i>
</div>
</nav>
<!-- Import jQuery before materialize.js -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script type="text/javascript" src="materialize/js/materialize.js"></script>
<!--<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
-->
</body>
</html>
I opened the Inspector to see the Starter Template structure for the navbar and it's the same as mine. I can't figure out the problem. So any logical explanation is appreciated.
You just need to initialize the jQuery plugin for the sideNav method to work. Hope this helps!
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Template</title>
<!-- Import Google Icon Font -->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
</head>
<body>
<nav role="navigation" class="light-green">
<div class="nav-wrapper container">
Brand
<ul class="right hide-on-med-and-down">
<li>Home</li>
<li>About</li>
<li>Sign Up</li>
<li>Login</li>
</ul>
<ul class="side-nav" id="nav-mobile">
<li>Home</li>
<li>About</li>
<li>Sign Up</li>
<li>Login</li>
</ul>
<i class="material-icons">menu</i>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
<script>
$(".button-collapse").sideNav();
</script>
</body>
</html>
Hello fellow developers.. I have a problem with the foundation dropdown menu, and after quite a while of tackling the problem I search for your help, foundation gurus.
I am using foundation 6.2.4-full. I've created a dropdown menu but I noticed an issue, the problem lies when using the menu with mobile devices (try on iphone 4). It's submenu items aren't clickable. For example, click on the Map option, and then try to click on Pokemons sub-option. The code is embedded below.
I can't find the problem, I am quite new to foundation, perhaps I'm missing an important option?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="device-width=width, initial-scale=1">
<link rel="stylesheet" href="/css/foundation/foundation.min.css">
<script src="/js/jquery_2.2.4.min.js"></script>
<script src="/js/foundation/what-input.js"></script>
<script src="/js/foundation/foundation.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
$(document).foundation();
});
</script>
<nav class="top-bar">
<ul class="dropdown vertical medium-horizontal menu" data-dropdown-menu>
<li>Home</li>
<li class="has-submenu">
Map
<ul class="menu submenu vertical nested" data-submenu>
<li>Pokemons</li>
<li>Poke Gyms</li>
<li>Poke Stops</li>
</ul>
</li>
<li>news</li>
<li class="has-submenu">
<a>Guides</a>
<ul class="menu submenu vertical nested" data-submenu>
<li>
Game guides
</li>
<li>
Site guides
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
This seems to work, give it a go on mobile, I think Foundation will detect mobile and turn the hover into a click, all events are in their documentation here: https://foundation.zurb.com/sites/docs/dropdown-menu.html.
Here's my example that works:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="device-width=width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet"/>
</head>
<body>
<nav class="top-bar">
<ul class="dropdown vertical medium-horizontal menu" data-dropdown-menu>
<li>Home</li>
<li class="has-submenu">
Map
<ul class="menu submenu vertical nested" data-submenu>
<li>Pokemons</li>
<li>Poke Gyms</li>
<li>Poke Stops</li>
</ul>
</li>
<li>news</li>
<li class="has-submenu">
<a>Guides</a>
<ul class="menu submenu vertical nested" data-submenu>
<li>
Game guides
</li>
<li>
Site guides
</li>
</ul>
</li>
</ul>
</nav>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.min.js"></script>
<script>
$(document).ready(function() {
$(document).foundation();
});
</script>
</body>
</html>
I want to have a dropdown menu on my site. I got it working fine when storing the files on my server. However, I'd like to load them from a CDN. What happens when I try this though is that the CSS aspects work fine, but the JavaScript aspects don't, which means that the following HTML:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/foundation/6.2.3/foundation.min.css">
</head>
<body>
<div class="top-bar">
<div class="top-bar-right">
<ul class="dropdown menu" data-dropdown-menu>
<li>
Dropdown menu
<ul class="menu vertical">
<li>
First dropdown link
</li>
<li>
Second dropdown link
</li>
</ul>
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/foundation/6.2.3/foundation.min.js"></script>
<script type="text/javascript">
$(document).foundation();
</script>
</body>
</html>
just produces this:
Any ideas what's wrong with this code?
A quick check at https://github.com/zurb/foundation-sites/blob/v6.3/bower.json shows that Foundation 6 supports jquery version ~ 2.2.0 so changing your JQuery version should solve your issue
$(document).foundation();
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.js"></script>
<div class="top-bar">
<div class="top-bar-right">
<ul class="dropdown menu" data-dropdown-menu>
<li>
Dropdown menu
<ul class="menu vertical">
<li>
First dropdown link
</li>
<li>
Second dropdown link
</li>
</ul>
</li>
</ul>
</div>
</div>