I have added a jumbotron to my webpage, my page is now displaying the bottom and right scroll bar! Not sure how to resolve this.
Any tip's or pointers much appreciated.
url http://tyrescanner.net/contact-us
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="jumbotron">
<h1><span style="color: #ffffff;">Welcome to Tyrescanner</span></h1>
<p></p>
<h2>Contact us.</h2>
</div>
</div>
</div>
</div>
what are you asking for? I assume you just don't want bottom scrollbar ,is that right?
If so, below is your CSS for HTML . change that as below it's in your bootstrap.css file and line number 1071
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
overflow: auto;
overflow-x: hidden;
}
Your jumbotron is wrapped with divs row and col-md-12:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="jumbotron">
Delete them and leave only jumbotron.
or remove paddings from your css:
.container-fluid {
width: 100%;
padding-top: 0px;
/* padding-left: 0px; */
/* padding-right: 0px; */
padding-bottom: 0px;
}
It overwrites bootstrap css and cause problem with page width.
After viewing your site I see some issues:
You're using a container-fluid and a nested container-fluid as the jumbotron parent element, the nested one is redundant.
Then I see you've overridden container-fluid and .col--12 classes default bootstrap left/right padding to 0px but you didn't change the default margin of the .row class to have 0px left/right margin hence your bottom scroll bar.
For the footer, remove the margin-top and make the footer a direct child of the body element then add the following css to the form, body and html elements: height:100%;, the rest is margins that you added to the elements.
I have a bootstrap tooltip which I have custom styled. There seems to be an issue with it. Whenever we hover over it, it opens and then immediately closes.
HTML -
<div class="container" style="padding-top:300px">
<div class="row">
<div class="col-md-12">
<span>A bunch of random text</span><span class="info-circle" data-html="true" title="" data-original-title="Tooltip Text">i</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>A bunch of random text</span><span class="info-circle" data-html="true" title="" data-original-title="Tooltip Text">i</span>
</div>
</div>
Here's an inline link to jsFiddle
UPDATED
I made a few changes. Try this: https://jsfiddle.net/2h7jbt9n/6/
HTML
<div class="container" style="padding-top:30px">
<div class="row">
<div class="col-md-12">
<span>A bunch of random text</span><span class="info-circle" title="YoHo Ho Ho" data-placement="top" data-toggle="tooltip">i</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>A bunch of random text</span><span class="info-circle" title="YoHo Ho Ho" data-placement="top" data-toggle="tooltip">i</span>
</div>
</div>
JS
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip({
container: '.info-circle'
});
});
The issue was with padding for the info-circle. I wrapped it in a container. It doesn't flicker now.
Hope it helps.
You are no longer using the tooltip-arrow as the visual arrow you are using the :before and :after after as the visual arrow. The problem is that you have made the arrow bigger and made your own triangles. When you make your css arrow you are using borders. You have set your top border colors to white and blue to make it seem like the arrow has a border as well. In doing this you have forgotten that your arrow still has a bottom transparent border and this transparent border is covering up the element that you are hovering over to deploy the tooltip. So set your :before and :after psuedo elements for your .tooltip-arrow to have a bottom border of none. Like so:
.tooltip.top .tooltip-arrow:after {
content: " ";
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
left: -17px;
top: -5px;
border-width: 12px;
border-top-color: #003f6e;
border-bottom:none;
}
.tooltip.top .tooltip-arrow:before {
content: " ";
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
left: -15px;
top: -5px;
border-width: 10px 10px 0;
border-top-color: #fff;
border-bottom:none;
z-index: 1;
}
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 working with a third party website which allows me to modify code to suit my needs. I have a product page with responsive columns. Administrative users can upload images for the products which end users can order. I've set it so the images are responsive as well, but because the product images are not all the same aspect ratio, I have some items which are taller than others, making the page leave spaces in the column blank. I want the images to stay responsive and keep their aspect ratio, but have the containers they are in all have the same height and responsive width. Changing max-height and min-height just gives the same response as setting height. How do I do that while keeping the width correct?
<div class="col-xs-12 text-center">
<div class="well text-center">
<href="product/{{LineItem.Product.InteropID}}">
<figure ng-show="LineItem.Variant.SmallImageUrl || LineItem.Product.SmallImageUrl" >
<img class="img-responsive" style="max-height: 200px; min-height: 200px; width: auto; margin: auto;" ng-src="{{LineItem.Variant.SmallImageUrl || LineItem.Product.SmallImageUrl}}"/>
</figure>
<div class="empty" ng-hide="LineItem.Variant.SmallImageUrl || LineItem.Product.SmallImageUrl">
<span class="fa empty"><i class="fa fa-camera"></i></span>
</div>
</a>
</div>
</div>
The best solution would be to force users to upload an image of a certain height/width, but barring that, you could just put the responsive images inside of a div that has a fixed size and it's css overflow property set to hidden.
<figure ng-show="LineItem.Variant.SmallImageUrl || LineItem.Product.SmallImageUrl" >
<div style="height:200px; width:200px;overflow:hidden;">
<img class="img-responsive" ng-src="{{LineItem.Variant.SmallImageUrl || LineItem.Product.SmallImageUrl}}"/>
</div>
</figure>
Now, the image is fully responsive, but any portions of it that are bigger than its container will be clipped.
HTML
<div class="img-wrap ratio-4-3">
<div class="img-content">
<img src="https://picsum.photos/200" />
</div>
</div>
SCSS
.img-wrap{
position: relative;
.img-content{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
> img{
max-width: 100%;
max-height: 100%;
width: auto;
}
}
&.ratio-4-3{
padding-top: 75%;
}
&.ratio-16-9{
padding-top: 56.25%;
}
&.ratio-3-2{
padding-top: 66.66%;
}
&.ratio-8-5{
padding-top: 62.5%;
}
}
https://jsfiddle.net/huypn/pcwudrmc/25813/
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>