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>
Related
I created a story using MDX. I want to demonstrate my inhouse-styles for buttons.
The story contains the following:
<a class="btn btn-primary">
Primary Button
</a>
When rendered, story book shows
<a class="sbdocs sbdocs-a btn btn-primary css-19nbuh3" target="_top">
Primary Button
<a>
As a result, my button does not display with the correct css.
How do I prevent storybook MDX from changing markup?
Put your markup inside of <Preview> tags:
<Preview>
<a class="btn btn-primary">
Primary Button
</a>
</Preview>
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 am adding bootstrap.css to design some elements of a certain div without messing with the rest of the elements.
Example:
...code here...
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
</div>
...some more code here...
Importing bootstrap.css:
<link href="/css/bootstrap.css" rel="stylesheet" type="text/css" />
But when I run my code, the bootstrap.css messes with the rest of the elements. How can I import bootstrap.css that it will only apply on btn-group class?
You need to customize Bootstrap before downloading to include the required parts only
go to http://getbootstrap.com/customize/
click "Toggle all" to uncheck all components check required components only e.g. 'Buttons'
go all the way down and click 'Compile and download'
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