If I set the max-width property for mdl-layout__header-row class, the dropdowns are not working properly, they are misaligned. Remove the max-width property and everything works fine.
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Test Page</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.red-light_blue.min.css" />
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
<header class="mdl-layout__header">
<div class="mdl-layout__header-row" style="max-width: 1200px;width: 100%;margin: auto;">
<a href="/">
<img style="height: 60px;" src="http://www.vwshops.com/dummy-store-1/img/my-shop-logo-1452186152.jpg" />
</a>
<span>Logo</span>
<button id="DROPDOWN_RIGHT" class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">arrow_drop_down</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect language-menu" for="DROPDOWN_RIGHT">
<li class="mdl-menu__item">One</li>
<li class="mdl-menu__item">Two</li>
<li class="mdl-menu__item">Three</li>
</ul>
<button style="margin-left: auto;" id="DROPDOWN_LEFT" class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">arrow_drop_down</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect language-menu" for="DROPDOWN_LEFT">
<li class="mdl-menu__item">One</li>
<li class="mdl-menu__item">Two</li>
<li class="mdl-menu__item">Three</li>
</ul>
</div>
</header>
</body>
</html>
Add position:relative. This stops the positioned elements straying out of line in .mdl-layout__header-row div. When elements are positioned using absolute positioning you need to setup a parent container to position them off and do that by setting a position:relative for them - otherwise it will be to the outermost html element / document they position off.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Test Page</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.red-light_blue.min.css" />
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
<header class="mdl-layout__header">
<div class="mdl-layout__header-row" style="max-width: 1200px;width: 100%;margin: auto; position:relative;">
<a href="/">
<img style="height: 60px;" src="http://www.vwshops.com/dummy-store-1/img/my-shop-logo-1452186152.jpg" />
</a>
<span>Logo</span>
<button id="DROPDOWN_RIGHT" class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">arrow_drop_down</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect language-menu" for="DROPDOWN_RIGHT">
<li class="mdl-menu__item">One</li>
<li class="mdl-menu__item">Two</li>
<li class="mdl-menu__item">Three</li>
</ul>
<button style="margin-left: auto;" id="DROPDOWN_LEFT" class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">arrow_drop_down</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect language-menu" for="DROPDOWN_LEFT">
<li class="mdl-menu__item">One</li>
<li class="mdl-menu__item">Two</li>
<li class="mdl-menu__item">Three</li>
</ul>
</div>
</header>
</body>
</html>
Related
could anyone let me know what's wrong and cart icon is not displayed?
`<html lang="en">
<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>Website</title>
<link rel="stylesheet" href="" class="rel">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" />
</head>
<body>
<secton id="header">
<img src="/logo.png" class="logo" alt="">
<div>
<ul id="navbar">
<li>Home</li>
<li>Shop</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
<li><i class="fa-solid fa-bag-shopping"></i></li>
</ul>
</div>
</secton>
<script src="script.js"></script>
</body>
Tried different icons and it's not working anyway..
You need to use the proper class names
.fas not .fa-solid
.fa-bags-shopping, .fa-shopping-bag, .fa-shopping-cart, or .fa-shopping-basket not .fa-bag-shopping
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" />
<i class="fas fa-bags-shopping"></i>
<i class="fas fa-shopping-bag"></i>
<i class="fas fa-shopping-cart"></i>
<i class="fas fa-shopping-basket"></i>
I try to add MDL icons to the button in my project, but both span and i elements don't work. Snippet speaks for itself.
<head>
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
</head>
<body>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
<span class="mdi mdi-cart"></span>
<i class="mdi mdi-cart"></i>
Click me
</button>
</body>
Also feel free to test it on jsFiddle: https://jsfiddle.net/dut6g8xn/2/
You can take reference from the below link for more icons.
enter link description here
<!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" />
<title>Document</title>
<link
rel="stylesheet"
href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
</head>
<body>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
<i class="large material-icons">add_a_photo</i> Click me
</button>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
<i class="large material-icons">account_balance</i> Click me
</button>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
<i class="large material-icons">accessibility</i> Click me
</button>
</body>
</html>
I don't think material icons work in buttons, I used to use them but I switched over to fontawesome you can search for icons at fontawesome.com. W3Schools also use them a lot they have a tutorial on them here w3schools.com/icons/fontawesome5_intro.asp. FontAwesome should work in buttons because I have used it before to do so.
<html>
<head>
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' crossorigin='anonymous'>
</head>
<body>
<button><i class='fas fa-user-circle'></i></button>
</body>
</html>
Hope that helped.
I'm trying to keep list buttons at same align but i dont know how to do it if text is long button's position changes automatically
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="revisit-after" content="1 days">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.10/css/mdb.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://asd.online/css/index.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<title>YeniPDF</title>
</head>
<body>
<div class="container">
<ul class="list-unstyled row" style="text-align:center;">
<li class="list-group-item col-4"><form action="" id="sorgu" method="get"><img alt="EXP" src="a" width="100"" height="120"><div class="hizala">EXAMPLE EXAMPLE EXAMPLE</div>
<button type="submit" class="btn btn-success">
<i class="fa fa-arrow-circle-right fa-lg"></i>
</button></form></li>
<li class="list-group-item col-4"><form action="" id="sorgu" method="get"><img alt="EXP" src="
a
" width="100"" height="120"><div class="hizala">EXAMPLE EXAMPLE EXAMPLE EXAMPLE</div>
<button type="submit" class="btn btn-success">
<i class="fa fa-arrow-circle-right fa-lg"></i>
</button></form></li>
<li class="list-group-item col-4"><form action="" id="sorgu" method="get"><img alt="EXP" src="a" width="100"" height="120"><div class="hizala">EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE</div>
<button type="submit" class="btn btn-success">
<i class="fa fa-arrow-circle-right fa-lg"></i>
</button></form></li>
<li class="list-group-item col-4"><form action="" id="sorgu" method="get"><img alt="EXP" src="a" width="100"" height="120"><div class="hizala">EXAMPLE EXAMPLE EXAMPLE</div>
<button type="submit" class="btn btn-success">
<i class="fa fa-arrow-circle-right fa-lg"></i>
</button></form></li>
</ul>
</div>
</body>
</html>
i'm not using any specific css just bootstrap 4 this is js fiddle https://jsfiddle.net/ygoqmb14/2/
Try add min-height for .hizala class
.hizala {
min-height: 130px;
}
I am experimenting with Material Design Web 1.0 and my question is how to correctly use mdc-menu-surface--anchor so that the menu will apear below the TopAppBar?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://fonts.gstatic.com; script-src 'unsafe-inline' https://unpkg.com; style-src 'unsafe-inline' https://unpkg.com https://fonts.googleapis.com"/>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.css" rel="stylesheet"/>
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
<script type="module">
const menu = mdc.menu.MDCMenu.attachTo(document.querySelector('.mdc-menu'));
menu.open = false;
document.getElementById('button1').addEventListener('click', () => menu.open = !menu.open);
</script>
</head>
<body>
<header class="mdc-top-app-bar mdc-top-app-bar--fixed mdc-menu-surface--anchor">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a id="button1" href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">Test</span>
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
</section>
</div>
<div class="mdc-menu mdc-menu-surface" tabindex="-1">
<ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical">
<li class="mdc-list-item" role="menuitem"><span class="mdc-list-item__text">Homepage</span></li>
<li class="mdc-list-item" role="menuitem"><span class="mdc-list-item__text">Imprint</span></li>
<li class="mdc-list-item" role="menuitem"><span class="mdc-list-item__text">Data privacy statement</span></li>
</ul>
</div>
</header>
</body>
</html>
The TopAppBar looks like this:
but when I open the hamburger menu it looks like:
Where I would expect that it would open bellow the hamburger menu/TopAppBar.
Bonus question: How to make it open bellow the TopAppBar on the right side?
I am not sure if this is the best solution, but for the moment I solved this in the following way:
<html lang="en">
<head>
[see above]
<style>
.my-top-app-bar
{
position: static !important;
}
</style>
</head>
<body>
<header class="mdc-top-app-bar my-top-app-bar">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a id="button1" href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">TMS Archiv</span>
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
</section>
</div>
</header>
<div class="mdc-menu-surface--anchor">
<div class="mdc-menu mdc-menu-surface" tabindex="-1">
<ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical">
<li class="mdc-list-item" role="menuitem"><span class="mdc-list-item__text">Homepage</span></li>
<li class="mdc-list-item" role="menuitem"><span class="mdc-list-item__text">Imprint</span></li>
<li class="mdc-list-item" role="menuitem"><span class="mdc-list-item__text">Data privacy statement</span></li>
</ul>
</div>
</div>
</body>
</html>
Important are the following things:
The .my-top-app-bar {position: static !important;} to make the mdc-top-app-bar a part of the page that is not flying over all other elements.
The extra div below the header that will become the anchor for the menu right below to top-app-bar
Problem:
Fitting five links inside a navigation using Materialize CSS. Right now, three links fit and I can even add a fourth. But when I add five links in total, the last two break.
Minimal Working Example (MWE):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
<title>Materialize</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<header>
<nav class="indigo" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo"><i class="material-icons md-36">flight_takeoff</i> Logo</a>
<ul class="right hide-on-med-and-down">
<li class="active">Home</li>
<li>About</li>
<li><a href="javascript:void(0)">Contact</li>
<li><i class="material-icons left">add_circle</i> Registration</li>
<li><i class="material-icons left">account_circle</i> Login</li>
</ul>
</div>
</nav>
</header>
</body>
</html>
Desired output:
To get all five links to fit inside the navigation on the right side.
It's because your <a href="#">Contact is missing the close tag.
Here's the updated code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
<title>Materialize</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<header>
<nav class="indigo" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo"><i class="material-icons md-36">flight_takeoff</i> Logo</a>
<ul class="right hide-on-med-and-down">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li> <!-- Note the </a> closing tag -->
<li><i class="material-icons left">add_circle</i> Registration</li>
<li><i class="material-icons left">account_circle</i> Login</li>
</ul>
</div>
</nav>
</header>
</body>
</html>