I have a table like below with a custom toolbar icon in the top left.
This icon enables/disables the Filter Control.
It is setup like:
<div id="toolbar">
<button id="filterable" type="button" class="btn btn-secondary">
<i class="fas fa-sliders-h"></i>
</button>
</div>
<table>
..
</table>
Is it possible to integrate this custom icon in the other icons on the right side?
E.g. after the pagination switch icon?
Its currently not possible with the bootstrap-table internal functions.
But there is a pull request which allows adding custom buttons.
Related
I am building a search UI in Angular 8 with the Angular Query Builder module.
The Angular2 query builder module is working correctly. I am customizing the styling for Angular Material following the customization instructions in the documentation. I am using Angular Material and Angular FlexLayout for the styling.
I want to move the "remove" button (the red X) all the way on the RIGHT side of the flex row, to the right of the "value" field.
The flexLayout settings should be showing all of the elements side-by-side in order. However, some sort of style is being applied that places it on the left side despite being the last element in the flex row. I have tried margin-left and other styles but was not able to figure out how to get the X to go all the way to the right side.
Here is the stackblitz:
https://stackblitz.com/edit/angular-aqyt4u?file=src/app/app.component.ts
Here is the snippet of markup for the customization of the remove button:
<!-- Query Builder -->
<query-builder [(ngModel)]='recordsQuerySet' [config]='config'>
<!-- Override remove button -->
<ng-container *queryRemoveButton="let rule; let removeRule=removeRule">
<div fxFlex>
<button type="button" mat-icon-button color="accent" (click)="removeRule(rule)">
<mat-icon>clear</mat-icon>
</button>
</div>
</ng-container>
<!-- etc -->
</query-builder>
You can add a custom class to remove rule button then set its position absolute, some thing like below:
In html file:
<button type="button" mat-icon-button color="accent" (click)="removeRule(rule)" class="remove-rule-btn">
<mat-icon>clear</mat-icon>
</button>
In css/scss file:
.remove-rule-btn{
position: absolute;
right: 5px;
}
I have an href link that triggers a download located within a button in my Angular component HTML. I can see both the button and the highlighted text link in my browser. However, when I click the link, nothing happens - in terms of triggering the download. This is what I have:
<button class="email-prompt-button" md-button>
<a [href]="fileUrl" download="file.txt" class="btn-link">Download File</a>
</button>
Now, if I remove the button, and just have the a tag, it works:
<a [href]="fileUrl" download="file.txt" class="btn-link">Download File</a>
How can I get this to works as link text within a button?
Why don't you shape your anchor tag shapes to look like a button by applying custom css
or
If you're using Bootstrap you can apply below classes:
btn btn-primary
Just like
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<a [href]="fileUrl" download="file.txt" class="btn btn-primary btn-link">Download File</a>
Am trying to use a font awesome icon as a button to implement the like feature in my web application, using bootstrap 4 and font awesome
<button class="icon-button" onclick="actOnStory(event);"data-story-id="<%= story._id %>">
<i class="far fa-heart"></i>
</button>
my current code results in the icon being inside the button and not being the button itself
No need to wrap <i> with <button>, since onclick event can be called on icon as well. Just make it
<i class="far fa-heart" onclick="actOnStory(event);" data-story-id="<%= story._id %>"></i>
I am using a bootstrap button on one of my page, that is disabled, and the styling seems to not be working properly
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<button disabled class="btn btn-primary">suivant</button>
<button class="btn btn-primary disabled">suivant</button>
I tried these 2 ways and the result look like this for both approach: initial look || on Mouse over
EDIT: Important to mention that i only have bootstrap4, no personnal style sheet and no other themes
This is a react Project, className is used instead of class
https://codepen.io/jacobweyer/pen/ybqxBK
I've updated this codepen to show Bootstrap4 buttons with BS4 alpha 6. They look like they show up as intended in and outside of React.
<button class="btn btn-primary">suivant</button>
<button class="btn btn-primary" disabled>suivant disabled</button>
Another stylesheet was making conflict with bootstrap that i wasnt aware of
thanks to #MichaelCoker for making me search trough my project again
I have this simple thing to do in angularjs that require a bit of dom manipulation, and i think it suppose to be a directive of some kind but i have no idea how to approach it.
I have this simple button: (html)
<button class="btn btn-success" style='margin-bottom:17px' style='margin-right:5px;' ng-show='pageToShow < pages.length-1' ng-click='changePage("next")'>
<span class="glyphicon glyphicon-arrow-right" style='margin-right:5px' aria-hidden="true"></span>Next
</button>
When i click it, i want inside of it, instead! of the glyphicon, a moving gif, like this:
1) How to remove the already existing img inside of the button and replace it?
2) I want to have other types of spinners, not the rounded one, how can i change the default spinner?
How can i do so?
Check out this directive, it does exactly what you want:
(offine)
And a demo:
(offline)
You can change the classes of the button-prepend="" and spinner-icon="" to a css-class that defines your own spinners/gifs.
You can create your own loading gif with http://www.ajaxload.info. Then, use ng-show to determine if the gif or icon should be visible.
<button ng-click="loading = !loading;" class="btn btn-success">
<img ng-show="loading" src='http://i.imgur.com/1HDbs9b.gif' />
<span ng-show="!loading" class="glyphicon glyphicon-arrow-right"></span>
Next
</button>
http://plnkr.co/edit/6N4x5bZyiilV2GMqCP48?p=preview