In my HTML page I need to include a button element with a description and an icon (I use an icon from the fontawesome.com library).
To compile the data in my page I use the Knockout Javascript framework.
Compilation of the descriptive text of the button is done by text binding as in the example:
<button class="btn btn-sm btn-outline-secondary" data-bind="text:GetTranslatedText('SomeText')">
<i class="fas fa-trash-alt"></i>
</button>
The GetTranslatedText("SomeText") function returns the text translated into the language used by the user.
My problem is that when the framework compiles the text of the button, it overwrites the <i> element with which the icon is displayed.
Is there a simple way to concatenate both the text and HTML element of the icon into the binding?
Thanks!
Rather than binding the text to the button, which as you've seen overrides the buttons contents, bind it to a span alongside the icon:
<button class="btn btn-sm btn-outline-secondary">
<i class="fas fa-trash-alt"></i> <span data-bind="text:GetTranslatedText('SomeText')"></span>
</button>
Related
Below is my first attempt to build a Razor page w/ Boostrap. When the page is first brought up, the form is collapsed. When the user clicks on the Revisit a quote button, the form then expand. I followed the documentation on Bootstrap's site to the dot, but no idea getting the toggle to work. What am I missing?
#page "/"
<div>
<label>What would you like to do?</label>
<div>
<button class="btn btn-primary"
type="button">
Create a new quote
</button>
</div>
<div>
<button class="btn btn-primary"
type="button"
data-toggle="collapse"
data-target="#quotesearchForm"
aria-expanded="false"
aria-controls="quotesearchForm">
Revisit a quote
</button>
<div class="collapse" id="quotesearchForm">
<form>
<input /><div class="dropdown" /><button></button>
</form>
</div>
</div>
</div>
Mystery solved...out of the box Blazor only has the bare-bones structure from Bootstrap and does not have the javascript portion. What Blazor wants you to do is to use its code to eliminate the use of javascript. Blazor does that by using its SignalR technology to transmit very small amount of data over the wire to do that. Tim Corey has a YouTube video on this.
My uib-popover is not hiding on outsideClick.
<button
tooltip-placement="bottom"
tooltip="{{'common.addRemoveColumn'| translate}}"
class="btn btn-default pull-right"
uib-popover
popover-trigger="'outsideClick'"
popover-placement="bottom"
uib-popover-template="'gridColumns.html'"
data-original-title="{{'common.customizeColumn'| translate}}">
<i class="fa fa-columns"></i>
</button>
I have followed these stackOverflow questions,
uib-popover not closing on outside click
How to hide uib-popover on click outside of the popover in angular JS?
and nothing solved the issue.
My angularJs version is 1.3.13.
My Bootstrap version is 3.2.0.
$scope.myTrigger = "outsideClick"
then
popover-trigger="myTrigger">Click Me</button>
Pls check in below URL:
https://codepen.io/minhdynasty/pen/ozvAPJ
It will close th pop up
support me for set link on the button that works in both responsive mode.
<button type="submit" class="btn btn-primary btn-learn">Get now <i class="icon-arrow-right3"></i></button>
I tried this also..
<p><a class="btn btn-primary btn-learn">send Request <i class="icon-arrow-right3"></i></a></p>
in this original code where i should include link
If you are asking how to add a link, in the second piece of code add an href parameter, like so:
<p>send Request <i class="icon-arrow-right3"></i></p>
I have been using this kind of button in bootstrap 3. Normally is the Action to update or modify a row in a table.
I would like to use bootstrap 4, but this button is not rendering correctly.
I know this have changed, but how can I fix this?
This is the code for the button:
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</button>
Instead of glyphicons Bootstrap 4 recommends using font-awesome. You can read more about migrations here. While the migration documentation states that btn-default is now btn-secondary, to have your button rendered similarly to what you have now you want to use btn-light.
Here's what your updated code would look like with it.
<button type="button" class="btn btn-light">
<i class="fa fa-pencil fa-2x" aria-hidden="true"></i>
</button>
Here's the code in a working codeply project.
From the migration page:
https://v4-alpha.getbootstrap.com/migration/
Renamed .btn-default to .btn-secondary
Dropped the Glyphicons icon font. If you need icons, some options are:
the upstream version of Glyphicons
Octicons
Font Awesome
I have a piece of code in my flask application that I want to implement a button that takes me to an specific page.
<button type="button" class="btn btn-primary btn-block">Evaluate</button>
How do I link the button? I did putting an tag wrapping it, but can I use the tag directly? (Using the tag is changing my styling)
*I did the code below, but it is not good for me
<button type="button" class="btn btn-primary btn-block">Evaluate</button>
Use <a> tag instead
Evaluate
use the href attribute to navigate to the new location.
Bootstrap will take care of presenting the <a> tag as a button with the css classes.