I added an image size 53x53 next to the word Dropdown in my bootstrap navbar. The height of the navbar is 85px. adding the image makes the height resize to 100px I need it to remain 85px
<img class="image_top" src="myimage.png">Dropdown<span class="caret"></span>
.image-top {
float: left;
display: inline-block;
margin-top: 7px;
margin-right: 18px;
margin-left: 0;
margin-bottom: 4px;
padding-right: 10px;
}
You ckecked https://getbootstrap.com/components/#dropdowns? Documentation is very good..Eventhough it doesn't have an example with image dropdown i think..
You want something like this?
<div class="dropdown">
<button style = "padding: 3px;"class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="image_top"><img style = "max-width:20px; max-height: 20px;" src="myimage.png"></span>
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
Related
I have a popover of bootstrap, which inside there is a div with "btn-group" style which supposed to open an actions menu (aria-haspopup="true").
The problem is that the actions menu opens outside the popover borders, and when i'm changing the position/display property it goes inside the popover but moves all the text.
This is the HBS file of the whole popover:
<h3 class="popover-title" style="font-weight: bold;">{{title}}
<div style="float: right; text-align:center;" class="btn-group">
<button id="{{id}}-actions-button" type="button" class="btn btn-action js-primary-row-action" data-index="-1">{{primaryAction.text}}</button>
<button type="button" class="btn btn-action dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</h3>
<div class="row">
<div style="padding-top:15px;">
{{#each rows}}
<div style="padding-bottom: 20px;">
<div style="float: left; width: 50%;"><label class="label-preview">{{cell1.label}} </label><div>{{cell1.value}}</div></div>
<div style="float: right; width: 50%; text-align:left;"><label class="label-preview">{{cell2.label}} </label><div>{{cell2.value}}</div></div>
<div style="height: 40px;"></div>
</div>
{{/each}}
</div>
</div>
and this is how the actions popup opens:
This is how i open the popover:
this.popupElement.popover({
template: html,
placement: 'right',
viewport: viewport
});
How can I open the actions popup just below the arrow?
Update:
I tried position:absolute - not working and i also tried the next combination:
position: relative; display: inline;
and the result was (as you can see the fields inside the big popover are moving aside...):
Thanks.
Update 5.1:
current position:
Use position: absolute to place the dropdown over your popup.
<h3 class="popover-title" style="font-weight: bold;">{{title}}
<div style="float: right; text-align:center;" class="btn-group">
<button id="{{id}}-actions-button" type="button" class="btn btn-action js-primary-row-action" data-index="-1">{{primaryAction.text}}</button>
<button type="button" class="btn btn-action dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</h3>
.dropdown-menu {
position: absolute:
top: 20px; // height of the top my-new-title container
}
.btn-group {
position: relative;
}
I am new to front-end. I want to modify design of bootstrap dropdown button like this:
picture
Bootstrap dropdown code:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
How can I modify it according to above picture?
see my code below or this fiddle for working demo
.dropdown-menu>li>a{
color: red;
padding: 3px 10px;
}
.dropdown-menu>li>a .fa{
margin-right: 5px;
}
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><i class="fa fa-cog"></i>Action</li>
<li><i class="fa fa-cog"></i>Action</li>
<li><i class="fa fa-cog"></i>Action</li>
<li><i class="fa fa-cog"></i>Action</li>
<li><i class="fa fa-cog"></i>Action</li>
</ul>
</div>
There's many ways..
Create a new CSS class with your own style and then add the class to your default jquery dropdown
Overide jquery class
Ex for number 1:
Create new CSS class:
.newDropdown {
background-color: #ddd;
color: #fff
border: 1px solid #000
}
then add .newDropdown to your html
<ul class="dropdown-menu newDropdown" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
Ex for number 2:
Just overide the class:
.dropdown-menu {
background-color: #777;
}
.dropdown-menu li {
padding: 10px
}
Or you can read this answer for reference (even they're using select): How to style a <select> dropdown with CSS only without JavaScript?
I wonder if there exists or if there is a way to make a bootstrap button like the one here, but with the dropdown-toggle to the left. If I just alter the order in the html, then the buttons do show in correct order, but their surfaces do not "snap" right to be totally adjacent as a unified button entity.
Is this what you are looking to accomplish?
http://jsfiddle.net/SeanWessell/2mbsLkmw/
HTML:
<!-- Split button -->
<div class="btn-group btn-group-left">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<button type="button" class="btn btn-danger">Action</button>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
</ul>
</div>
Add btn-group-left to the btn-group div.
The add this css to override bootstrap:
CSS:
.btn-group.btn-group-left .dropdown-toggle {
border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important;
}
.btn-group.btn-group-left .dropdown-toggle+.btn {
border-top-right-radius: 4px !important;
border-bottom-right-radius: 4px !important;
}
I have a set of 4 inline buttons at the top of my page, under a jumbotron.
2 are dropdowns, the others are just regular buttons.
when i resize the browser window, I'd like to make them change to vertical stacked, full width. i know adding the class btn-block will make them full width, but i only want this to happen when the window size is less than 768px.
here's my current code. thanks so much!
<div class="row">
<div class="btn-group"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Categories <b class="caret"></b></button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</div>
<div class="btn-group"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Archives <b class="caret"></b></button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</div>
<button class="btn btn-primary"><i class="fa fa-question-circle fa-fw"></i> Info </button>
<button class="btn btn-primary"><i class="fa fa-envelope fa-fw"></i> Sign Up</button>
</div>
You could use a media query to apply the full width buttons at 768 pixels or less..
#media (max-width: 768px) {
.btn,.btn-group {
width:100%;
}
}
Demo: http://bootply.com/98570
I'd recommend making a new class for these buttons, instead of overriding bootstrap.
.btn-mobile {
width:100%;
}
#media (min-width: 768px) {
.btn-mobile {
width: auto;
}
}
These extra styles aren't answering your question exactly, but if your intent is to use them on mobile, you may find the buttons too close together/skinny for mobile use (fingers are much fatter than mouse pointers).
.btn-mobile {
width:100%;
margin: 8px 0;
font-size:18px;
line-height:1.33;
border-radius:6px;
padding:10px 16px;
}
#media (min-width: 768px) {
.btn-mobile {
width: auto;
font-size:14px;
line-height: 1.428571429;
padding:6px 12px;
}
}
I have some buttons in navigation bar:
http://jsfiddle.net/wKHaT/8/
<div class="mynav">
<ul class="nav nav-pills">
<li class="">AAA</li>
<li class="">BBB</li>
<li class="">CCC</li>
<li class="">DDD</li>
<li class="">EEE</li>
</ul>
</div>
<!-- Split button -->
<div class="btn-group mynav">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
The number of my buttons are too much so I should use drop-down buttons. Here there are two problems:
1- the style of my drop down button does not look like the other buttons. any way to solve it? (drop-down button should not appear with bigger size)
2- the other problem is that i want by clicking on my button it goes to a link. i can do it by onclick but onclick is not a seo friendly way.
For #1, Adjust the styling on your pills to match the button:
.nav-pills li a {padding: 7px 15px; font-weight: bold;}
OR vice-versa:
a.btn {padding: 4px 15px;}
button.dropdown-toggle {padding: 4px 8px;}
For #2, make your button an anchor instead:
Action
http://jsfiddle.net/isherwood/wKHaT/14
http://jsfiddle.net/isherwood/wKHaT/15
1.
try this for your style:
[http://jsfiddle.net/wKHaT/10/][1]
2.
onclick event souldn't do negativ rating for your seo