How do you include an icon above some text in a material design lite button component? There are not any examples in the documentation. My attempt does not work.
<button class="mdl-button mdl-js-button mdl-button--fab">
<table>
<tr>
<td><i class="material-icons">add</i></td>
</tr>
<tr>
<td>Text</td>
</tr>
</table>
</button>
It might not follow the MDL guidelines to the mark but this might get the job done for you. See example codepen
<button class="my-btn mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
<i class="material-icons">delete</i>
<label> text</label>
</button>
.my-btn {
display: flex !important;
flex-direction: column;
height:auto !important;
>*{
align-self:center;
}
}
Related
I'm using bootstrap and I have adapted the accordion to a table, it works perfectly except the icon when "toggled open" display a border-bottom which I would like to remove. It is probably something inherit somewhere but I cannot figure it out.
Problem:
When collapsed it works fine:
Here is the table code:
<!-- language: lang-css -->
.accordion-line-button {
padding: 0;
width: auto;
border: none;
}
<!-- language: lang-html -->
<table class="accordion" id="accordionExample">
<tr class="accordion-item">
<td class="accordion-header" id="heading1">
<button class="accordion-button accordion-line-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="true" aria-controls="collapse1"></button>
</td>
<td class="accord">
Question
</td>
</tr>
<tr>
<td colspan="2" class="accordion-collapse collapse" id="collapse1" aria-labelledby="heading1" data-bs-parent="#accordionExample">
<div class="accordion-body">Answer
</div>
</td>
</tr>
</table>
Here a link to the bin. I'm using a template which I've included and it is the problem, there is something that is inheriting that I cannot figure it out.
Thanks for the help
It's not a border property but rather box-shadow that is set on the button. Kindly use below code.
.accordion-line-button {
box-shadow: none !important;
}
I'm using angular material spinner in a mat table column. The spinner can be seen on the top side. I want to vertically align the spinner on the same level as other icons
What I'm currently getting is:
<ng-container matColumnDef="actions">
<th at-header-cell *matHeaderCellDef>
</th>
<td mat-cell *matCellDef="let element">
<div class="spinner-wrapper">
<mat-spinner [diameter]="30" mode="indeterminate">
</mat-spinner>
</div>
<button class="btn btn-default">
<span class="neo-icon neo-icon-edit"></span>
</button>
<button class="btn btn-default">
<span class="neo-icon neo-icon-trash"></span>
</button>
</td>
</ng-container>
.spinner-wrapper {
display: inline-block;
}
.mat-spinner {
margin: 0 auto;
}
How can I align the spinner to the same level as other icons?
You have to use another wrapper, and set the display to flex and use align-items: center:
<td mat-cell *matCellDef="let element">
<div class="button-wrapper">
<mat-spinner [diameter]="30" mode="indeterminate"></mat-spinner>
<button class="btn btn-default">
<span class="neo-icon neo-icon-edit"></span>
</button>
<button class="btn btn-default">
<span class="neo-icon neo-icon-trash"></span>
</button>
</div>
</td>
css:
.button-wrapper {
display: flex;
align-items: center;
}
html/css pen
I am not good at css, but here is what I want and what i have tried.
<div>
<div id="propertiesTable" style="padding: 20px 20px 20px 20px;" ng-cloak >
<table class="table table-striped table-bordered">
<tbody>
<tr data-ng-repeat="(k,v) in properties">
<td>{{ k }}</td>
<td>{{ v }}</td>
</tr>
</tbody>
</table>
</div>
<div style="padding-left: 20px;">
<button type="submit" class="btn btn-primary btn-sm"
title="Refresh for updated properties"
ng-click="onRefreshButtonClick()">
<span class="glyphicon glyphicon-refresh">Refresh</span>
</button>
</span>
</div>
</div>
So, I have this cluttered button glyphicon glyphicon-refresh inside a class="btn btn-primary btn-sm"
I need some space between these two. When I tried padding style it did not work. padding is getting applied to the entire button obviously!
How can I achieve padding between glyphicon glyphicon-refresh and class="btn btn-primary btn-sm" ?
When I click on Refresh, I want the id:propertiesTable to be masked(meaning light dimness for this part). Is this achievable?
Sorry about this question. Not good at CSS.
Thank you Stackoverflow!
You can just add a non-breaking space: http://jsfiddle.net/mm6ck3dc/9/
<span class="glyphicon glyphicon-refresh"> Refresh</span>
How to do not allow the arrow to go to another line? This will happens if the screen did not have enough space, see the image:
JSFIDDLE
CODE:
<table class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th class="shrink">COLUMN 1</th>
<th class="shrink">COLUMN 2</th>
<th class="expand">COLUMN 3</th>
<th class="expand">COLUMN 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="btn-group btn-block">
<span class="btn btn-danger btn-xs btn-block dropdown-toggle text-left" data-hover="dropdown" data-toggle="dropdown">Descrition of the item <span class="pull-right"><i class="fa fa-caret-down"></i></span></span>
<ul class="dropdown-menu">
<li><i class="fa fa-caret-right"></i>Option 1</li>
</ul>
</div>
</td>
<td>Some info here</td>
<td>Some more here</td>
<td>And here too</td>
</tr>
<tr>
<td>
<div class="btn-group btn-block">
<span class="btn btn-danger btn-xs btn-block dropdown-toggle text-left" data-hover="dropdown" data-toggle="dropdown">Descrition of the i asd adasdasdasdasdtem <span class="pull-right"><i class="fa fa-caret-down"></i></span></span>
<ul class="dropdown-menu">
<li><i class="fa fa-caret-right"></i>Option 1</li>
</ul>
</div>
</td>
<td>Some info here</td>
<td>Some more here</td>
<td>And here too</td>
</tr>
<tr>
<td>
<div class="btn-group btn-block">
<span class="btn btn-danger btn-xs btn-block dropdown-toggle text-left" data-hover="dropdown" data-toggle="dropdown">No item <span class="pull-right"><i class="fa fa-caret-down"></i></span></span>
<ul class="dropdown-menu">
<li><i class="fa fa-caret-right"></i>Option 0</li>
</ul>
</div>
</td>
<td>Some info here again</td>
<td>yay more info here too</td>
<td>ok, enough info now, that is enough</td>
</tr>
</tbody>
</table>
Tried some white-space: nowrap; but could not get the desired result. Any help will be great. The arrow must be in the right side, always.
Instead of floating the carets right, float the text left.
<span class="pull-left">Description... </span> <i class="fa fa-caret-down"></i>
Demo
span.pull-right floats the i.fa-caret-down to the right after your “Description of the item”, which means it’s placed on the next line. Try putting the float before the description. For example:
<span class="btn btn-danger btn-xs btn-block dropdown-toggle text-left"
data-hover="dropdown" data-toggle="dropdown">
<span class="pull-right"><i class="fa fa-caret-down"></i></span>
Description of the item
</span>
Sample, fixing the first caret.
Setting the white-space: nowrap property will not effect the dropdown icon as it's in a different flow due to the float: right; applied to it by the class .pull-right.
What you're describing sounds as though you want to set a position: absolute against the icon. This does fix the issue of the icon not being effected by the text, but it raises a further question of, how do you want to resolve too much text in a button which isn't sufficiently big?
As far as I can see, the only way to resolve this would be to also apply an overflow: hidden property to the buttons, to force the spacing to the right where the icon sits to be empty, and to apply an ellipsis on the text if any overflow does occur. You can see the combination of these selectors in this JSFiddle, I have forced the buttons to be smaller purely to demonstrate how this would work when they are forced to consume a space smaller that you would otherwise like:
.btn {
white-space: no-wrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 10px;
}
.fixed-right {
position: absolute;
right: 5px;
}
For one of my projects I need to make one button full width/height of the TD. I tried setting the normal .btn-warning with -Xpx!important but didn't work.
Currently I have this:
But want to achieve to this:
I'm using the following code:
<tbody>
<tr>
<td class="td-btn"><span class="glyphicon glyphicon-ok"></span></td>
<td>Projectnaam</td>
</tr>
</tbody>
Does anyone know how to get this button full with/height with the TD without spacing?
Friend of mine helped out:
<td style="padding: 0px;">
<a href="#" class="btn-sm btn btn-success" style="height: 44px;padding: 12px 10px;">
<span class="glyphicon glyphicon-ok"></span>
</a>
</td>
It's almost what I want =). Thanks all.
.table-condensed>thead>tr>th,
.table-condensed>tbody>tr>th,
.table-condensed>tfoot>tr>th,
.table-condensed>thead>tr>td,
.table-condensed>tbody>tr>td,
.table-condensed>tfoot>tr>td {
padding: 5px;
}