I am having an issue with the DropdownButton and I have no idea why the hover effect is longer than the actual size of the dropdown menu.
My DropdownButton is inside a Telerik Grid which may cause the problem. For the sake of simplicity I will attatch a screenshot and how I implement the DropdownButton. It would be way too much and too hard to understand if I post my entire Grid that I am using.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
As you can see is the hover effect too long:
I don't think it is related to the code that you posted. There must be something overwrite the default Bootstrap hover effect.
Try to add the below:
.dropdown-item:focus, .dropdown-item:hover{
width: 100%;
}
Related
The image clearly depicts what i meant
I am trying to shift it inside the navbar when using small screen but its not working.
Boostrap provides responsive menu alignment with the documentation. By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. To use responsive alignment, disable dynamic positioning by adding the data-bs-display="static" attribute and use the responsive variation classes.
Ex for small screen:
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Left-aligned but right aligned when small screen
</button>
<ul class="dropdown-menu dropdown-menu-sm-end">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
Other breakpoints .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end.
I have a dropdown button the text of which is composed from a fixed part and a second part from a database. This second text might be rather long and I'd like to truncate it. To be able to use bootstrap's .text-truncate class (or overflow:hidden and text-overflow:ellipsis), I have to add display:inline-block to the text in the button. However, this messes the baselines up (for some reasons I don't know, the buttons in the following snippet don't look like expected, but the problem of the misaligned baselines is still visible):
.mw-15 {
max-width: 15rem;
}
.mw-10 {
max-width: 10rem;
}
.display-ib {
display: inline-block;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<p>
In the following, the caret pointing down is missing.
</p>
<div class="drowpdown ml-3">
<button type="button" class="btn dropdown-toggle text-truncate mw-15" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Fixed text: Some variable text which might be rather long.
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="?foo=bar">An item</a>
<a class="dropdown-item" href="?foo=baz">Another item</a>
</div>
</div>
<p class="mt-5">
Here, the baselines don't match.
</p>
<div class="drowpdown ml-3">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Fixed text: <span class="text-truncate mw-10 display-ib">Some variable text which might be rather long.</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="?foo=bar">An item</a>
<a class="dropdown-item" href="?foo=baz">Another item with quite longish text.</a>
</div>
</div>
<p class="mt-5">
Here, the text is not centered vertically in the button.
</p>
<div class="drowpdown ml-3">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="text-truncate mw-10 display-ib">Fixed text: Some variable text which might be rather long.</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="?foo=bar">An item</a>
<a class="dropdown-item" href="?foo=baz">Another item with quite longish text.</a>
</div>
</div>
Does anyone know how to truncate the text within a dropdown button without messing up the baselines?
Try adding d-flex align-items-center css classes on the button (.btn.dropdown-toggle) element which holds the text-truncate.
I already have a dropdown with the following code:
note: class='bg_r' is in CSS for the background image (url) globe
<span class="bg_r">
Language: <a id="Lang" href="#">DropUpâ–˛</a>
</span>
<div id="language_menu" class="lang_switch_panel">
<div class="lang_switch">
<ul>
<li>Action</li>
<li>Action</li>
<li>Action</li>
</ul>
</div>
</div>
The output for above code is as shown in figure 1 below:
Now, I'm doing similar to that(above figure) using bootstrap 4.But i'm not able to override the button style using background image.Instead of button type I replaced with anchor tag but of no use(its wrong method but i tried).
Following is the code I tried so far:
<span class="bg_r">
Language:
<button type="button" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
</button>
</span>
<!--<span class="bg_r">Language:
<a type="button" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
</a>
</span>-->
<div class="dropdown-menu">
<!-- Dropdown menu links -->
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Action</a>
</div>
The output for the code using bootstrap is as shown in figure 2 below:
How can I override button type with (background) image to get output similar to figure 1?
Thanks in advance.
Add btn-link class to button
Additionally add these styles to center align it
.bg_r {
background-color: aqua;
display: inline-flex;
align-items: center;
}
or add these 2 classes d-inline-flex align-items-center to bg_r span
.bg_r {
background-color: aqua;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<span class="bg_r d-inline-flex align-items-center p-1">
Language:
<button class="btn btn-sm btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
</button>
</span>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Action</a>
</div>
You can also use bg-transparent on the button that will remove the background-color from button, but will not remove the focus styles when you click on the button ! So preferably add btn-link class to it only.
The above answer works, or you can also replace this line
<button type="button" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropup</button>
by
Dropup
I have a web page that is using Bootstrap 3. In this web page, I am using a table with column headers. The column headers need to be centered. However, I also need to have a drop down menu in the upper-right corner of each column header. This last part is what's throwing everything off.
As you can see in this Bootply, my column headers aren't centered properly because of the drop down menu. That drop down menu isn't even positioned properly. I've tried using relative positioning, but apparently that doesn't work in a column header. My code looks like this:
<table class="table">
<thead>
<tr><th>Name</th>
<th class="text-center">
<div>Chicago</div>
<small class="text-muted">Illinois</small>
<div class="pull-right">
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="chicagoDropDownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i>:</i>
</button>
<ul class="dropdown-menu dropdown-menu-right pull-right" aria-labelledby="chicagoDropDownMenu">
<li>Weather</li>
<li>Visitors Guide</li>
<li>Directions</li>
</ul>
</div>
</div>
</th>
<th class="text-center">
<div>New York</div>
<small class="text-muted">New York</small>
<div class="pull-right">
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="nyDropDownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i>:</i>
</button>
<ul class="dropdown-menu dropdown-menu-right pull-right" aria-labelledby="nyDropDownMenu">
<li>Weather</li>
<li>Visitors Guide</li>
<li>Directions</li>
</ul>
</div>
</div>
</th>
<th class="text-center">
<div>San Francisco</div>
<small class="text-muted">California</small>
<div class="pull-right">
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="sfDropDownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i>:</i>
</button>
<ul class="dropdown-menu dropdown-menu-right pull-right" aria-labelledby="sfDropDownMenu">
<li>Weather</li>
<li>Visitors Guide</li>
<li>Directions</li>
</ul>
</div>
</div>
</th>
</tr></thead>
</table>
My question is, how do I position a drop down menu in the upper-right corner of a column header, and still center the rest of the content?
Just use absolute positioning to make the text ignore the dropdown buttons. You can then move them around relative to their parent (the th tag). Note that you do need to give the th tag a position of relative for this to work:
CSS
.dropdown {
position: absolute;
top: 0;
right: 0;
}
th {
position: relative;
border: 1px solid red;
}
Note: The red border is just there to help clarify what's going on.
Hope this helps!
I have an angularJs application that I'm trying to look nice with Bootstrap CSS.
I had:
<select name="mode"
ng-model="module.mode"
ng-options="m for m in modes"
ng-change="onModeChanged()"></select>
This ended up as:
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" id="modeDropDownMenu">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby=="modeDropDownMenu">
<li ng-repeat="m in modes">
{{m}}
</li>
</ul>
But I lost my model ng-model="module.mode" in the process :-(
Where do I have to apply this? Nothing I already tried seems to work.