I'm trying to implemented a button just like the one demontrated in the example page of fontawesome, whose code is:
<a class="btn btn-lg btn-success" href="#">
<i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>
Version 4.3.0
</a>
It works but only when the second line is no more longer than the first one.
So what causes the weird phenomenon and how to fix it?
Thanks.
Edit:
There is a running demo over here.
This is a single page app and the broken btns is over the second scene.
The problem comes with white-space: nowrap;. Bootstrap sets it on .btn. In most cases the text in buttons is on one line. In your case it must be on two. So, add a custom class to the button and overwrite it, like this:
.btn-custom {
white-space: normal;
}
Related
Recently, we upgraded from Angular 5 to Angular 6.
The issue: Bootstrap button styles now have no margin spacing between them.
Bootstrap Version: 3.3.7
For example, if in the html you do something like this.
<div>
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-cancel">Cancel</button>
</div>
Before we updated, these buttons would have margin space between each.
Just curious if there is something we can update that would fix this or a global CSS style that can be used.
In my project I was able to restore default white spaces between Bootstrap buttons, by setting preserveWhitespaces to true in main.ts file:
platformBrowserDynamic()
.bootstrapModule(AppModule, { preserveWhitespaces: true})
.catch(err => console.log(err));
Found it in this place
ConnorsFan's answer link is the answer to our issue.
Angular 6 by default sets the angularCompilerOption: preserveWhitespaces for the application to false.
To add to the marked answer, this issue is caused by the preserveWhitespaces setting.
what's really happening behind the scenes is your template code, for example
<div>
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-cancel">Cancel</button>
</div>
is getting all the whitespace removed. which also removes the line break at the end of each button element. It's the line break that gives that extra space, not margin between each button.
So this shows more clearly why the buttons are sticking together.
<div><button class="btn btn-success">Success</button><button class="btn btn-info">Info</button><button class="btn btn-cancel">Cancel</button></div>
You can apply the fix as suggestion globally or you can resolve the problem on specific components if needed. https://angular.io/api/core/Component You'll notice that in the docs for #components you can provide an option to turn on/off this feature for that component only.
Another solution as suggested in comments would be to globally add marginto all .btn classes, however this would have the reverse side effect happening of the option ever switches again (giving to much margin between buttons instead of the natural space)
Final note, this is an HTML/DOM side effect, not Angular or CSS, you'll be able to replicate this effect with pretty much any inline elements by removing/adding the linebreak/spaces between each element.
Add the btn-toolbar class to the div to get space margin between the buttons. Like this:
<div class="btn-toolbar">
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-cancel">Cancel</button>
</div>
Can't find the right words to explain so here's a code example:
<button class="btn btn-default">
<i class="glyphicon glyphicon-alert"></i>
<span>button</span>
</button>
<button class="btn btn-default">
<span>button</span>
<i class="glyphicon glyphicon-alert"></i>
</button>
Two buttons, one with a glyphicon at front, one with glyphicon at end
Now let's say we want to add more of a gap between the word and icon:
.btn {
> .glyphicon:first-child {
margin-right: 15px;
}
> .glyphicon:last-child {
margin-left: 15px;
}
}
Works nicely like so: http://codepen.io/anon/pen/wzxRPw
My question... How would this be done without the extra span around the words?
If I remove the span then the glyphicon is the only element, so it's treated as both the first and the last
Edit: Note: My intention in the question is to find out how/if this can be done without adding an extra class, and without the span tag.
I'm aware that maybe the ideal solution is to keep the spans or add a class, I just thought perhaps there was a way to do this in CSS that I had no knowledge of (I'm still learning)
I feel like you're trying to eliminate code that really doesn't need to be eliminated (that's just my opinion). No matter what you do, if you don't wrap the text in a span tag or something of that nature, there's only going to be 1 child element of the actual <button>. Meaning, you won't be able to target anything other than that element without explicitly setting a class or inline styles. The span tags are a great solution, but if you insist on getting rid of them you have a couple of other options (however, I think the span tag is the best):
Create a CSS class that defines margin offset and set that to the according button. So, you'd set a class like .margin-left to one and .margin-right to the other
You can write inline styles for each of the glyphicons.
Like I said above, I think you have the best solution of your options. I don't think there is anything else you can do.
The only reasonable solution without span is to add a class:
<button class="btn btn-default icon-on-left">
<i class="glyphicon glyphicon-alert"></i>
button
</button>
<button class="btn btn-default icon-on-right">
button
<i class="glyphicon glyphicon-alert"></i>
</button>
and style it appropriately. But that creates maintainability issue: while changing content of the button you need to change its class in sync.
I'm not clear what you exactly want to get as the result, still ill tell u some ideas you have to decide whether it suits ur need or not.
If you can you can add between glyphicon and the span
If you remove only span tag then you can set respective margins for span tag instead of glyphicon
I have a button and on it I want to add two text labels whose font and size differ. I also want each text label to appear on its own line. For example, if my labels are ABCD and example, here's how I want them to appear on the button:
ABCD
example
Here is what I have tried. Is it possible to apply different styles to different parts of the value attribute?
<input style="width:170px; height:100px; font-size:90%; type="button" value="ABCD example">
You could use a button rather than an input and use two span tags inside. For example:
<button class="btn btn-primary" type="button">
<span style="font-size:14px;">ABCD</span>
<span style="font-size:10px;">example</span>
</button>
Live example at: http://jsfiddle.net/h6jq7ep2/
I've used inline styles just for simplicity, but obviously you could instead assign a class with the appropriate CSS to each span.
Try <button> element:
<button><span style="font-size:110%">ABCD</span> example</button>
It works about the same was as <input type="button">
you can not do this, you want to apply style on a part of the string, there is no simple way of doing this, you should use image instead. the is pure design purpose. just search online button image maker, you'll find a lot.
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
When I hover over a button and the tooltip appears, the buttons jump. If I disable the tooltip, it does not jump. Additionally, the right button loses the rounded edges. How can I prevent this from happening?
<div class="btn-group">
<a rel="tooltip" class="btn" href="#" data-title="View Details"><i class="icon-list-alt"></i></a>
<a rel="tooltip" class="btn" href="#" data-title="Delete"><i class="icon-trash"> </i></a>
</div>
Javascript:
$('[rel=tooltip]').tooltip();
Working version...
http://jsfiddle.net/BA4zM/147/
Here is a website that has it working without the jumping...
http://wrapbootstrap.com/preview/WB005S479
To avoid the jump, you need to set the container attribute. This is documented.
When using tooltips and popovers with the Bootstrap input groups,
you'll have to set the container option to avoid
unwanted side effects.
Try the following:
$('[rel=tooltip]').tooltip({container: 'body'});
As Howie said at https://stackoverflow.com/a/14770263/7598367, it's necesary to add the 'container' to tooltip.
That didn't solve my issue (I had the same problem), it's also necesary to declare at JS file BEFORE the .tooltip() initilization, this way:
$('[data-toggle=tooltip]').tooltip({container: 'body'});
$('[data-toggle="tooltip"]').tooltip();
Hope this helps if somebody has the same problem in the future.