adding a drop down button alongside with my other buttons - html

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

Related

group-buttons inside a popover of bootstrap

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;
}

Bootstrap adjust dropdown-menu width

I am using a dropdown-menu to show the candidate options I can choose. And I also want an input to filter the options, so when I enter something, the dropdown-menu should also be shown. So I want to adjust the width of the dropdown-menu to be equal to the input. And how can I show it when the I enter something in the input?
The html I current use is:
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div><!-- /btn-group -->
Actually you are searching for some kind of suggestion search box with given selectable choices if I understood correctly.
See this thread:twitter bootstrap autocomplete dropdown / combobox with Knockoutjs
Solution suggestions: selectize.js or Select2
The aspect of automatically adjusting the dropdown's width to be equal to the input's width is hard to achieve because it would cut off some of your given choices (example: Input is only one character - Dropdown would only show first character of every choice). This can't be what you want to achieve.
possible solution:
$('.dropdown-menu').width($('.input-group').width());
.input-group{
width:33%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div><!-- /btn-group -->

Bootstrap dropdown menu a:hover not full li:hover

What is the best way to toggle display of my second level dropdown menu when hovering over "a"...not when hovering over the full "li"?
I use bootstrap and fiddle is : http://jsfiddle.net/2Smgv/3100/
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
2-level Dropdown <i class="icon-arrow-right"></i>
<ul class="dropdown-menu sub-menu">
<li>Action</li>
</li>
</ul>
</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
<form action="" class="navbar-search pull-left">
<input type="text" placeholder="Search" class="search-query span2">
</form>
<ul class="nav pull-right">
<li>Link</li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a class="#" href="#">Menu</a>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div>
</div>
I did not understand your question originally, and have updated my "answer" as such:
It is not possible to complete the modification you are requesting because the hover would be broken. The display of and ability to mouse over sublist items functions because those items are within the parent list. If you change the hover to the anchor tag, once you attempt to use the links within the subnav you will be outside of the anchor tag and thus removing the hover effect.
If you look at your markup, the "2-level Dropdown" also contains the and the with class .sub-menu. Thus hovering over the sub-menu is also over the parent (2-level Dropdown).
However, the containing "2-level Dropdown" ends with that text and the moving your cursor over the sibling sub-menu means you are no longer hovering over the .
I hope this explains why it is not possible and allows you to gain an understanding of the reasons why.

Left bootstrap dropdown-toggle button?

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;
}

Bootstrap striped dropdown menu

What's the best way to achieve "striped" menu items in a Bootstrap dropdown menu? I want alternating menu items to have a slightly different background shading to make dropdown items that span multiple lines more obviously a single item.
You can use Pseudo Classes. See example
.dropdown-menu > li:nth-child(odd) {
background: #f5f5f5;
}
.dropdown-menu > li:nth-child(even) {
background: #a94442;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container">
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Something else here
</li>
<li>Something else here
</li>
<li>Something else here
</li>
<li>Something else here
</li>
</ul>
</div>
</div>
<hr>