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.
Related
What is causing my dropdown to have extra whitespace? (Apologies for the screenshot)
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="caret">Snooze</span>
</button>
<div class="dropdown-menu">
<button class="dropdown-item">1 Hour</li>
</div>
</div>
As far as I know there is nothing strange in my CSS files that would cause this. I am using Bootstrap4.
Check out this code. I removed <span class="caret"></span> because it's not a valid class in bootstrap. I changed btn-default to other button, btn-primary in this case.
The most important error - look at dropdown-menu. You open button tag and close li so I changed that to div and it works nicely.
Check out Bootstrap Docs for more info here https://getbootstrap.com/docs/4.3/components/dropdowns/.
/*DEMO*/
body{padding:3rem}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Snooze</button>
<div class="dropdown-menu">
<div class="dropdown-item">1 Hour</div>
</div>
</div>
Your HTML structure is wrong. Check what you have inside the .dropdown-menu element.
Instead of <button class="dropdown-item">1 Hour</li> use <li class="dropdown-item">1 Hour</li>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Snooze
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li class="dropdown-item">1 Hour</li>
</div>
</div>
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
Using bootstrap 3 I am trying to produce a row of labeled dropdown menus with a final query button. However the buttons are floating to the left of the labels due to the btn-toolbar CSS. Changing the btn-toolbar to float right produces a reversed order of query button and choices with the labels in the right position.
<div class="btn-toolbar row">
<div class="btn-group">
<label class="btn-label">Topic:</label>
<button id="choose_topic_title" type="button" class="btn btn-default">Select</button>
<button id="choose_topic" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul id="choose_topic_menu" class="dropdown-menu">
<li>all</li>
<li>weather</li>
<li>sports</li>
<li>business</li>
<li>news</li>
<li>arts</li>
<li>science</li>
</ul>
</div>
<div class="btn-group">
<label for="choose_lang_title" class="control-label">Language:</label>
<button id="choose_lang_title" type="button" class="btn btn-default">Select</button>
<button id="choose_lang" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul id="choose_lang_menu" class="dropdown-menu">
<li>en-us</li>
<li>es-us</li>
</ul>
</div>
<div class="btn-group">
<a href="#">
<button id="query_data" type="button" class="btn btn-primary">Query</button>
</a>
</div>
</div>
Does bootstrap have a simple way to position a horizontal row of labeled dropdown menus?
Here is a jsfiddle demonstrating the issue: https://jsfiddle.net/cgalles/nqmqka2e/4/
You can change float of your labels (or you can add pull-left class to labels).
.btn-toolbar .btn-label {
float: left;
}
JSFIDDLE
I am trying to get bootstrap dropdown list working on plnkr but it is not dropping down the list, I have created a plunk here:
http://plnkr.co/edit/tw3O5ihT7YB79BcAGlsh
This code was copied from bootstrap:
<body ng-controller="MainCtrl as vm">
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<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>
<ul class="dropdown-menu">
<li ng-repeat="a in vm.exportAction">
<a ng-if="a.visble == true">
<span ng-click="vm.selectedExport(a)">{{a.action}}</span>
</a>
<div ng-if="a.divider == true">
<div role="separator" class="divider"></div>
</div>
</li>
</ul>
</div>
</body>
Any ideas?
Add Jquery and Bootstrap JavaScript files in head after Bootstrap's CSS - plnkr:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
I am working on an app that uses Bootstrap 3. I have a drop down list that is currently defined like this:
<select id="options" class="form-control">
<option>Go home</option>
<option>Go Left</option>
<option>Go Up</option>
<option>Go Right</option>
<option>Go Down</option>
</select>
I like the behavior of the drop down list because when you choose an option, its text is shown. I also like the fact that the drop down stretches to fill the available space. However, I want the dividers that Bootstrap's button drop downs provides. In an effort to get the best of both worlds, I've attempted the following:
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Go Home... <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Go Home</li>
<li class="divider"></li>
<li>Go Left</li>
<li>Go Up</li>
<li>Go Right</li>
<li>Go Down</li>
</ul>
</div>
When I choose an option, the text does not get updated though. In addition, the drop down does not stretch to fill the available space.
You can use the btn-block class to make the buttons and dropdown fill width..
<div class="btn-group btn-block">
<button type="button" class="btn btn-block btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Go Home... <span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block" role="menu">
<li>Go Home</li>
<li class="divider"></li>
<li>Go Left</li>
<li>Go Up</li>
<li>Go Right</li>
<li>Go Down</li>
</ul>
</div>
The only way to get the dropdown to behave as a select control is using JavaScript and/or jQuery like this..
$(".dropdown-menu li a").click(function(){
var selText = $(this).text();
$(this).parents('.btn-group').find('.dropdown-toggle').html(selText+' <span class="caret"></span>');
});
Demo: http://codeply.com/go/KI7AAEtWeo