Why bootstrap float-right class not working for my button? - javascript

The bootstrap float-right class did not work with my buttons.
This is my html code snippet:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<button type="button"
id="reset_button"
class="btn btn-outline-secondary btn-lg float-right"
disabled="disabled">Reset</button>
<button type="button"
id="convert_button"
class="btn btn-primary btn-lg float-right"
disabled="disabled">Submit</button>
</div>
I want to make buttons align right but when I add the float-right class in both the buttons it doesn't work.
Can anyone please tell me what's wrong with my code and how can I fix this...

Instead of float there are probably better Bootstrap options.
Try removing the float-right and instead use d-flex with justify-content-end on the top line of your code like this....
<div class="container-fluid d-flex justify-content-end">
<button type="button" id="reset_button" class="btn btn-outline-secondary btn-lg" disabled="disabled">Reset</button>
<button type="button" id="convert_button" class="btn btn-primary btn-lg"
disabled="disabled">Submit</button>
</div>

The code is working for me. I just copied your snippet and buttons are on the right side.
Problem is meaby in parent DIRs with different CSS or something else is rewriting your style.
You can also see this, when you run your snippet here.

Like previous answers has stated, maybe there are some other styles in a parent div or element that aren't compatible with the float classes.
Try adding in a parent div the clearfix Bootstrap class, that should solve the issue in your code.

Related

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.

jQuery label as selector direct child

I have
($("div.season > .btn.active"), function(n, i){return n.id;});
should find in my HTML when I toggle the button state to btn & active (which works well)
<div class="btn-group season" data-toggle="buttons">
<label class="btn btn-primary" id="Sommer"></label>
</div>
but it doesn`t. The exact same JS code worked before with a slightly different HTML. What am I doing wrong?

HTML5 combine commonly-used attributes into super-attribute?

I have a lot of buttons that look like:
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#qq" data-req="foo">Foo</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#qq" data-req="bar">Bar</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#qq" data-req="baz">Baz</button>
I'd like to avoid so much repetition; is there any way to define some sort of single attribute that will expand to several other attributes? For example it might end up looking like
super x = 'type="button" class="btn btn-info" data-toggle="modal" data-target="#qq"';
<button super="x" data-req="foo">Foo</button>
<button super="x" data-req="bar">Bar</button>
<button super="x" data-req="baz">Baz</button>
NB. Of course this could be done with server-side scripting but I'm hoping to avoid that. I am using Bootstrap 3.3.4 , these buttons trigger a Bootstrap modal.
This works:
<button type="button" class="x" data-req="foo">Foo</button>
<button type="button" class="x" data-req="bar">Baz</button>
<button type="button" class="x" data-req="baz">Baz</button>
and in the Javascript section
$("button.x").addClass("btn btn-info");
$("button.x").attr("data-toggle", "modal");
$("button.x").attr("data-target", "#qq");
This removes most of the repetition however I am still wondering if there is a more elegant and/or runtime-efficient way.
Sounds like you might be looking for a client side view framework such as Handlebars or React.js. Where you can send (and cache) the templates on the client and then bind to JSON you retrieve from the server.
You could use a full stack framework such as Ember.js or Angular, but that is probably more than you need.

bootstrap-modal.js broken in Bootstrap 3

In my code, there are 2 sections (taken from the example) - Some Input and Some More Input. I only see Some More Input with a disabled scrollbar and some buttons on the left of the page. (look at it here)
Before you answer, I've already applied the patch BEFORE the main bootstrap-modal CSS and have both bootstrap-modal and modalmanager included. I've tried placing it everywhere, but it still shows up broken.
My code:
<div id="responsive" class="modal fade" data-width="760" style="display: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Responsive</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<h4>Some Input</h4>
<p><input class="form-control" type="text"></p>
</div>
<div class="col-md-6">
<h4>Some More Input</h4>
<p><input class="form-control" type="text"></p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
Activate a modal without writing JavaScript. Set data-toggle="modal" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific modal to toggle.
So you should add this code below.
<button type="button" data-toggle="modal" data-target="#responsive">Launch modal</button>
http://getbootstrap.com/javascript/#modals
Look At the madal document, it explain how to use the madal method.
Well, fixed this myself. Found out that the examples on that page weren't compatible with Bootstrap 3, so I tried to write my own example with the Bootstrap docs.
(i am such an idiot for using examples)

Categories