I am trying to use the Dropdown as a Group Add-on in bootstrap:
<div class="col-md-5">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">#Html.DropDownListFor(m => m.SelectedCountryCode, new SelectList(Model.ListOfCountries, "PhoneCode", "PhoneCode"), "Select")</div>
#Html.TextBoxFor(m => Model.Value, new { #class = "form-control" })
</div>
</div>
</div>
This is the result I get:
Is there another way to do this so my styles of dropdown are same as the textbox?
I don't want the grey part around the dropdown.
Here is a JSFiddle:
https://jsfiddle.net/mdawood1991/yLygh0v4/
This is the best way to fix this. Style the dropdown with this:
background: transparent;
border: 0;
Then it'll look like this:
And when open:
You can use an input-group-btn dropdown:
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
aria-expanded="false">Select <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li>0044</li>
<li>0033</li>
<li>001</li>
</ul>
</div><!-- /btn-group -->
Fiddle.
Or, you can remove the padding from the .input-group-addon:
.input-group-addon {
padding: 0 !important;
background: transparent;
}
Fiddle.
What about styling the select box?
select{
background-color: transparent;
}
It may be that I got your question wrong :)
The area then just vanishes on my phone. I'm using safari on iOS 8.
You can also override the background color for that class:
.input-group-addon {
background: white;
}
Or just change it in the existing CSS.
Related
<span class="row top-bar-left align-items-center" style="width: 80%; float:left">
<div tabindex="1" class="link tab" routerLink="details" routerLinkActive="active"
[queryParams]="activatedRoute.queryParams | async">
<p>JDA-WMS Details</p>
</div>
<div tabindex="2" class="link tab" routerLink="summary" routerLinkActive="active"
[queryParams]="activatedRoute.queryParams | async">
<p>JDA-WMS Summary</p>
</div>
<div tabindex="3" class="link tab" routerLink="shortage" routerLinkActive="active"
[queryParams]="activatedRoute.queryParams | async">
<p>Shortage</p>
</div>
</span>
With ths code above I'm wanting to use the 3 DIVs as tabs. When I click one of them I want the background color to change. Then when I click another one I want it to change also and reset the original one back.
You are already using routerLinkActive to give "active" css class to the active tab,
so all you need to do is some css tweaking
.tab.active {
background: red;
}
You can use 3 lines of jQuery like this:
$('.tab').click(function() {
$('.tab').removeClass('active');
$(this).addClass('active');
});
.tab {
height:100px;width:100px;background:gray;margin:25px;cursor:pointer;
}
.tab.active {
background:red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab">1</div>
<div class="tab">2</div>
<div class="tab">3</div>
I have a dropdown that at the moment exists of one button. I would like this button to be disabled and that the color changes when it is disabled. I created this behaviour already with the code underneath.
Can't this be written cleaner? Because now I actually create 2 buttons but only one is seen..
I have tried this but I get stuck when adding the css background-color in the button code.
<div class="block-options">
<div class="dropdown">
<!-- Options -->
<button type="button" class="btn-block-option dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="si si-settings"></i></button>
<div class="dropdown-menu dropdown-menu-right" x-placement="bottom-end">
<!-- Disable buttons based on selected packages -->
<div *ngIf="checkIfValidVersion()">
<button class="dropdown-item js-swal-confirm" (click)="createMajors()">Create major version</button>
</div>
<div *ngIf="!checkIfValidVersion()">
<button [disabled]="!checkIfValidVersion()" style = "background-color:grey; color:black" class="dropdown-item js-swal-confirm">Create major version</button>
</div>
</div>
</div>
</div>
Ok, what you have to do is write a styling class for your button that will take effect if the button is disabled
Something similar to this will do the trick:
.my-button:disabled {
background-color: grey;
color: black
}
and your HTML will look like this:
<div class="block-options">
<div class="dropdown">
<!-- Options -->
<button type="button" class="btn-block-option dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false"><i class="si si-settings"></i></button>
<div class="dropdown-menu dropdown-menu-right" x-placement="bottom-end">
<!-- Disable buttons based on selected packages -->
<button class="dropdown-item js-swal-confirm my-button" (click)="createMajors()"
[disabled]="!checkIfValidVersion()">Create major version</button>
</div>
</div>
</div>
Related topic here
<button class="dropdown-item js-swal-confirm" [class.disabledStyle] ="!checkIfValidVersion()"> Create major version </button>
The above code will add a class name "disabledStyle" to the existing class if the function returns true.
disabledStyle {
background: grey;
}
You are duplicating the code. You just require one line which is already there. Based on condition it will put disable attribute in your button. Do not put css code at button level.
<button [disabled]="!checkIfValidVersion()" class="dropdown-item js-swal-confirm">Create major version</button>
Now put css at button level for disable scenario:
button[disabled=disabled], button:disabled {
background-color:grey;
color:black;}
This is most cleaner way.
In the following html the .pricing-item has a border which appears when it is hovered (.pricing-item:hover::after). I am trying to set it so that when the button (pricing-button btn-primary) is hovered, the css for the .pricing-item border is set to '0px;'.
<div class="pricing-item">
<div class="pricing-icon"></div>
<h3 class="pricing-title">Title</h3>
<div class="pricing-price"><span class="pricing-currency">$</span>200<span class="pricing-period">/ year</span></div>
<ul class="pricing-feature-list">
<li class="pricing-feature">Feature</li>
<li class="pricing-feature">Feature</li>
<li class="pricing-feature">Feature</li>
<li class="pricing-feature">Feature</li>
</ul>
<button class="pricing-button btn btn-primary">Choose plan</button>
In css file tried using ~ or + to make one class affect the other but just not getting it right. Any help would be appreciated. Thanks.
Here is a trick you can do, to achieve what you want.
.pricing-item-wrapper {
position: relative;
}
.pricing-item {
padding-bottom: 30px;
border: 1px solid red;
z-index: 1;
}
.pricing-button {
position: absolute;
bottom: 10px;
left: 1px;
z-index: 2;
}
.pricing-button:hover + .pricing-item {
border: 1px solid transparent;
}
<div class="pricing-item-wrapper">
<button class="pricing-button btn btn-primary">Choose plan</button>
<div class="pricing-item">
<div class="pricing-icon"></div>
<h3 class="pricing-title">Title</h3>
<div class="pricing-price">
<span class="pricing-currency">$</span>
200
<span class="pricing-period">/ year</span>
</div>
<ul class="pricing-feature-list">
<li class="pricing-feature">Feature</li>
<li class="pricing-feature">Feature</li>
<li class="pricing-feature">Feature</li>
<li class="pricing-feature">Feature</li>
</ul>
</div>
</div>
With your current HTML code, the short answer is : you can't.
The reason is : you try to access a parent element with CSS, which is not possible.
<div class="pricing-item">
...
<button class="pricing-button btn btn-primary">Choose plan</button>
</div>
You'll have to change something in your HTML, e.g :
<div class="pricing-item">
...
<button class="pricing-button btn btn-primary">Choose plan</button>
<div class="pricing-item-border"></div>
</div>
So it will make things a lot easier :
.pricing-item:hover .pricing-item-border { /* Display the border */}
.pricing-item:hover .pricing-button:hover + .pricing-item-border { /* Hide the border */}
Unfortunately no CSS selectors can go up the dom.. For this you'd have to use JS.
You could add that hover effect on pricing-item but not from just hovering on the button within that element.
A simple JS version would be:
$('.pricing-button.btn-primary').hover(
function() {
$(this).parent().css('border', '2px solid black');
},
function() {
$(this).parent().css('border', 'none');
}
);
CSS
.pricing-item.no-border{
border: 0px;
}
JS
$(".pricing-button".on({
mouseenter: function () {
//stuff to do on mouse enter
$(this).parents(".pricing-item").addClass("no-border");
},
mouseleave: function () {
//stuff to do on mouse leave
$(this).parents(".pricing-item").removeClass("no-border");
}
});
I use angular-ui drop down
It works fine but I have no clue how to handle multiple item in drop down.
Consider following example in Plunker
HTML
<div class="btn-group" dropdown is-open="status.isopen">
<button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="item in items">{{item}}</li>
</ul>
</div>
I want define scroll and set dropdown shorter.
Any ideas?
You could just have a css rule to define that, for dropdown-menu.
.dropdown-menu{
max-height: 300px; /*Provide height in pixels or in other units as per your layout*/
overflow-y: auto; /*Provide an auto overflow to diaply scroll*/
}
Plnkr
Or in general you may want your application to have its own styled dropdown, in such cases add a custom class and rule for your dropdowns (So that you website does not look like a bootstrap website :) ) an example:-
angular.module('plunker', ['ui.bootstrap']);
function DropdownCtrl($scope) {
$scope.items = [];
for(i=0; i<100; i++){
$scope.items.push("val_" + i);
}
$scope.status = {
isopen: false
};
$scope.toggled = function(open) {
console.log('Dropdown is now: ', open);
};
$scope.toggleDropdown = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.status.isopen = !$scope.status.isopen;
};
}
.btn-group.myapp-select .btn.dropdown-toggle{
color:blue;
background:#cecece;
border-radius:2px;
}
.btn-group.myapp-select.open .btn.dropdown-toggle{
background-color: #afafaf;
font-weight: bold;
}
.myapp-select > ul.dropdown-menu{
max-height: 300px;
overflow-y: auto;
border-radius:2px;
}
.myapp-select > ul.dropdown-menu > li{
color:blue;
background:#cecece;
}
<!doctype html>
<html ng-app="plunker">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<style>
.btn-group.myapp-select .btn.dropdown-toggle{
color:blue;
background:#cecece;
border-radius:2px;
}
.btn-group.myapp-select.open .btn.dropdown-toggle{
background-color: #afafaf;
font-weight: bold;
}
.myapp-select > ul.dropdown-menu{
max-height: 300px;
overflow-y: auto;
border-radius:2px;
}
.myapp-select > ul.dropdown-menu > li{
color:blue;
background:#cecece;
}
</style>
</head>
<body>
<div ng-controller="DropdownCtrl">
<!-- Single button -->
<div class="btn-group myapp-select" dropdown is-open="status.isopen">
<button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="item in items">{{item}}</li>
</ul>
</div>
</div>
</body>
</html>
I know the question is too old but I guess someone out there will benefit from this answer
Well, ngFor is typically made to solve this problem. For one of my particular use cases I had to Display a set of values in an array in a drop down menu. I had to change the filtering case based on the item in the drop down clicked.
so my component.ts file consists of a an array and a function which will be invoked when item in the drop down is clicked:
displayColumns: string[] = ['first_name', 'state', 'contact_no', 'email', 'gender', 'pincode', 'status', 'actions'];
filterColumnValue(val: any){
console.log(val);
console.log(val);
}
and my HTML file:
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#" *ngFor="let columns of displayColumns" (click)="filterColumnValue(columns)">{{ columns }}</a>
</div>
Hope this answer helps
Is there a bootstrap 3 way to handle small screen sizes for "btn-group"?
Button group is placed in <td> and wrapped in <div class="btn-group">:
Looks okay, until you re-size it to <768px. Then you have:
How to make them persistent? I tried to add class btn-group-justified. But it gives as a result full width buttons and looks even worse on re-size to small screen size.
P.S> I have an idea, how to implement it adding full set of custom classes. My question is about bootstrap3 way. May be I missed something.
You can create two button groups with the same buttons and make one of them btn-group-vertical. Then after applying the hidden-xs and visible-xs to them you can hide and show vertical group on appropriate screen size.
<div class="btn-group hidden-xs">
<button class="btn btn-default">View</button>
<button class="btn btn-default">Delete</button>
</div>
<div class="btn-group-vertical visible-xs">
<button class="btn btn-default">View</button>
<button class="btn btn-default">Delete</button>
</div>
Unfortunately, this requries repeating the markup of the buttons but it should not be an issue if you use any templating tool (define the markup once and include it twice).
Wide screen:
Narrow screen:
See the JSFiddle.
I want to offer you a version with icons from FontAwesome.
With a minimum screen resolution text hide leaving only icons.
Sorry for my english.
<div class="btn-group">
<button class="btn btn-default" title="View"><i class="fa fa-eye"></i><span class="hidden-xs"> View</span></button>
<button class="btn btn-default" title="Delete"><i class="fa fa-times"></i><span class="hidden-xs"> Delete</span></button>
</div>
UPDATE by Vishal Kumar: add GLYPHICONS preview
Check this fiddle: http://jsfiddle.net/Jeen/w33GD/4/
Here's an alternative to #fracz's answer you can try that won't duplicate HTML content. Just copied the css from btn-vertical-group and btn-group and used a media query.
All you have to do is add btn-toolbar-responsive to the toolbar div's classes.
It's in scss for simplicity although you can convert it online easily. Here is the JS Bin:
demo
SCSS:
.btn-toolbar.btn-toolbar-responsive{
text-align: center;
margin: 0;
.btn-group{
float: none;
}
#media (max-width: 767px){
.btn + .btn,
.btn + .btn-group,
.btn-group + .btn,
.btn-group + .btn-group {
margin-top: -1px;
margin-left: 0;
}
.btn-group{
position: relative;
display: block;
vertical-align: middle;
margin: 0;
.btn {
display: block;
float: none;
max-width: 100%;
}
.btn:not(:first-child):not(:last-child) {
border-radius: 0;
}
.btn:first-child:not(:last-child) {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.btn:last-child:not(:first-child) {
border-top-right-radius: 0;
border-top-left-radius: 0;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
}
.btn-group:not(:first-child):not(:last-child) {
.btn {
border-radius: 0;
}
}
.btn-group:first-child:not(:last-child) {
.btn:last-child, .dropdown-toggle {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
}
.btn-group:last-child:not(:first-child) {
.btn:first-child {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
}
}
}
Okay, so this worked in a test page I made:
<div class='btn-group'>
<button class='btn btn-default col-xs-6'>View</button>
<button class='btn btn-default col-xs-6'>Delete</button>
</div>
Forcing each button to be 50% using col-xs-6 kept it from wrapping in my own test page modeled after your example. However, if you have a wider table than the example and you squish down to 320px, the text will overflow the buttons and it looks even worse than your bad example.
You may already know this and it may not be practical for your situation, so I apologize if I'm just presenting unhelpful examples. However, if your table is much wider than what you posted as an example, I would suggest making your rows using the BS grid instead of a table. What this allows you to do is make a single row become two rows when the page shrinks, e.g.
<div class='row'>
<div class='col-xs-12 col-sm-6'>Some additional details</div>
<div class='col-xs-6 col-sm-3'>Date</div>
<div class='col-xs-6 col-sm-3'>
<div class='btn-group'>
<button class='btn btn-default col-xs-6'>View</button>
<button class='btn btn-default col-xs-6'>Delete</button>
</div>
</div>
</div>
then, just find a way to alternate colors, add borders, or whatever you need to show the separation between the multiple row rows.
In the BootPly that I just made, as I said, the buttons start to overlap at very small sizes, but they don't wrap when inside a <td> in my browser tests:
http://www.bootply.com/117330
try to set min-width on <td>
<td style="min-width: 90px">
<div class="btn-group">
<button class=" btn btn-default btn-circle" type="button">
<i class="fa fa-check"></i>
</button>
<button class=" btn btn-default btn-circle" type="button">
<i class="fa fa-question"></i>
</button>
<button class=" btn btn-default btn-circle" type="button">
<i class="fa fa-times"></i>
</button>
</div>
</td>
<div id="secondNav" class="btn-group" role="group">
<button class='btn btn-default'>View</button>
<button class='btn btn-default'>Delete</button>
</div>
You can accomplish this with some simple jQuery
<script>
$(window).resize(function() {
justifyBtnGroup('secondNav');
});
function justifyBtnGroup(id) {
var btnGroup = $('#' + id);
if($(window).width() > 768) {
btnGroup.addClass('btn-group').removeClass('btn-group-vertical');
} else {
btnGroup.removeClass('btn-group').addClass('btn-group-vertical');
}
}
justifyBtnGroup('secondNav'); // will run when page loads
</script>
This help for me. It doesn't make the buttons vertical, but it doesn't compress them either
<div class="btn-group flex-wrap" data-toggle="buttons">
No, If you open page in small screen, bootstrap wrap you buttons.
<div class="btn-group btn-group-lg">...</div>
<div class="btn-group">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>
you can add the class (btn-group-xs,btn-group-sm) in the media < 720px
hope it will help you ;)