I have a floating red bubble, much like used in googles material design.
I am using Materializecss for web development. Info can be found here on the floating red bubble I am trying to implement:
http://materializecss.com/buttons.html
I have tried all their built in helpers for css to move it center at the bottom but no luck. Here is my html:
<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
<title>Starter Template - Materialize</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection">
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection">
</head>
<body style="position: relative;">
<div class="navbar-fixed ">
<nav class="orange " role="navigation">
<div id="replaceBar" class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Beer Portfolio</a>
<ul class="right hide-on-med-and-down left">
<li>Statistics</li>
</ul>
<ul style="left: -250px;" id="nav-mobile" class="side-nav left">
<li>Statistics</li>
</ul>
<img style="vertical-align: middle;" src="img/menuIcon.png" height="30" width="30">
<ul id="search" class="right valign-wrapper">
<li class="valign">
<img style="vertical-align: middle;" src="img/searchIcon.png" height="30" width="30">
</li>
</ul>
</div>
</nav>
</div>
<div class="collection"><h5 class="orange-text text-darken-2"> Bitter</h5> <div class="right">65% </div> <div class="progress col "> <div class="determinate orange" style="width:65%"> </div> </div><h5 class="orange-text text-darken-2"> Malty</h5> <div class="right">15% </div> <div class="progress col "> <div class="determinate orange" style="width:15%"> </div> </div><h5 class="orange-text text-darken-2"> Smooth</h5> <div class="right">15% </div> <div class="progress col "> <div class="determinate orange" style="width:15%"> </div> </div><h5 class="orange-text text-darken-2"> Dry</h5> <div class="right">5% </div> <div class="progress col "> <div class="determinate orange" style="width:5%"> </div> </div></div><div class="center-align" style="position: fixed; bottom: 0;"> <a id="redCircle" class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">add</i></a></div>
<!-- Modal Structure For loading beer-->
<div style="z-index: 1003; display: none; opacity: 0; transform: scaleX(0.7); top: 0px;" id="modal1" class="modal">
<div class="modal-content center">
<div>
<span class="card-title">Loading Taste Tags</span>
</div>
<div id="load" class="preloader-wrapper big active ">
<div class="spinner-layer spinner-yellow-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
</div>
<div style="left: 0px;" class="drag-target"></div><div class="hiddendiv common"></div></body></html>
My css I am using can be found here:
http://pastebin.com/bHW6Fzp3
Assuming this is the fix you are looking for, your container needs to have a width greater than the width of the button, and from there you can add margin: 0 auto;
As noted above, you should create a fiddle or similar first to demonstrate your problem.
.center-align {
width: 100%;
}
.btn-floating.btn-large {
margin: 0 auto;
}
Updated your fiddle: https://jsfiddle.net/2ftu5rqg/3/
I didn't notice the centering class that was already in there - all you really need is a width on the parent container, which in this example is .center-align.
Related
Slick slider messing with font in complete different location on Chrome
Very weird situation.
When my slick slider goes to the next / previous image one 3-column block with red titles in them the font goes a little darker and then comes back normaly as the slider finished sliding one element.
It looks like the font ins "blinking"
What I tried:
downgrading slick back to 1.6.0
remove all classes of the 3-column block and style each element
different window-sizes
different browsers (Firefox & Internet Explorer)
Validate Source-Code (NU checker showed no errors.)
Nothing is working.
It works fine in Firefox & IE but not in Chrome - can't test in safari but somebody told me the same is happening there.
My Chrome - version: 87.0.4280.66
I really don't know what else i could do.
Here is a GIF of what's happening:
Simplified Sourcecode (In Execution | Slick already initiated)
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=10">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="robots" content="all,follow">
<link rel="stylesheet" href="//cdn.componentator.com/spa.min#14.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:400,200,700">
<link rel="stylesheet" href="/widgets.css?ts=gnt3q">
<script src="//cdn.componentator.com/spa.min#14.js"></script>
<meta name="keywords" content="Node.js, eshop, ecommerce, Total.js">
<meta name="author" content="Peter Širka">
<link type="text/css" rel="stylesheet" href="/default/css/bootstrap.min.css">
<script src="/default/js/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet" href="/default/css/slick.css">
<script src="/default/js/slick.min.js"></script>
<link type="text/css" rel="stylesheet" href="/default/css/default.css">
<link type="text/css" rel="stylesheet" href="/default/css/style.css">
<script src="/default/js/default.js"></script>
<script src="/default/js/custom.js"></script>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
</head>
<body data-jc="exec,binder,modificator">
<div data-jc="loading" class="ui-loading hidden">
<div></div>
</div>
<div data-jc="shoppingcart" data-jc-path="shoppingcart" data-jc-config="discount:0"></div>
<div data-jc="message" data-jc-config="button:Schließen" class="ui-message hidden"></div>
<div data-jc="autocomplete" class="ui-autocomplete-container hidden">
<div class="ui-autocomplete" style="max-height: 200px;">
<ul></ul>
</div>
</div>
<div class="header-spacer"></div>
<main class="main" style="min-height: 939px;">
<div class="container">
<div class="row">
<div class="col-12">
<section class="body">
<div>
<div></div>
<div class="productslider">
<div class="row slick-initialized slick-slider"><button class="slick-prev slick-arrow" aria-label="Previous" type="button" style="">Previous</button>
<div class="slick-list draggable">
<div class="slick-track" style="opacity: 1; width: 2400px; transform: translate3d(-1280px, 0px, 0px);">
<div class="col-md-3 slick-slide slick-cloned" data-slick-index="-6" aria-hidden="true" style="width: 80px;" tabindex="-1">
<a href="#test1" tabindex="-1">
<div class="product">
<p class="product-title">Test 1</p><img src="https://placehold.it/200x200" border="0" alt="Test 1">
</div>
</a></div>
<div class="col-md-3 slick-slide slick-cloned" data-slick-index="-5" aria-hidden="true" style="width: 80px;" tabindex="-1">
<a href="#test1" tabindex="-1">
<div class="product">
<p class="product-title">Test 1</p><img src="https://placehold.it/200x200" border="0" alt="Test 1">
</div>
</a></div>
<div class="col-md-3 slick-slide slick-cloned" data-slick-index="-4" aria-hidden="true" style="width: 80px;" tabindex="-1">
<a href="#test1" tabindex="-1">
<div class="product">
<p class="product-title">Test 1</p><img src="https://placehold.it/200x200" border="0" alt="Test 1">
</div>
</a></div>
<div class="col-md-3 slick-slide slick-cloned" data-slick-index="-3" aria-hidden="true" style="width: 80px;" tabindex="-1">
<a href="#test1" tabindex="-1">
<div class="product">
<p class="product-title">Test 1</p><img src="https://placehold.it/200x200" border="0" alt="Test 1">
</div>
</a></div>
<div class="col-md-3 slick-slide slick-cloned" data-slick-index="-2" aria-hidden="true" style="width: 80px;" tabindex="-1">
<a href="#test1" tabindex="-1">
<div class="product">
<p class="product-title">Test 1</p><img src="https://placehold.it/200x200" border="0" alt="Test 1">
</div>
</a></div>
<div class="col-md-3 slick-slide slick-cloned" data-slick-index="-1" aria-hidden="true" style="width: 80px;" tabindex="-1">
<a href="#test1" tabindex="-1">
<div class="product">
<p class="product-title">Test 1</p><img src="https://placehold.it/200x200" border="0" alt="Test 1">
</div>
</a></div>
</div>
</div><button class="slick-next slick-arrow" aria-label="Next" type="button" style="">Next</button>
</div>
</div>
<div></div>
</div>
</section>
</div>
</div>
</div>
</main>
<footer class="">
<div class="container">
<hr><br>
<div class="row" style="
font-size: 40px !important;
">
<div class="col-md-4 text-md-left text-center">
<h2>TEXT 1</h2>
</div>
<div class="col-md-4 text-md-center text-center">
<h2>TEXT 2</h2>
</div>
<div class="col-md-4 text-md-right text-center">
<h2>TEXT 3</h2>
</div>
</div>
</div>
</footer>
<div class="scrollToTop" style="display: none;"></div>
</body>
</html>
Maybe you know why this is happening / you have the same problem
Would really appreciate it,
as i already spent hours debugging this...
Give the footer position: relative; and z-index: 1;
In this way you take the element out of the stacking context, and that usually solves the problem. 😊
I have couple of questions about site, which I'm making with help of Bootstrap 4. I would like to make simple page just using on screen space (no scroll except mobile version) with logo in the upper middle of the page, full width navbar and then 2 rows of 3 full width images, which would be cropped as resolution allows. Here is the sketch. I made some HTML/CSS proposals, but they didn't work properly. Do you have some ideas how to make it? :/
Thanks a lot!
<!DOCTYPE html>
<html lang ="cs">
<head>
<meta charset="utf-8">
<!-- Mobile adaptation -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Page information -->
<meta name="description" content="GeoExpo Eshop. Od replik přes zkameněliny do trilobitů.">
<meta name="keywords" content="eshop zoo, eshop Zoo Praha, GeoExpo, zkameněliny, suvenýry, repliky, šutry, kameny">
<meta name="author" content="Ondřej Sloup">
<!-- Mine Stylesheet -->
<link rel="stylesheet" href="stylesheet/stylesheet.css">
<!-- Imported Stylesheets -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>
<!-- Scripts (jQuery) -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<!-- Tittle -->
<title>Geo Expo</title>
</head>
<body>
<header>
<img class="logo d-block img-fluid mx-auto" src="./logo/PNG.png" alt="Logo" />
</header>
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Toogle" aria-controls="Toogle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><i class="fa fa-bars mx-auto" aria-hidden="true"></i></span>
</button>
<div class="collapse navbar-collapse" id="Toogle">
<ul class="navbar-nav mt-2 mt-lg-0 mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Repliky</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Unikáty</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Instalace</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kontakt</a>
</li>
</ul>
</div>
</nav>
<main class="container-fluid p-0">
<div class="row align-items-center no-gutters">
<div class="col-4">
<img class="image" width="auto" src="./images/bridge.jpg" alt="Bridge">
</div>
<div class="col-4">
<img class="image" width="auto" src="./images/park.jpg" alt="Park">
</div>
<div class="col-4">
<img class="image" width="auto" src="./images/tunnel.jpg" alt="Tunnel">
</div>
</div>
<div class="row align-items-center no-gutters">
<div class="col-4">
<img class="image" width="auto" src="./images/bridge.jpg" alt="Bridge">
</div>
<div class="col-4">
<img class="image" width="auto" src="./images/park.jpg" alt="Park">
</div>
<div class="col-4">
<img class="image" width="auto" src="./images/tunnel.jpg" alt="Tunnel">
</div>
</div>
</main>
And CSS
/*INSERT*/
#import url('https://fonts.googleapis.com/css?family=Cinzel+Decorative');
#import url('https://fonts.googleapis.com/css?family=Cinzel');
/*ALL*/
html, body, main {
height: 100% !important;
max-width: 100% !important;
}
body {
background: grey !important;
}
/*Header*/
header {
height: 15%;
}
.logo {
display: inline-block;
padding: 1rem 0 .5rem 0 !important;
}
/*Images*/
.row {
height: 30% !important;
}
/* NavBar */
nav {
font-size: 13pt;
font-family: 'Cinzel', sans-serif;
padding: .3rem 0 .3rem 0 !important;
text-transform: capitalize;
}
.nav-link {
color: #fff !important;
margin: 0 25% 0 25%;
}
.nav-link:hover {
font-style: underline;
}
For future, you can use the http://shoelace.io/
That being said, your html code should look like this:
<div class="container">
<div class="row Logo">
<div class="col-sm-3">
<!-- This is where you should put your logo image -->
</div>
</div>
<div class="row Menu">
<div class="col-sm-12">
<!-- this is where your menu goes in -->
</div>
</div>
<div class="row Images">
<div class="col-sm-4">
<!-- your first image -->
</div>
<div class="col-sm-4">
<!-- your second image -->
</div>
<div class="col-sm-4">
<!-- your third image -->
</div>
<div class="col-sm-4">
<!-- your forth image -->
</div>
<div class="col-sm-4">
<!-- your fifth image -->
</div>
<div class="col-sm-4">
<!-- your last image -->
</div>
</div>
</div>
Also, have a look at the bootstrap layout page https://getbootstrap.com/docs/4.0/layout/grid/
I attach my code and output view. Can anyone help me out how to set alignment for sidebar. Thanks in advance.
sidebar.blade.php
<!-- Sidebar Widgets Column -->
<div class="col-md-4 container">
<!-- Search Widget -->
<div class="card my-4">
<h5 class="card-header">Search</h5>
<div class="card-body">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
</div>
</div>
<!-- Categories Widget -->
<div class="card my-4">
<h5 class="card-header">Categories</h5>
<div class="card-body">
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
Laravel
</li>
<li>
PHP
</li>
<li>
HTML
</li>
</ul>
</div>
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
JavaScript
</li>
<li>
CSS
</li>
<li>
Web Design
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Side Widget -->
<div class="card my-4">
<h5 class="card-header">Stats</h5>
<div class="card-body">
You can put anything
</div>
</div>
</div>
Master.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>myblog</title>
<!-- Custom styles for this template -->
<link href="/public/css/blog-post.css" rel="stylesheet">
</head>
<body style="background-color: #e9ecef;">
#include('partials.nav')
#include('partials.jumbotron')
<!-- Page Content -->
<div class="container">
<div class="row">
#yield('content')
</div>
<!-- /.row -->
#include('partials.sidebar')
</div>
<!-- /.container -->
#include('partials.footer')
</body>
<style type="text/css">
.pagination {
margin-bottom: 20px;
padding-right: 500px;
width: 300px;
height: 23px;
font-size: 25px;
color: red;
padding-left: 500px;
}
</style>
</html>
Output:
Your sidebar is a sibling to the <div class="row">. It needs to be a child, instead.
Also, don't use the container class on your col-md-4
<div class="row">
#include('partials.sidebar')
#yield('content')
</div>
This will, of course, assume your content always has a <div class="col-md-8"> on it to compliment the <div class="col-md-4>" on your sidebar.
Here is a simple dropdpwn popup example from semantic-ui which fails to work:
<head runat="server">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/site.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>
<title><%: Page.Title %></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div class="example">
<div class="ui menu">
<a class="browse item" style="">
Browse
<i class="dropdown icon"></i>
</a>
<div class="ui fluid popup top left transition hidden" style="top: auto; left: 1px; bottom: 69px; right: auto; width: 653px;">
<div class="ui four column relaxed divided grid">
<div class="column">
<h4 class="ui header">Fabrics</h4>
<div class="ui link list">
<a class="item">Cashmere</a>
<a class="item">Linen</a>
<a class="item">Cotton</a>
<a class="item">Viscose</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Size</h4>
<div class="ui link list">
<a class="item">Small</a>
<a class="item">Medium</a>
<a class="item">Large</a>
<a class="item">Plus Sizes</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Colors</h4>
<div class="ui link list">
<a class="item">Neutrals</a>
<a class="item">Brights</a>
<a class="item">Pastels</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Types</h4>
<div class="ui link list">
<a class="item">Knitwear</a>
<a class="item">Outerwear</a>
<a class="item">Pants</a>
<a class="item">Shoes</a>
</div>
</div>
</div>
</div>
<a class="item">
<i class="cart icon"></i>
Checkout
</a>
</div>
</div>
<div id="web_content">
</div>
<div id="web_footer">
</div>
</form>
<script type="text/javascript">
$('.example .menu .browse').popup({
inline: true,
hoverable: true,
position: 'bottom left',
delay: {
show: 300,
hide: 800
}
});
</script>
</body>
when I click/hover on browse nothing happens. i don't know enough about jquery selectors tough. thanks for reading.
I have js fiddle which works fine,
I tried to replicate it on my local system, where slider(menu icon) neither appears nor works. Here is my jsfiddle and source code, can anyone tell me what I missed.
Jsfiddle: https://jsfiddle.net/karimkhan/nzxd5r3r/10/
source code on local system:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
<title>Starter Template - Materialize</title>
<!--<link href="font/material-design-icons/Material-Design-Icons.ttf" rel="stylesheet">-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<link href="css/materialize.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<script>
$(".button-collapse").sideNav();
$(".dropdown-button").dropdown();
$('.button-collapse').sideNav({menuWidth: 240, activationWidth: 70});
</script>
</head>
<body>
<main>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<nav>
<div class="nav-wrapper light-blue lighten-1">
<ul id="nav-mobile" class="full side-nav">
<li>John Daglas
<ul class="collection">
<li class="collection-item avatar">
<img src="http://globe-views.com/dcim/dreams/dog/dog-05.jpg" alt="" class="circle">
<span class="title">Title</span>
<p>First Line <br>
Second Line
</p>
</li>
</ul>
</li>
<li>Follower analysis</li>
<li>Tweet analysis</li>
<li>Retweet analysis</li>
<li>Tweet analysis</li>
</ul>
<!-- Include this line below -->
<a class="button-collapse" href="#" data-activates="nav-mobile"><i class="mdi-navigation-menu"></i></a>
<!-- End -->
</div>
</nav>
<div class="row scrollspy grey lighten-4">
<div class="container">
<div class="row">
<div class="col s2 m2">
<div class="card-panel green accent-4">
<span class="white-text">Tweets
</span>
</div>
</div>
<div class="col s2 m2 ">
<div class="card-panel deep-orange accent-2">
<i class="material-icons">repeat</i>
<span class="white-text">Retweet
</span>
</div>
</div>
<div class="col s2 m2">
<div class="card-panel green accent-4">
<span class="white-text"> Favourite
</span>
</div>
</div>
<div class="col s2 m2 ">
<div class="card-panel deep-orange accent-2">
<span class="white-text"> Followers
</span>
</div>
</div>
<div class="col s2 m2">
<div class="card-panel green accent-4">
<span class="white-text"> Sentiment
</span>
</div>
</div>
<div class="col s2 m2 ">
<div class="card-panel deep-orange accent-2">
<span class="white-text"> Social score
</span>
</div>
</div>
</div>
<div class="row">
<div class="col s6 m6">
<div class="card-panel teal">
<span class="white-text">Sentiment analysis graph for tweets
</span>
</div>
</div>
<div class="col s6 m6">
<div class="card-panel light-blue accent-4">
<span class="white-text">Sentiment analysis donuts graph for all hastags
</span>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m12">
<div class="card-panel teal">
<span class="white-text">Tags analysis.
</span>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="page-footer">
<div class="footer-copyright">
<div class="container">© 2014 Copyright Text <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
</div>
</div>
</footer>
<script src="js/init.js"></script>
<script src="js/materialize.min.js"></script>
</body>
</html>
You have to wait until the DOM has been initialized (document has been fully loaded). Wrap your slider code in something like this:
$(function() {
//code
});
Also, you're using an old version of jQuery in the code you posted which is incompatible with Materialize.js. Please use the latest version of jQuery 1.x (check here: https://developers.google.com/speed/libraries/#jquery)