I have accepted the fact that MDL does not have a built in "floating at bottom right" FAB button (similar to the Android SDK).
However, I have stumbled upon another issue. There is no built-in way to make a regular button bigger. Be it a fab one or a regular one. Ideas?
Here's what I use currently:
<button class="mdl-button display-4 mdl-js-button mdl-button--fab mdl-button--colored"
style="margin-bottom: 50px; margin-right: 80px; bottom: 0; right: 0; position: fixed;">
<i class="material-icons">add</i>
</button>
Just add a height and width to the button:
.mdl-button { height: 100px; width: 100px }
Related
I'm using WordPress. The designer put a WhatsApp button that shows on the entire website. Any idea where I can find that snip of code to remove it? I checked the plugins, and I'm sure it is not a plugin.
This is what I see when I inspect the element. Any help please?
<div id="whatsapp_desktop" style="
position: fixed;
display:none;
z-index: 5;
left: 11px;
width: 100%;
height: 50px;
bottom: 40px;
">
<i class="fab fa-whatsapp" style="font-size: 50px;color: #3bc5aa;margin-right: 10px;"></i>
</div>
You must use important:
display:none!important;
I have a fab list with fab buttons that shall have labels.
I found Fabs With Labels In Ionic 3 & whats the correct way of inserting label in an Ionic FAB list.
My HTML code is:
<ion-fab left top>
<button ion-fab color="light">
<ion-icon name="menu"></ion-icon>
</button>
<ion-fab-list side="bottom">
<button ion-fab>
<ion-icon name="person"></ion-icon>
<ion-label>Test Test Test</ion-label>
</button>
<button ion-fab>
<ion-icon name="alarm"></ion-icon>
<ion-label>Bla Bla</ion-label>
</button>
</ion-fab-list>
</ion-fab>
CSS
button[ion-fab] {
overflow: visible;
position: relative;
ion-label {
display: inline-block;
position: absolute;
top: -8px;
left: 60px;
color: white;
background-color: rgba(0,0,0,0.7);
line-height: 24px;
padding: 4px 8px;
border-radius: 4px;
pointer-events: auto;
}
contain: layout;
}
But the labels break the text to a newline if i don't specify a width.
If i do the labels don't adjust their width to the label's content.
How do i make the label content not wrap to a new line?
Issue originated from
ion-label {
white-space: normal !important;
}
from my app.scss
I have create a demo in ionic 3. You can check it:
Try this:
Stackblitz - Ionic 3 Fab button Demo Link
I'm using ngx-loading and working very well.
any.component.html
<div class="my-container">
<ngx-loading [show]="loading" [config]="{
backdropBorderRadius: '14px',
backdropBackgroundColour: 'rgba(0,0,0,0.87)',
fullScreenBackdrop: 'true'
}">
</ngx-loading>
</div>
I wanna know if is possible add labels in black screen. Something like image below:
You can do this quite easily just by setting the z-index on the label, that way it will show in front of the black screen.
.text {
z-index: 2000;
position: absolute;
color: white;
left: 0;
right: 0;
text-align: center;
top: calc(50% + 40px);
}
<div class="my-container">
<ngx-loading [show]="true" [config]="{
backdropBorderRadius: '14px',
backdropBackgroundColour: 'rgba(0,0,0,0.87)',
fullScreenBackdrop: 'true'
}">
</ngx-loading>
<span class="text">Here is some text</span>
</div>
Here is a StackBlitz demo: https://stackblitz.com/edit/angular-7wwp3m?file=src%2Fapp%2Fapp.component.html
I don't think this component support text from their documentation. What you could do is
<div class="spinner" *ngIf="spinnning">add some text</div>
The show/hide is controlled by spinning, or a variable passed from your spinner service.
The style of the spinner is controlled by class spinner. You can find tons of implementation of the spinner on the internet. Ex. https://www.w3schools.com/howto/howto_css_loader.asp
I am trying to put the logout button at the left toolbar , i have done it by position but it is not reponsive nd by smalling the chrome this button disappers , i have tried margin also but of no use!! How can I do it ??
My HTML
<div class="user-button-container at-xl-12 "#userButton>
<button class="user-button " md-button [mdMenuTriggerFor]="menu">
<div fxLayout="row" fxLayoutAlign="start center">
<at-icon class="at-display-block"backgroundColor="purple" backgroundType="border"size="40px" fontSize="30px"></at-icon>
<span class="name" fxHide="true" fxHide.gt-sm="false"></span>
<md-icon></md-icon>
</div>
</button>
</div>
My CSS
.user-button-container {
height: 100%;
font-weight: 400;
.user-button {
height: 100%;
border-radius: 0;
position: relative;
left: 1050px;
md-icon {
font-size: 16px;
width: 16px;
height: 16px;
}
.name {
margin: 0 8px 0 10px;
}
} }
looks like you have the design specified for xl-format, but not for smaller formats. as far as I know you should always start from small (xs) to large (lg) and not the other way around. so maybe just changing the following could help:
div class="user-button-container at-xs-12 "#userButton>
instead of
div class="user-button-container at-xl-12 "#userButton>
if you are using bootstrap use following class for desktop or mobile
<div class="user-button-container col-md-12 col-xs-12">
</div>
also, it appears you are not closing your css items - make sure you are using {}
I have a web page im designing as a responsive web design.in there i have a div which contains the sign up button of a email sign up form.in IE this and the content after that doesnt show up. following is the problematic html code..
<div class="Sign_Up">
<button id="submit" class="bt btn btn-alt" type="submit">
</div>
and when i remove this code the site works fine
the css for the class is like this
.Social_Base .Social_Part .Detail_Box .Sign_Up .bt {
background: url("http://media.expedia.com/media/content/expaus/images/socialbar/Social_main_bg.png") no-repeat scroll -374px -43px transparent;
border: 0 none;
cursor: pointer;
display: block;
height: 33px;
margin-left: 18px;
text-indent: -9999px;
width: 122px;
}
please help me..its ie9..it should be okay..i have used a complete image and positioned it to get the image for the sign up button..if any1 could help..thanks
Try adding a close button tag.
</button>
you must complete this tag :
<div class="Sign_Up">
<button id="submit" class="bt btn btn-alt" type="submit">your text</button>
</div>