I want to create an alert using materialize css. I don't know how. Please help. I just want to create a simple html that will display an alert error without using javascript. Thanks.
since this has no answer yet, I made something that may help you. Here is the repo
And here is a preview.
html {
line-height: 1.5;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}
.materialert{
position: relative;
min-width: 150px;
padding: 15px;
margin-bottom: 20px;
margin-top: 15px;
border: 1px solid transparent;
border-radius: 4px;
transition: all 0.1s linear;
webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.materialert .material-icons{
margin-right: 10px;
}
.materialert .close-alert{
-webkit-appearance: none;
border: 0;
cursor: pointer;
color: inherit;
background: 0 0;
font-size: 22px;
line-height: 1;
font-weight: bold;
text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
filter: alpha(opacity=40);
margin-bottom: -5px;
position: absolute;
top: 16px;
right: 5px;
}
.materialert.info{
background-color: #039be5;
color: #fff;
}
.materialert.success{
background-color: #43a047;
color: #fff;
}
.materialert.error{
background-color: #c62828;
color: #fff;
}
.materialert.danger{
background-color: #c62828;
color: #fff;
}
.materialert.warning{
background-color: #fbc02d;
color: #fff;
}
<html lang="es-MX">
<head>
<meta charset="UTF-8">
<link href="css/materialert.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="materialert">
<i class="material-icons">check_circle</i> <span>Bienvenido, Linebeck</span>
<button type="button" class="close-alert">×</button>
</div>
<div class="materialert info">
<div class="material-icons">info_outline</div>
Oh! What a beautiful alert :)
</div>
<div class="materialert error">
<div class="material-icons">error_outline</div>
Oh! What a beautiful alert :)
</div>
<div class="materialert success">
<div class="material-icons">check</div>
Oh! What a beautiful alert :)
</div>
<div class="materialert warning">
<div class="material-icons">warning</div>
Oh! What a beautiful alert :)
</div>
</body>
</html>
Hope it helps!
Materializecss alert box
Codepen link
<div class="row" id="alert_box">
<div class="col s12 m12">
<div class="card red darken-1">
<div class="row">
<div class="col s12 m10">
<div class="card-content white-text">
<p>1. Username cant be empty</p>
<p>2. Password cant be empty</p>
<p>3. Address cant be empty</p>
<p>4. Name cant be empty</p>
</div>
</div>
<div class="col s12 m2">
<i class="fa fa-times icon_style" id="alert_close" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
.icon_style{
position: absolute;
right: 10px;
top: 10px;
font-size: 20px;
color: white;
cursor:pointer;
}
$('#alert_close').click(function(){
$( "#alert_box" ).fadeOut( "slow", function() {
});
});
Unfortunately materialize doesn't provide alerts as bootstrap does.
You can use card-panel class instead:
http://materializecss.com/color.html
But you won't have close button to hide it.
This is a pretty late answer but you can use the modal class for these kind of things.
Example:
$(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal').modal();
});
<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.97.8/js/materialize.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.css" rel="stylesheet"/>
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Alert</h4>
<p>You can use this as a alert!</p>
</div>
<div class="modal-footer">
OK
</div>
</div>
Reference: http://materializecss.com/modals.html#!
$(document).ready(function(){
Materialize.toast('I am Alert', 4000)
});
See DEMO here: http://codepen.io/ihemant360/pen/pbPyJb
You can use Matdialog.js to create different types of dialogboxes.
check it out at - MatDialog.js website
Install Toastr
bower install toastr
Require files
/bower_components/toastr.css
/bower_components/toastr.js
initialize toastr
toastr.options = {
"closeButton": true,
"debug": false,
"newestOnTop": false,
"progressBar": false,
"positionClass": "toast-bottom-left",
"preventDuplicates": true,
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "3000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
}
Use
Success: toastr.success('success');
Error: toastr.error('fail');
Info: toastr.info('info');
Credit
Documentation: https://github.com/CodeSeven/toastr
Demo: http://codeseven.github.io/toastr/demo.html
I resolved this issue by using chips (https://materializecss.com/chips.html) and formating css style to fit the purpose.
https://codepen.io/krazer_spa/pen/VRmxzy
<div class="container">
<div class="flash_message">
<div class="chip chip_message_info">
This is an info message
<i class="close material-icons">close</i>
</div>
<div class="chip chip_message_warning">
This is a warning message
<i class="close material-icons">close</i>
</div>
<div class="chip chip_message_alert">
This is an alert message
<i class="close material-icons">close</i>
</div>
</div>
</div>
<style>
.flash_message {
position: fixed;
top: 70px;
z-index: 99999;
min-width: 80%;
}
.chip_message_info,
.chip_message_warning,
.chip_message_alert {
text-align: center;
padding-top: 10px !important;
padding-bottom: 10px !important;
font-size: 20px !important;
min-width: 80%;
min-height: 50px;
}
.chip_message_info {
background-color: #bbdefb !important;
}
.chip_message_warning {
background-color: #ffcc80 !important;
}
.chip_message_alert {
background-color: #ef9a9a !important;
}
</style>
ReactJS + Materialize
Alert.js
import React, { useState } from "react";
const Alert = ({ type, children }) => {
const [isVisible, setIsVisible] = useState(true);
// set alert color based on type
let color;
switch (type) {
case "danger":
color = "red lighten-2";
break;
case "success":
color = "green lighten-2";
break;
case "info":
color = "blue lighten-2";
break;
case "warning":
color = "yellow lighten-2";
break;
default:
color = "white lighten-2";
break;
}
return (
<>
{isVisible && (
<div className="row mv--small" id="alert-box">
<div className="col s12 m12">
<div className={`card m--none z-depth-0 ${color}`}>
<div className="card-content black-text">{children}</div>
<i
className="material-icons icon_style"
id="alert_close"
aria-hidden="true"
onClick={() => setIsVisible(false)}
>
close
</i>
</div>
</div>
</div>
)}
</>
);
};
export default Alert;
You can then use it like this:
<Alert type="info">
test
</Alert>
And it looks like this:
I am trying to align a set of "buttons" made out of DIV elements that are arranged along the bottom of a web page using the CSS display: inline-block. I've attached a fiddle which illustrates the issue.
The problem is that this current code works on all modern browsers except Safari (7, 8). I don't know if this is a bug in WebKit that Safari uses, or something that I've allowed to happen by not using the right incantations.
The thing that triggers the unwanted behavior is the nested DIV.btn-sub; however, removing that text is not an option to "fix" the issue.
Here's the expected behavior (snap taken from Firefox 34, similar behavior on IE 9, 10, and latest Chrome):
Here's what happens on Safari:
Any help here would be appreciated!
It's usually best practice to use a list when creating inline-blocked elements in a row/list, such as a navigation.
The issue here seems to be the block being set with a padding directly; relative it's parent. Which somehow is turning it into a margin or something similar.
You can try stripping CSS until you get a full height out of the blocks, and then add another inner div which you can call .btn-padding which contains your top padding.
Here is similar.
body, html {
height: 100%;
margin: 0;
background: green;
}
#wrap {
display: block;
width: 100%;
position: fixed;
bottom: 0px;
height: 50px;
border:0;
background-color: blue;
color: #fff;
}
#btnls {
display: block;
list-style-type: none;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#btnls li {
display: inline-block;
margin-right: 10px;
background-color: purple;
min-width: 158px;
max-width: 300px;
height: 50px;
text-align: center;
vertical-align: middle;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#btnls li .btn-padding {
display: block;
padding-top: 10px;
width: 100%;
height: 50px;
}
#btnls li .btn-padding .sub-btn {
display: block;
font-size: x-small;
margin: 0;
padding: 0
}
<div id="wrap">
<ul id="btnls">
<li>
<div class="btn-padding">Foo
<div class="sub-btn">Bar</div>
</div>
</li>
<li>
<div class="btn-padding">Foo</div>
</li>
<li>
<div class="btn-padding">Foo</div>
</li>
</ul>
</div>
I tried to place an h1 element above a div element using the css property z-index, but it's not working!
Here's my html:
<div id="header">
<div id="headerblock">
</div>
<h1>This is my header text</h1>
</div>
The #headerblock has a black surface including some transparency.
I want the h1 to be appearing above the #headerblock. As I mentioned the z-index property isn't working. Does someone have a solution for this? Or at least a reason why it's not working?
Thanks.
Gotta have a position on the h1.
h1 {
position:relative;
z-index: 500;
}
#header{
background-image: url(img/head.jpg);
background-size: 100%;
height: 520px;
width: 100%;
top:49px;
position: absolute;
margin:0 auto;
text-align:center;
}
#headerblock{
background-color:#444444;
opacity:0.7;
filter:alpha(opacity=70);
width:100%;
position:absolute;
height:200px;
}
<div id="header">
<div id="headerblock"></div>
<h1 style="color:white">This is my header text</h1>
</div>
I am having trouble centering my navigation bar, I have tried display:inline-block and then align center like most posts suggest but it doesn't seem to be working.
HTML:
<!--Navigation-->
<div class="band navigation">
<nav class="container primary">
<div class="sixteen columns">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Projects</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
</div>
CSS:
nav.primary{
display: table;
margin: 0 auto;
}
nav.primary ul, nav.primary ul li {
margin: 0px;
}
nav.primary select {
display: none;
width: 100%;
height: 28px;
margin: 21px 0;
}
nav.primary ul li {
display: inline;
float: left;
position: relative;
}
nav.primary ul li a {
display: inline-block;
line-height: 49px;
padding: 0 14px;
color: white;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
letter-spacing: 0.08em;
background: ##999999;
}
nav.primary ul li a:hover {
background: #2ecc71;
cursor: pointer;
}
Ok finally got it:
nav.primary ul li {
display: inline;
float: left; <---
position: relative;
Remove the float: left;
Since the navigation is the full width of the containing div, there is no need to mess with floats, the list items will line up with just display: inline;
I tried something else that works... It seems to work better than trying to build in something custom thus far in my experience with Skeleton... Although it produces a bit less pretty markup for the HTML, the rigidity of the final result works for me. Here is my code so that you can see what I did to achieve the desired effect:
<div class="row">
<div class="two columns offset-by-three">
Portfolio
</div>
<div class="two columns">
About
</div>
<div class="two columns">
Contact
</div>
</div>
What you can see here is that the skeleton framework allows for the columns to operate naturally and restack at lower resolutions without any extra code. The only tricky part really is setting up the offset on the left most item.
Have you tried nav.primary ul {text-align: center;}
As well as keeping the left/right margins to auto, this worked for me when I was using the skeleton framework.
My sticky footer with my fontawesome icons is displaying perfectly in all browsers, but in Safari, the links aren't working.
Here is my code:
<style>
h4 {
font-size: 1em;
color: #A0A0A0;
bottom: 15px;
position: relative;
letter-spacing: 10px;
}
.footer{
position: fixed;
left:0px;
width: 100%;
bottom: 0px;
height: 20px;
background: #404040;
padding-bottom: 25px;
opacity:0.95;
}
</style>
......
<div class="footer">
<h4>
<a href="https://twitter.com/">
<i class="icon-twitter icon-2x"></i> </a>
<a href="https://www.facebook.com/">
<i class="icon-facebook icon-2x"></i></a>
<a href="http://wordpress.com/">
<i class="icon-rss icon-2x"></i></a>
</h4>
</div>
Can anyone tell me why this doesn't work in safari? And how to fix it?
I just into this problem. I believe this is caused by safari giving the target no dimensions (i.e. 0px x 0px). If you force inline-block on the <i> element it should to work correctly.
Had the same problem.
I added to the icon's class
display:inline-block;
and it worked fine!