<button mat-raised-button color="warn">
<mat-icon>delete</mat-icon>
Remove Driver
</button>
How to add padding in between mat-icon and button title?
I want to keep the button title in the middle of the button and keep the icon in the left corner.
You can achieve this by adding a padding to your button text instead of the icon.
Add a class for the button text in the template.
<button mat-raised-button color="warn">
<mat-icon>delete</mat-icon>
<span class="button-text">Remove Driver</span>
</button>
Then define button-text in the CSS.
.button-text {
padding-left: 50px;
padding-right: 74px; /* Add 24px to align the text in the center since the icon's width is 24px */
}
For that you need to add span tag for that under button title
<button mat-raised-button color="warn">
<mat-icon>delete</mat-icon>
<span class="button-title">Remove Driver</span>
</button>
Then just add this .button-title in your CSS file for Styling
.button-title{
padding: 5px 50px 5px 50px;
}
This is Example You Can edit or preview Code Here on StackBlitz
Related
I've made custom pop over/speech box using boostrap pop over class in plain HTML.
Issue: Pop over dosen't seem to stick with the action text Save Records when I change output box alignment.
I tried by changing the position but didn't work.
<div class="popover fade bottom in" role="tooltip" style="top: 17.5938px; left: 0; display: inline-table;width: 36%;padding: 0px;text-align: center;border-radius: 0px;padding-bottom: 5px">
<div class="arrow" style="left: 50%;"></div>
<h3 class="popover-title" style="display: none;"></h3>
<div class="popover-content">
<p>Are you sure you wish to save the records?</p>
<div style="display:inline-flex">
<button class="btn btn-sm btn-primary btn-save btn-square" style="background-color:#0076C9;border: none;padding: 5px 25px 5px 25px;margin-left: 0px">Yes</button>
<button class="btn btn-sm btn-default btn-save btn-square" style="color:#0076C9;padding: 5px 15px 5px 15px;margin-left: 8px">Cancel</button>
</div>
</div>
</div>
FYI: JsFiddle
I don't see how the modal related to the text. The simplest way (as far as I know) would be to create a wrapper, where text & modal would be siblings. Then set position: relative to wrapper & position: absolute to modal. Also you should change top to bottom for modal. Here I did a super simple example: https://jsbin.com/yegufisumi/1/edit?html,css,output
I'm trying to align a close icon for a BootstrapVue tab with Bootstrap 4.2 in the top right corner.
<b-tab v-for="order in tabs" :key="order.id">
<template slot="title">
<span class="float-left">{{ order.name }}</span>
<b-button type="button" class="close float-right" aria-label="Close" #click="closeTab(order.id)">
<span aria-hidden="true">×</span>
</b-button>
</template>
...content....
</b-tab>
However, not only does it not align right as expected, the tab appears cut off when focussed:
What I want is for that X to appear in the top right corner of the tab.
How do I do that and make the tab look normal when active?
If you are using BS4 then you can add this styling to make close button on top right
<button type="button" class="p-4 position-absolute top-0 right-0">
<span>×</span>
</button>
In this case css position property is your friend
template {
position: relative;
}
template button {
position: absolute;
right:0px;
}
When I put the icon fa fa-spinner fa-spin the icon starts itself rotating. Although the spinning dots rotate fine.
Ex :- http://farzikam.cf/a click the submit button and see
Solve it by removing the top / bottom padding from your buttons icon
<button id="btn" onclick="load()">
<div id="btntext">Submitting</div>
<i id="plus" class="fa fa-spinner fa-spin" style="padding: 0;margin-left: 7px;"></i>
</button>
Remove the padding from your icon and add a margin to your button text like:
#btntext{
margin-right: 15px;
}
You should also use classes instead of id´s for that case.
Add this CSS and it should work fine....
#btn .fa-spin {
padding: 0;
}
#btntext {
padding: 0 10px 0 0;
}
THE SITUATION:
In my Ionic 2 app I need to have the menu button on two lines: icon and text.
The problem is that somehow the ion-button directive force the button to be on one line.
I need the ion-button directive to be sure the button has always the proper formatting and positioning responsively.
I just need that button to be on two lines.
This the html and css of my attempt:
THE HTML:
<ion-header>
<ion-navbar>
<button ion-button menuToggle="left" start>
<ion-icon name="menu"></ion-icon>
<br />
<p class="menuSubTitle">MENU</p>
</button>
<ion-title>
HomePage
</ion-title>
<button ion-button menuToggle="right" end>
<ion-icon name="person"></ion-icon>
<br />
<p lass="menuSubTitle">LOGIN</p>
</button>
</ion-navbar>
</ion-header>
THE CSS:
.menuSubTitle {
font-size: 0.6em;
float:left;
display: block;
clear: both;
}
THE QUESTION:
How can I make a ion-button on two lines?
Thanks!
You are along the right lines. A slight modification is needed for it to work.
Here is my markup:
<button ion-button block color="menu-o">
<div>
<ion-icon name="flash"></ion-icon>
<label>Flash</label>
</div>
</button>
The inner <div> inside the <button> is the trick. The only thing needed for this markup is to set the <label> element to display: block.
Since <p> is already a block level element. It may just work as is.
This will do the trick:
.button-inner {
flex-flow: column;
}
This will change the element ordering from horizontal to vertical.
You have to change the button height if you want it a bit prettier. (e.g. with icon margin)
.button-icon-top {
height: 5em;
.button-inner {
flex-flow: column;
.icon {
margin-bottom: 10px;
font-size: 2em;
}
}
}
Just add the class name to your button.
<button ion-button full large class="button-icon-top">
<ion-icon name="logo-twitter"></ion-icon>
<span>Click me</span>
</button>
I'm trying to use this addition to bootstrap buttons. which adds a nifty "label" for the icons at the beginning of the button. but the problem lies when it's a "btn-block" type.
.btn-label {position: relative;left: -12px;display: inline-block;padding: 6px 12px;background: rgba(0,0,0,0.15);border-radius: 3px 0 0 3px;}
.btn-labeled {padding-top: 0;padding-bottom: 0;}
here's the jsfiddle I figure it's the
left:-12px;
as the position but how would I determine what negative number it would be if it's block? ideas?
Give text-align:left to the button
<button type="button" class="btn btn-success btn-labeled btn-block btn-custom">
<span class="btn-label">here</span>
problem
</button>
<br/>
<button type="button" class="btn btn-success btn-labeled">
<span class="btn-label">no</span>
problem
</button>
CSS
.btn-custom { text-align: left;}
Fiddle Demo