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
Related
I have a mat-select inside my site's main navbar. It contains a list of currencies and is positioned at the right of the navbar. Since I strictly want to display the currency abbreviation (ex: USD) in my navbar, but want to display a flag icon, currency name, and abbreviation inside the panel, I decided to resize the panel to be larger than the select. This leads to a problem where the panel overflows the screen and is not displayed entirely. I was wondering if there was a simple way to make sure the panel stays inside the browser, in other words, make sure the panel position does not go past the end position of the select.
Current Behavior:
Desired Behavior:
HTML:
<header>
<mat-toolbar class="navbar">
<button mat-icon-button aria-label="Menu Icon">
<mat-icon>menu</mat-icon>
</button>
<span>My Website</span>
<div class="navbar-currency">
<mat-form-field class="currency-select">
<mat-select name="currency" panelClass="currency-panel" [(value)]="selectedCurrency">
<mat-select-trigger>{{selectedCurrency}}</mat-select-trigger>
<mat-option *ngFor="let currency of currencyArr" [value]="currency.key">
<span class="fi fi-{{currency.icon}}"></span> {{currency.key }} - {{ currency.name}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</mat-toolbar>
</header>
CSS:
.navbar {
background: #ffffff;
display: flex;
padding-left: 2rem;
padding-right: 2rem;
}
.navbar-currency{
margin-left: auto;
margin-top: 1.3rem;
}
.currency-select{
font-size: 0.85rem;
width: 80px;
}
.currency-panel.mat-mdc-select-panel {
font-size: 0.85rem;
min-width: calc(100% + 120px)
}
.currency-panel.mat-mdc-select-panel .fi{
margin-right: 0.1rem;
}
.currency-panel.mat-mdc-select-panel .mat-mdc-option{
min-height: 36px;
}
Simple Solution
If your Currency Mat-Select is always on the right side of the screen then you could solve this with some css. Set the container position to absolute and the right to zero:
.currency-panel.mat-mdc-select-panel {
font-size: 0.85rem;
min-width: calc(100% + 120px);
position: absolute !important;
right: 0;
}
Mat-Menu Solution
Use Mat-Menu instead, which has a built in handling for the menu positioning. Mat-Select consider the width of your select element as the width of the dropdown select options and that does not require handling the left/right overflow.
You will just need to rewrite your css and you are good to go.
Component Template:
<button mat-button [matMenuTriggerFor]="menu" class="currency-select">
<span>{{ selectedCurrency }}</span>
<mat-icon
fontIcon="arrow_drop_down"
style="vertical-align: bottom"
></mat-icon>
</button>
<mat-menu #menu="matMenu" panelClass="currency-panel">
<button
*ngFor="let currency of currencyArr"
mat-menu-item
(click)="selectedCurrency = currency.key"
>
<span class="fi fi-{{ currency.icon }}"></span>{{ currency.key }} -
{{ currency.name }}
</button>
</mat-menu>
Component CSS:
.navbar-currency {
margin-left: auto;
}
.currency-select {
font-size: 0.85rem;
}
.mat-mdc-menu-panel .fi {
margin-right: 0.2rem;
}
.currency-panel .mat-mdc-menu-item {
min-height: 36px;
}
Checkout my stackblitz example
If your Mat-Select will be used on both corners, then you should write your own position handler for the Mat-Select.
<button _ngcontent-pse-c676="" mat-icon-button="" class="mat-focus-indicator setting_button mat-icon-button mat-button-base ng-star-inserted mat-button-disabled" ng-reflect-disabled="true" disabled="true">
css
.setting_button { float: right; margin-right: 8px; bottom: 10px; }
how i change the button color if the status is disable?
thanks
Use css disabled pseudo-class:
.setting_button:disabled {
background-color: red
}
i'm trying to stack those two icon in a ionic icon. I know how to make the custom ionic icon, no problem. I also know about the :before and :after trick to stack icon from this question
For now, i got this css.
.ion-md-notice:before, .ion-ios-notice:before {
font-family: "FontAwesome" !important;
content: '\f133' !important;
bottom: -0.25em;
position: relative;
color: #d81717;
}
.ion-md-notice:after, .ion-ios-notice:after {
font-family: "FontAwesome" !important;
content: '\f05e' !important;
font-size: 12px;
position: relative;
top: -0.8em;
color: #d81717;
}
Here is the HTML,
<ion-item *ngFor="let eventItem of dayEvents" text-wrap>
<ion-icon [name]="eventItem.icon" item-left></ion-icon>
<ion-icon name="create" item-right color="secondary" (click)="addEvent(eventItem)"></ion-icon>
<ion-icon name="trash" item-right color="danger" (click)="removeEvent(eventItem)"></ion-icon>
<p class="title">{{eventItem.title | slice: 0: 30}}</p>
<p class="subtitle" *ngIf="eventItem.description">{{eventItem.description | slice: 0: 40}}...</p>
<p class="times">{{eventItem.start | date: 'shortTime'}} - {{eventItem.end | date: 'shortTime'}}</p>
</ion-item>
final result :
<ion-icon item-left="" role="img" class="icon icon-md ion-ios-notice item-icon" aria-label="notice" ng-reflect-name="notice"></ion-icon>
I manage to make it fit for one size of icon, no problem,
But when I try to use the icon elsewhere, the icon does not fit anymore.
Please note that in the second images, the font are bigger.
Any help would be appreciated. Thanks.
Please look at the snippet below. The CSS part. Probably you'll have to adjust classes and set the desired font-size to .item-icon.
.item-icon {
font-family: 'FontAwesome';
position: relative;
font-size: 60px
}
.item-icon:before {
content: '\f133';
color: #d81717;
}
.item-icon:after {
content: '\f05e';
font-size: .5em;
position: absolute;
top: .8em;
left: .5em;
color: #d81717;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<ion-icon item-left="" role="img" class="icon icon-md ion-ios-notice item-icon" aria-label="notice" ng-reflect-name="notice"></ion-icon>
I am trying to show an edit icon on a cells hover state, using font awesome.
How can make the class name unique so I can target it with css for each row?
import {Icon} from 'react-fa'
if(this.props.day.achievements) {
listItems = this.props.day.achievements.map((achievement) => (
<div className="cell" key={achievement + "_achievements"}>
{achievement}
<div className="edit">
<a href="#">
<Icon name="pencil-square" className="edit" />
</a>
</div>
</div>
))
}
I am using the following css:
.cell:hover .edit {
display: block;
}
.edit {
padding-top: 7px;
padding-right: 7px;
position: absolute;
right: 0;
top: 0;
display: none;
}
.edit a {
color: #000;
}
How can I display the icon for each cell?
Since you're using position:absolute on the edit wrapper, try adding position:relative to the .cell. I suspect your icons ARE showing but they're all floating up to the top overlapping with each other.
I have a small problem with these <span> elements in a <div>.
http://jsfiddle.net/kkzLW/179/
Here is the section of CSS code that I'm working with:
.rightRapper {
border-style: dotted;
margin-left: 105px;
margin-top: 0px;
height: 90px;
width: 100px;
display: block;
}
.leftRapper {
border-style: dotted;
margin-left: 0px;
height: 90px;
width: 100px;
display: block;
}
Here is the HTML section:
<div id="battleBox">
<span class="leftRapper">
<span id="buttonColumn">
<span id="container3" class="topButton">
+
</span>
<span id="container4" class="bottomButton">
-
</span>
</span>
</span>
<span class="rightRapper">
<span id="buttonColumn">
<span id="container" class="topButton">
+
</span>
<span id="container2" class="bottomButton">
-
</span>
</span>
</span>
</div>
I'm trying to get the <span> .leftRapper and .rightRapper to be side by side in the <div> battleBox. However, when I set the CSS display property to inline, the <span>s get squished into a smaller shape for some reason. When I set the display to block, it turns them into the size I want but it doesn't display them the way I want, because they're not displayed inline.
What is causing the <span>s to have a smaller size?
Add or replace the properties below in the following CSS classes/selectors:
#battleBox {
width: 216px; /* increasing width from 210 to 216 because your border takes 6 extra px*/
}
.rightRapper {
margin: 0px; /* remove all margins to fit two divs in the container */
display: inline-block; /* display block elements in one line */
}
.leftRapper {
margin: 0px;
display: inline-block;
}
Example
You could/should add a float: left to .leftRapper.
Other options are e.g. adding a negative right margin to .leftRapper.