The problem
I'm trying to create a website using Material Design Lite, and I'm trying to insert a Floating Action Button on the top of a card. But thing is... It's getting clipped! I'm not sure why, I'm kinda new to this world.
Expected behavior
I want something like this. (Taken from here).
What I'm getting
This is how my FAB looks like now.
The code
Here's the HTML.
<div class="mdl-card mdl-shadow--2dp card card-historico">
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored mdl-shadow--4dp mdl-color--accent fab-top-right" id="refresh">
<i class="material-icons" role="presentation">refresh</i>
<span class="visuallyhidden">Refresh</span>
</button>
<div class="mdl-card__title card-title">
<h4 class="mdl-card__title-text">Histórico</h4>
</div>
<div class="container">
<!-- Table contents here -->
</div>
</div>
And the CSS
.card {
margin: 5% auto;
}
.card-title {
background: #455A64;
color: #FEFEFE;
}
.card-historico {
width: 45%;
height: auto;
z-index: 2;
}
.card-historico-table {
margin-left:auto;
margin-right:auto;
font-size: 14pt;
color: rgba(0, 0, 0, 0.54);
}
.fab-top-right {
position: absolute;
top: 0px;
right: 28px;
transform: translate(0px, -28px);
z-index: 900;
}
The rest of the CSS is from MDL, so... I'm not sure if I'll have to post it here.
Anyways, can anyone help me out with this?
By changing a little bit of your CSS like:
.card-historico {
width: 45%;
height: auto;
z-index: 2;
overflow: visible;
}
this overflow: visible will do the trick for you. :)
Related
I have above code work fine here ( if i run code ) but it causing me error on my website.
What's happening is that on first time click on all links works fine but when i try to click second time then it shows blank page and you can't click anywhere on page so either i have to refresh or click back button.
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
overflow:hidden;
z-index:9999999;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #000;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.popup{
width: 70%;
}
}
<div style="clear:both; height:23px; font-size:9px; color:#0033FF; text-align:right; margin-right:11px;"><a href="#1" >View</a></div>
<div id="1" class="overlay">
<div class="popup">
<h2>pop up window one </h2>
<a class="close" href="#" >×</a>
<div class="content">
this is my pop up window 1
</div>
</div>
</div>
<div style="clear:both; height:23px; font-size:9px; color:#0033FF; text-align:right; margin-right:11px;"><a href="#2" >View</a></div>
<div id="2" class="overlay">
<div class="popup">
<h2>pop up window one </h2>
<a class="close" href="#" >×</a>
<div class="content">
this is my pop up window 1
</div>
</div>
</div>
<div style="clear:both; height:23px; font-size:9px; color:#0033FF; text-align:right; margin-right:11px;"><a href="#3" >View 3</a></div>
<div id="3" class="overlay">
<div class="popup">
<h2>pop up window one </h2>
<a class="close" href="#" >×</a>
<div class="content">
this is my pop up window 1
</div>
</div>
</div>
As per your instructions I got that there is a problem with theme.js file in your website.
whenever you are clicking that close "x" button of popup a function in that file at line number 105 triggers and adds a inline css in your popup and reduces the opacity of the popup div to "opacity:0".
solution: you can just change that class name and remove the click even as a temporary solution. or you can edit theme.js file and reduce your code and get better performance...
choice is yours
I hope that this will help you. or else you can tell me for any kind of help!
Thank you!
Happy Coding!!!
It is working perfectly in Stack overflow code snippet.
i think there might be some problem with your local environment.
Although if u need any kind of help, feel free to ask me!
Thank you!
Happy Coding!
I am making a webshop and have encountered a sort of weird bug.
I am trying to make a cart "badge" to easily view how many items that are in the cart. It's a responsive site and the badge is located on a a tag with two spans of display: block inside. On the desktop side the badges css looks like this:
.count::after{
content: "2";
display: inline-block;
background: #FF0000;
border-radius: 20%;
padding: 0 0.5em;
transform: scale(0.7);
color: #FFF;
float: right;
position: absolute;
top: 5px;
right: 1.5em;
}
.count::after:empty{
display: none;
padding: 0
}
Which works fine and the badge displays in the upper right corner. However on mobile, the a tags wrapper goes full-width and using the above css results in the badge flying off to the side of the screen.
Thus i wrote the following mobile code:
#media max-width: 990px{
...
.count::after{
position: relative;
top: -90%;
right: 0;
}
}
However. The top: -90% doesn't register properly.
If i enter the development tools and switch it off and on, it works perfectly. But if i refresh it goes right back down to the bottom of the icon.
JS-fiddle of the offending part: here
I agree with Shahil, you should set the position:relative to the element with the .count class and set position:absolute and top:-5px (let's say) to the .count::after
Like so:
.d-block{
display: block;
}
.d-inline_block{
display: inline-block;
}
.t-center{
text-align: center;
}
.menu{
width:100%;
text-align: center;
}
.count {
position:relative;
}
.count::after{
content: "2";
display: inline-block;
background: #FF0000;
border-radius: 20%;
padding: 0 0.5em;
transform: scale(0.7);
color: #FFF;
float: right;
position: absolute;
top: -5px;
right: 0;
}
<div class="col-xs-12 col-md-4 my-auto menu t-right">
<a href="/account/login" class="d-inline_block headerLink">
<i class="fa fa-lg fa-user d-block t-center py-8">icon</i>
<span class="d-block t-center">Min konto</span>
</a>
<i class="fa fa-lg fa-question d-block t-center py-8">icon</i><span class="d-block t-center">Kundeservice</span>
<i class="fa fa-lg fa-shopping-cart d-block t-center py-8">icon</i><span class="kurv d-block t-center">Min kurv</span>
</div>
This should work on both Desktop and mobile without using #media queries
I am trying to make a page that shows an Application, the Environments that app is served in (Dev, Test, Prod, etc), and finally the Host that application is running on.
In our back-end, we have it set up so that an application can be made active or passive, and a host can be made active or passive as well. I've added glyphicons that visualize the app and host states.
The glyphicons are supposed to be contained within the server name button, and if you run the jsfiddle in Chrome you'll see how it's supposed to look.
The problem is in Firefox, the glyphicons get pushed down to what looks like a new line. I don't want this to happen - I want it to look the same as in Chrome. I've done some googling and inspecting of properties and can't see to ascertain why this is happening and how it can be fixed.
<body>
<div id="container" class="container-fluid col-lg-10 col-md-10 col-sm-12" role="main">
<div class="app row" id="ATStatsProcessor">
<h4>Application Name</h4>
<div class="environment col-sm-4 col-lg-3">
<h5>Environment Name</h5>
<span class="glyphicon glyphicon-chevron-down pull-right"></span>
<span class="glyphicon glyphicon-chevron-up pull-right"></span>
<div class="host">
<div class="host btn btn-default btn-pressed">
<span class="button-text">Server Name</span>
<span class="state-enabled icon-size-small glyphicon glyphicon-off pull-right"></span>
<span class="state-enabled icon-size-small glyphicon glyphicon-hdd pull-right"></span>
</div>
</div>
</div>
</div>
</div>
</body>
CSS:
.app {
color: #818a98;
border-radius: 6px;
margin: 1em;
padding: 1em;
background-color: #e4e9ef;
}
div.environment h5 {
display: inline-block;
max-width: 80%;
}
.environment {
color: #818a98;
border-radius: 6px;
margin: .5em 2.25em;
padding-top: .25em;
padding-bottom: 1em;
background-color: white;
}
.app .environment .host {
display: inherit;
margin: .25em;
}
.host.btn.btn-default {
background-color: #c93135;
color: white;
}
.host.btn.btn-pressed {
background-color: #2f3b46;
color: white;
}
.confirm.btn-success {
background-color: #63a72c !important;
}
.confirm.btn-danger {
background-color: #c93135 !important;
}
body {
background-color: #f8f9fb !important;
}
.icon-size-small {
font-size: x-small;
}
.state-enabled {
color: green;
}
.button-text {
display: inline-block;
max-width: 85%;
overflow-x: hidden;
}
https://jsfiddle.net/zc419hwa/11/
It seems that floats clear all elements within a parent element that has the white-space: nowrap; property in Firefox. Not sure why this is, but it can be worked around easily enough. You can fix the issue a few different ways:
Modify your HTML code by moving the button-text span after the glyphicons like so:
<div class="host btn btn-default btn-pressed">
<span class="state-enabled icon-size-small glyphicon glyphicon-off pull-right"></span>
<span class="state-enabled icon-size-small glyphicon glyphicon-hdd pull-right"></span>
<span class="button-text">Server Name</span>
</div>
--OR--
Remove property white-space: nowrap; from your .btn class.
--OR--
Absolutely position your glyphicons by adding this code to your CSS:
.host {
position: relative;
}
.host .glyphicon {
position: absolute;
top: 0;
right: 0;
margin-top: 5px;
margin-right: 10px;
}
.host .glyphicon-hdd {
margin-right: 21px;
}
I have been trying to add labels to the left of my FAB. I am liking the Material Design, but I am having an issue on getting the labels to appear properly. Any tips would be appreciated. Everything is displaying correctly except adding labels.
Here is a working example:
http://codepen.io/petja/pen/OVRYMq
HTML
<div class="backdrop"></div>
<div class="fab child" data-subitem="1">
<img alt="" src="images/smile.jpg">
</div>
<div class="fab child" data-subitem="2">
<img alt="" src="about/smile.jpg">
</div>
<div class="fab visible-xs float-phone" id="masterfab">
<i class="fa icon-phone soft-white"></i>
</div>
CSS
.fab {
background: #1C9E00;
border-radius: 50%;
text-align: center;
color: #FFF;
position: fixed;
right: 70px;
font-size: 25px;
padding: 9px 2.5px 6px;
-webkit-filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .42));
}
.fab span {
vertical-align: middle;
}
.fab.child {
width: 53.666667px;
height: 37.666667px;
display: none;
opacity: 0;
background: transparent;
border-radius: 0%;
right: 63px;
padding: 0;
}
.fab img {
border-radius: 50%;
}
.backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #FAFAFA;
opacity: 0.7;
display: none;
}
JS
$(function(){
$(".fab,.backdrop").click(function(){
if($(".backdrop").is(":visible")){
$(".backdrop").fadeOut(125);
$(".fab.child")
.stop()
.animate({
bottom : $("#masterfab").css("bottom"),
opacity : 0
},125,function(){
$(this).hide();
});
}else{
$(".backdrop").fadeIn(125);
$(".fab.child").each(function(){
$(this)
.stop()
.show()
.animate({
bottom : (parseInt($("#masterfab").css("bottom")) + parseInt($("#masterfab").outerHeight()) + 70 * $(this).data("subitem") - $(".fab.child").outerHeight()) + "px",
opacity : 1
},125);
});
}
});
});
You want something like this?
There is .backdrop class in your css So, when I try to add materialize tooltipped it has same class name .backdrop which responsible to change background color of tooltip.
You added background: #ECECEC; in .backdrop So, tooltips had also same background color. So, I changed your .backdrop to .backdrop_gray and Now everything is fine.
HTML
<div class="backdrop_gray"></div>
<div class="tooltipped fab child" data-position="left" data-delay="50" data-tooltip="I am C" data-subitem="1"><span>C</span></div>
<div class="tooltipped fab child" data-position="left" data-delay="50" data-tooltip="I am B" data-subitem="2"><span>B</span></div>
<div class="tooltipped fab child" data-position="left" data-delay="50" data-tooltip="I am A" data-subitem="3"><span>A</span></div>
<div class="fab" id="masterfab"><span>+</span></div>
<h1>Floating Action Button</h1>
<p>(Hint: Button interacts with you)</p>
JS
$('.tooltipped').tooltip({delay: 50});
... // Your other JS.
Working Codepen
Check out this github issue
Github user philipraets created a nice codepen to demonstrate his soluton.
Edit (For the Lazy):
philipraets created a simple css style:
.mobile-fab-tip {
position: fixed;
right: 85px;
padding:0px 0.5rem;
text-align: right;
background-color: #323232;
border-radius: 2px;
color: #FFF;
width:auto;
}
then wrapped the tooltip within another link element using that style:
<div class="fixed-action-btn click-to-toggle" style="bottom:24px; right:24px;">
<a class="btn-floating btn-large red"><i class="large material-icons">settings</i></a>
<ul>
<li>
<i class="material-icons">create</i>
Edit <!--tooltip-->
</li>
<li>
<i class="material-icons">event</i>
Save to calendar <!--tooltip-->
</li>
<li>
<i class="material-icons">supervisor_account</i>
Switch responsible <!--tooltip-->
</li>
</ul>
</div>
I am trying to create the following control with HTML / CSS. I need advice on the best way to implement this with solely HTML and CSS. I was able to implement it using different anchor () tags. But I am not sure that this is the best approach since it all has the same purpose.
The link, blue circle, and cart icon should take you to a different page.
Also - for the icon I am implementing font-awesome. http://fortawesome.github.io/Font-Awesome/icons/
Any advice and suggestions would be appreciated!
Here is a picture:
Here is my HTML so far - but I dont think it's the best approach...
<div id="check_out_utility" class="float_right">
<a id="check_out_utility_link" class="white_link float_left" href="#">Check Out</a>
<div id="shopping_cart" class="float_right">
<i class="fa fa-shopping-cart fa-3x white_color"></i>
</div>
</div>
Again, thanks
You may use absolute positioning within the cart icon.
I build a quick example from scratch
HTML:
<a class="cart" href="#">
Checkout
<span class="fa fa-2x fa-shopping-cart">
<span class="badge">3</span>
</span>
</a>
CSS:
.cart {
background-color: #2F4178;
display: inline-block;
width: 200px;
height: 20px;
text-decoration: none;
color: #FFF;
padding: 20px;
}
.cart .fa {
position: relative;
}
.cart .badge {
display: inline-block;
background-color: #478BFF;
border-radius: 50%;
padding: 3px;
color: #FFF;
width: 10px;
height: 10px;
text-align: center;
font-size: 11px;
position: absolute;
bottom: 0;
left: 0;
}
fiddle: http://jsfiddle.net/jqac30Lz/