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:
Related
I have a fiddle that changes the contrast and brightness of an image.
When I try and add it as a .vue component onto my site the slider no longer effects the image. I know the issue is around my filter function. I just can't understand why my :style attribute isn't applying the change to me element.
What am I doing wrong/not getting?
fiddle that works - https://jsfiddle.net/BBMAN/fxtrtqpj/14/
code for my .vue component that does not work.
<template>
<div class="brightness-slider container">
<h1>{{ msg }}</h1>
<h2>Built using Vue.js</h2>
<div class="row">
<div class="col-md-10">
<img ref="img" class="img img-responsive" :style="filters" />
</div>
<div class="col-md-2">
<strong>Contrast ({{contrast}})</strong>
<input class="slider vertical" type="range" orient="vertical" v-model="contrast" max="1" min="0" step="0.01" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<h4>
<strong>Brightness ({{brightness}})</strong>
</h4>
<input class="slider horizontal" type="range" v-model="brightness" max="3" min="0" step="0.01" />
</div>
</div>
</div>
</template>
<script>
export default {
name: 'ImageBrightnessSlider',
data() {
return {
//sending data to view.
msg: 'Audience Republic Brightness Modifier',
brightness: 1,
contrast: 1
}
},computed: {
filters() {
const toDash = (str) => str.replace( /([a-z])([A-Z])/g, '$1-$2' ).toLowerCase()
debugger;
return { filter: Object.entries(this._data).filter(item => typeof(item[1]) !== 'object').map(item => `${toDash(item[0])}(${item[1]})`).join(' ') }
}
},
mounted() {
this.$refs.img.src = require('../assets/pleasure-garden-1200-by-768.jpg')
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
input[type=range][orient=vertical]{
writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical; /* WebKit */
width: 8px;
height: 100%;
padding: 0 5px;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 3px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
</style>
"fiddle that works" = incorrect
you are trying to shove HTML CSS JavaScript into Javascript!!!
interpreter Javascript does not understand HTML CSS!
you code must be something like this
index.html
<div id="App">
<!-- HTML code -->
</div>
<script>
// js code
</script>
<style scoped>
/* css code */
</style>
you have many mistakes, please see official documentation
also, you can see my vue examples
UPDATED:
SFC example
Im creating a radial play button for my player And I use css flex for centering the play icon. Its working fine in chrome but not in safari browser.
In my css I have something like this:
.inset {
width: #inset-size;
height: #inset-size;
position: absolute;
margin-left: 20px;
margin-top: 20px;
background-color: #circle-background;
border-radius: 50%;
border: 3px solid #192D48;
font-size: 50px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-around;
-webkit-justify-content: space-around;
i {
-webkit-align-self: center;
align-self: center;
color: black !important;
top: 0px;
left: 1px;
}
}
I already added display: -webkit-flex; to support flex in safari but unluckily it doesnt work and when I checked it in the debugger styles of safari there is no display: -webkit-flex; on it but space -webkit-justify-around appear.
but when I hardcoded it in style like this:
<div class='scr-button radial-progress'>
<div class="circle-gray"></div>
<div class="circle">
<div class="circle-white"></div>
<div class="mask full" ng-style="{'transform': currTime}">
<div class="fill" ng-style="{'transform': currTime}"></div>
</div>
<div class="mask half">
<div class="fill" ng-style="{'transform': currTime}"></div>
<div class="fill fix" ng-style="{'transform': currTime * 2}" ></div>
</div>
</div>
<div class="inset" ng-click="play()" style="display: -webkit-flex;">
<i ng-class="icon()"></i>
</div>
</div>
Its working fine, can someone explain me why it doesnt work when I put it on a class? Is it browser issue? Or Im doing it wrong?
Specs:
Less,
Safari Version: Version 8.0.8,
Angularjs
Im using Twitter Bootstrap 3 and I want to make reusable styling classes. The code below works exactly how I want it to but does it conform to the SMACKS /OOCSS naming convention used by Bootstrap?
Note - Im using LESS not plain CSS so ill be using variables for things like border thickness that are repeated.
<div class="box box-red">
<div class="odd">
First content
</div>
<div class="even">
second content
</div>
<div class="odd">
third content
</div>
</div>
<div class="box box-green">
<div class="odd">
First content
</div>
<div class="even">
second content
</div>
<div class="odd">
third content
</div>
</div>
/* Box styles */
.box {
margin: 10px;
border-radius: 10px;
}
.box > .odd,
.box > .even {
padding: 10px;
}
.box > .odd:last-child,
.box > .even:last-child {
border-bottom: none;
}
/* Red box styles */
.box-red {
background: #ffcccc;
border: 1px solid #ff0000;
}
.box-red > .odd,
.box-red > .even {
border-bottom: 1px solid #ff0000;
}
.box-red > .even {
background: #ff4c4c;
}
/* Green box styles */
.box-green {
background: #BCED91;
border: 1px solid #3B5323;
}
.box-green > .odd,
.box-green > .even {
border-bottom: 1px solid #3B5323;
}
.box-green > .even {
background: #78AB46;
}
http://codepen.io/anon/pen/jduyE
You need to think about what is common between all of the components and what are the differences. In your case, you just want to have different colors, so don't repeat for example the styles for the border-width or border-style. Additionally, it would be tedious and error-prone if you have to markup odd and even rows differently. The :nth-child pseudo class accepts odd and even as keywords. It's important to note that nth-child isn't supported on IE8, but neither is last-child, and you were already using that so I figured that IE8 wasn't important for you.
CSS:
/* Box styles */
.box {
margin: 10px;
border-radius: 10px;
border: 1px solid transparent;
}
.box > .box-content-row {
padding: 10px;
border-bottom: 1px solid transparent;
}
.box > .box-content-row:last-child {
border-bottom: none;
}
/* Red box styles */
.box-red {
background: #ffcccc;
border-color: #ff0000;
}
.box-red > .box-content-row:nth-child(even) {
background: #ff4c4c;
}
.box.box-red > .box-content-row {
border-color: #ff0000;
}
/* Green box styles */
.box-green {
background: #BCED91;
border-color: #3B5323;
}
.box-green > .box-content-row:nth-child(even) {
background: #78AB46;
}
.box.box-green > .box-content-row {
border-color: #3B5323;
}
HTML:
<div class="box box-red">
<div class="box-content-row">
First content
</div>
<div class="box-content-row">
second content
</div>
<div class="box-content-row">
third content
</div>
<div class="box-content-row">
add a fourth div for fun
</div>
<div class="box-content-row">
and what the heck a fifth one too
</div>
</div>
<div class="box box-green">
<div class="box-content-row">
First content
</div>
<div class="box-content-row">
second content
</div>
<div class="box-content-row">
third content
</div>
</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.
I want to create a header similar to facebook where position:fixed. and when you zoom-out the whole page centers itself and when I zoom-in the header also streches..
When I use position:fixed and zoom-in some contents disappear due to lack of space on the window..
<div id="header_line" ></div>
<div id="header">
<div id="heading_name" >Home </div>
<div id="heading_name" style="left:28%;">Advertisement Board</div>
<div id="heading_name" style="left:46%;">Advertise</div>
<div id="heading_name" style="left:60%;">Sign In</div>
<div id="heading_name" style="left:76%;">About Us</div>
</div>
<style>
#header_line{
position:fixed;
top:0%;
left:0%;
width:1370px;
height:7px;
z-index:20;
background-color:#F60;
}
#header{
position:fixed;
left: 0px;
z-index:20;
top: 7px;
width:1370px;
height: 30px;
background-color:#003;
border-bottom:thick;
border-bottom-color:#000;
box-shadow:2px 5px 5px 1px #033;
}
</style>