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.
Related
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.
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>
I am trying to modify this code from site point, but I can't figure out why the 'next' button doesn't work in the screen size of 345px and below. What is the problem? I appreciate your help. Please see here for the complete code:
https://codepen.io/SitePoint/pen/GmPjjL
<h1>Quiz on Important Facts</h1>
<div class="quiz-container">
<div id="quiz"></div>
</div>
<button id="previous">Previous Question</button>
<button id="next">Next Question</button>
<button id="submit">Submit Quiz</button>
<div id="results"></div>
Because label tag overlap the button tag
It doesn't work because your previous label tag is overlapping the button tag.
Change the position of the button and apply z-index to fix it.
button{
position: relative;
z-index: 4;
}
New Codepen Link
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>
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