Bootstrap multi-line button with badge - javascript

I'm working on a project with bootstrap and I'm trying to figure out how to get a button that shows:
-Text left aligned (pull-left makes sense here I think)
-A badge right aligned with a number (pull right makes sense here)
This works great but the problem is most of my buttons have names that are ideal for a two-line button. Everything looks great on one line but as soon as the text gets too long or the button gets too short, it kicks the text to another line and the top text looks centered instead of pulled left. This looks good:
<div style="width:300px;margin:10px">
<button type="button" class="btn btn-primary btn-block" style="font-weight:bold;white-space:normal;">
<span class="pull-left">Under Investigation </span><span class="badge pull-right">5</span>
</button>
</div>
This looks bad (button is too narrow, text on top doesn't pull left):
<div style="width:150px;margin:10px">
<button type="button" class="btn btn-primary btn-block" style="font-weight:bold;white-space:normal;display:inline-flex;">
<span class="pull-left">Under Investigation </span><span class="badge pull-right">5</span>
</button>
</div>
Fiddle: https://jsfiddle.net/rjerskine/ay9L512h/2/
Solution:
I ended up having to wrap the text in another div which is fine and works great when the window resizes. The text kicks to two lines and the badge stays on one line. I'll end up writing this with proper classes but here's the solution for anyone with a similar question:
<div class="col-sm-2">
<button type="button" class="btn btn-primary btn-block" style="font-weight:bold;">
<div class="pull-left" style="text-align:left;width:calc(100% - 30px);white-space:normal;overflow:hidden;">
Under Investigation
</div>
<span class="badge pull-right" style="display:inline-flex;">5</span>
</button>
</div>

Use text-align:left on that button.
button span.pull-left {
text-align: left
}
Fiddle

Related

Is it possible to suppress Durandal navigation?

My web application makes use of bootstrap, knockout and durandal. Below is a snippet of the rendered html, that defines a row with five columns. Irrelevant details are left out.
<div class="row list-row" data-bind="click: function(vm, event) { $(event.currentTarget).trigger('durandal-navigation'); }">
<div class="col-xs-2">
...
</div>
<div class="col-xs-2">
...
</div>
<div class="col-xs-6">
...
</div>
<div class="col-xs-1">
...
</div>
<div class="col-xs-1">
<button class="btn btn-default btn-xs deletebutton" data-bind="click: DeleteClicked">
<i class="fa fa-trash"></i>
</button>
</div>
</div>
Now when the mouse hovers over any of those divs, the css in place lits up the entire row which is how it is supposed to be, and a click navigates to the desired screen with durandal. The latter, however, should not be the case when the user clicks the button in the last column: only the DeleteClicked function should fire.
Is there any way to suppress the navigation here?
I've found a quite simple way around it by using sessionStorage: DeleteClicked now contains the line
sessionStorage.setItem("cancelNavigation", true);
The part of the application that actually implements the navigation:
$(document.body).on('durandal-navigation', function (event) { ... }
...performs a check on the status of "cancelNavigation" before calling router.navigate(...); and in addition of course removes the cancelNavigation key from sessionStorage. Works perfectly!

Bootstrap Button Hover issue

When I hover over a bootstrap button on my website it doesn't show the link in the bottom left corner in chrome. Am I missing something here? Here is the code I am currently using for the button.
<button type="button" class="btn btn-primary navbar-btn m-l-15 m-r-15" onclick="location.href='{$relative}/upload'">{translate c='menu.upload'}</button>
You can use an <a> element with a role of button and style it to look like a button but using the same classes that you are currently using.
Only caveat to this would be that you should determine the correct element to use in your situation - for example - a link (a element) should navigate you to a new location or context - whilst a button should be used if it does something in the same location / context.
Also - if the bottonhad other functionality that navigating to the desired location - you will need to re-introduce the click handler and apply logic to perform that function.
<a
href="{$relative}/upload"
role="button"
class="btn btn-primary navbar-btn m-l-15 m-r-15"
>{translate c='menu.upload'}</a>
You can replace it with a link , and style it.
Have a visit to Bootstrap website and you will find Details here.
You can put your link as follows and it may solve your problem
<a href="your_link_here">
<button type="button" class="btn btn-primary navbar-btn ml-5 mr-5">
{translate c='menu.upload'}
</button>
</a>
First change the margin-left and margin-right from m-l-15 and m-r-15 to ml-1 and mr-1. In bootstrap ml and mr class only take values from 1 to 5. It don't takes the values more than 5 in class. You have to give it to css.
Try This:
<a role="button" class="btn btn-primary navbar-btn ml-5 mr-5"
href="{$relative}/upload">{translate c='menu.upload'}</a>

Bootstrap 4 tooltips not centered

I am getting bizarre results with my tooltips. They are not centered properly.
Please see this fiddle: https://jsfiddle.net/uf0epmxm/6/
I have absolutely no idea why this is happening. I reproduced it in the fiddle. You can see that it is not centered when you hover over the "Add Role" button:
<button type="button" class="btn btn-primary" data-modal="http://laraback.dev/roles/add" data-toggle="tooltip" title="Add">Add Role</button>
One thing I noticed is if I remove the top blue navbar entirely it centers correctly.
Thanks for the help.
I resolved this by using flex: 0 0 250px on the sidebar and flex: 0 0 auto on the content div instead of min and max width.
Did you try to move the button like this?
<div class="col">
<button type="button" class="btn btn-primary" data-modal="http://laraback.dev/roles/add" data-toggle="tooltip" title="Add">Add Role</button>
</div>
<div class="col text-right">
<h1 class="display-5">Roles</h1>
</div>
I think it can be caused by the size of the container.
You can use data-placement in the attribute like this:
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Add">Add Role</button>
Just to change the tooltip place.

MVC #foreach and JavaScript Confusion

I'm trying to make a button in a Bootstrap popover that passes a Razor value to another JavaScript function called killDatabase when running through a Razor foreach. The code produces a list of buttons that you can select but I also want to be able to hit a button and delete one of the options. The code doesn't throw any errors, and everything works perfectly except the fact that any of the delete buttons will always delete the last element, not the one that it's supposed to be associated with. I'm assuming this is because the function gets called on an onclick and so at that point #str is just the last element's name, but I'm wondering if there's any way to store that value to be unique for each element? I've tried adding a JavaScript variable within the foreach but still ran into the same problem.
<div class="btn-group-vertical btn-block" data-toggle="buttons" id="btns">
#foreach (var str in Model)
{
<div id="popover-content" hidden>
Are you sure you would like to permanently delete this query from the database?<br />
<button onclick="killDatabase('#str')" class="btn btn-primary btn-sm" style="float:left; margin-bottom: 10px;">Yes</button>
<button class="btn btn-sm btn-primary" style="float:left;">No</button>
</div>
<label class="btn btn-default" style="height:auto">
<div class="form-group" style="height:auto; padding-bottom: 10px;">
<input type="radio" name="query" value="#str" />
<span class="pull-left">#str</span>
<span class="pull-right">
<button class="btn btn-sm btn-danger" style="margin-top:-2px;" data-toggle="popover" title="Confirm Deletion" data-placement="bottom">
<span class="glyphicon glyphicon-trash"></span></button></span>
</div>
</label>
}
</div>
So I'm going to close this question because it was me being really confused about AJAX. That's what it boiled down to: I had a bad AJAX call and I was trying to do things on a popover that was initialized after the page was loaded so any time I would try and use the #str value in that popup, it would only take the most recent value. I've reworked the code into a more streamlined, less buggy design, and it works fine now. Thanks to everyone who tried to help

Different Text size (eg. LastName,FirstName/FirstName) for button in responsive design bootstrap using Jquery

I am working on my assignment , i am almost done with the code. i just need help on a unique design.
I have 3 buttons with some text. For full screen the text is say "HelloWorld", "LastFirst" but when the same website is seen on mobile , the text of those 3 buttons change to "Hello","Last" etc.
I have few things in mind, having the text as Label. If i give id to those labels and hide the label when required.
I would like to know if there is any correct or simpler way to do it?
Thanks in Advance.
I assume you are using Bootstrap.
Bootstrap has these .visible-xs and .hidden-xs classes (more here)
.hidden-xs class helps you hide an element only on mobiles.
<button type="button" class="btn btn-primary">
Hello <span class="hidden-xs"> World </span>
</button>
<button type="button" class="btn btn-primary">
Last <span class="hidden-xs"> First </span>
</button>
If you are not using bootstrap, you can achieve the same using media queries.
#media screen and (max-width: 300px) {
.hidden-xs {
display: none;
}
}
<button type="button" class="btn btn-primary">
Hello <span class="hidden-xs"> World </span>
</button>
<button type="button" class="btn btn-primary">
Last <span class="hidden-xs"> First </span>
</button>

Categories