The example given in bootstrap-select works by adding a tickicon to every selection. How would I override this feature so I can highlight my selections instead of adding a tickicon? I tried setting data-show-tick to false, but that doesn't seem to work for multiple selections.
I'm not sure where to go. Would appreciate advice.
<select class="selectpicker" multiple>
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
I've resolved this by hidding the tick icons with CSS.
For this, you may use the following css rule in your own css file (declared after the original bootstrap-select.css file) :
.bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a span.check-mark { display: none !important; }
Or you can alter the original rule of the bootstrap-select.css file by changing it for :
.bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a span.check-mark { position: absolute; display: none; right: 15px; margin-top: 5px; }
Related
All other css element working fine rather background-color and color.
<md-button class="md-raised" ng-style="style1"
ng-click="style1=style; style2=null;style3=null;style4=null;removable=0;loadPorcessBarcodes();Head.ProcessMode=1"
ng-class="{'selected-btn': Head.ProcessMode == 1}">Auto Nozzle From Stock</md-button>
My css:
.selected-btn {
padding: 2px;
font-size: 20px;
color: #ffffff;
background-color: #122b01;
}
It seems as you've been using ng-style, which is already applying background-color and color style. So even though you apply a class over it with the overridden property, the same element would not reflect, because inline CSS takes first preference. If you wanted to enforce background-color and color properties to be enforced then mark them as !important to see the expected behavior.
Other better way to solve this problem would moving style1 to new class and apply it using ng-class with its appropriate expression.
Is there a way to get a drop down arrow on md-autocomplete like md-select has?
It provided a visual clue that the control has a drop down, AND allows the user to open the drop down without typing anything
Angular Material does not provide such functionality but you could try to add something like this in your css file:
md-autocomplete-wrap:after {
display: block;
content: '\25BC';
position: relative;
top: 5px;
speak: none;
font-size: 13px;
left: -10px;
color: rgba(0,0,0,0.38);
-webkit-transform: scaleY(.5) scaleX(1);
transform: scaleY(.5) scaleX(1);
}
Its not perfect solution, but may be enough for you.
And if you want to make dropdown open on click, just add md-min-length="0" attribute to your md-autocomplete.
I am trying to make simple demo of grid view .In which I have header of title (having gray background) actually I need to reduce the height of title or headers of table which have gray background .can we add alternate color of rows ? please see the given image .It header or tittle is too small as compared to my plunker .Secondly there is alternate color in row .can we add that in my plunker .
http://plnkr.co/edit/7bSnk0fU0NBOF1GIwHSK?p=preview
.search.list-inset, .search.list-inset .item:first-child {
border-radius: 50px;
}
.search .item-input .icon {
font-size: 200%;
}
.gray-20 {
background-color: #eee;
}
#media (min-width: 600px) {
.search {
width: 50%;
margin-left:auto;
margin-right: auto;
}
}
.mrginrightleft{
margin-left:5%;
margin-right:15%;
}
.brd{
border: 1px solid grey;
}
here is my code![enter image description here][1]
Updated Plunker
How to style striped rows
There are two ways to do this. One is pure CSS using the :nth-child(even) or (odd) pseudo classes. You can add a class to your row and just use style it how you want, such as:
my-class:nth-child(even) .col {
background-color: blue;
}
But I did it differently to teach you something about ng-repeat. Yes, it's for a loop, but it has a bunch of special properties that it exposes for you. Two in particular are $odd and $even. As you might expect, $odd returns true if it is an odd iteration and $even is true when the index is an even number.
So, you can use these with ng-class as part of your expression. Here, I'm adding a class of odd-row:
<div class="row" ng-repeat="column in displayData | orderBy: sortval:reverse | filter: query" ng-class="{'odd-row':$odd}">
Then to make the styles, I added the following rule. I applied the background-color to the .col children so that the background would be contained within the borders that are applied on the .col elements.
.odd-row .col {
background-color: #eee;
}
EDIT:
Actually, you are correct, ng-style would be a third-way, but it doesn't apply a class, it applies inline styles. Therefore, you need to pass it an object with you styles, so for example (simplified):
ng-style="{'color': 'red'}"
How can I changed the height of md-toolbar in material design?
http://jsfiddle.net/kostonstyle/gsroofa5/
On the first toolbar I want a height from 30px and tried that:
<md-toolbar style:"height: 30px;">
But it does not work at all. I need a navbar with two bulks, that because of two toolbar.
I try this, but now letter disappear.
http://jsfiddle.net/kostonstyle/r178sp9o/1/
You can use an inline style like this
<md-toolbar style="min-height:30px">
Use min-height to make the toolbar smaller
The height of the toolbar can be changed by adding the classes to the md-toolbar.
For a medium sized toolbar add class="md-medium-tall"
For toolbar bigger than the normal add class="md-tall"
You can also inline style the toolbar style="height:50px;"
The accepted answer did not work for me. Here is how I got it working in my Angular Material app:
<mat-toolbar color="primary"
style="min-height: 30px !important; height: 30px !important;">
This worked for me on Angular 8. Put this code in your scss
.mat-toolbar {
min-height: 50px !important;
height: 50px !important;
}
.mat-toolbar-row {
min-height: 50px !important;
height: 50px !important;
}
Replace 'mat' with 'md'
If just setting the min-height doesn't work, like it didn't work for me, you will also have to add in max-height with the same value:
HTML
<md-toolbar class="toolbar"></md-toolbar>
CSS
.toolbar {
max-height: 30px;
min-height: 30px;
}
I want to implement the multiselect combo box in my program. Means If I will select multiple names through check box then all selected names will be fall in that combo with comma separated... I want a sample example... Could you please help me..
Use this user extension. Examples page.
you can use combobox plugin Ext.ux.Andrie.Select. For demo :
http://www.andrei.neculau.home.ro/extjs2/ux.Andrie.Select/Select_test.htm
I have Implemented Checkcombo without using any extra plugin or file.
You just need to add image checkbox image in css
And CSS Reference
.chkbox {
height: 13px;
width: 13px;
background: transparent url(please see checkbox image) no-repeat 0px 0px;
float: left;
margin: 4px 5px 0 0;
}
.x-boundlist-selected .chkbox {
background-position: 0 -13px;
}
See the demo in JSFiddle