So I'd like to make the select tag dropdown look like a normal text link, but when clicked have it still activate ionics select (mobile dropdown) feature.(http://ionicframework.com/docs/components/#select)
This plunkr down below shows the look of the dropdown box I don't want. Can anyone help me turn the dropdown box into a text link please!
<select ng-model="myColor" ng-options="color.name for color in colors"></select>
https://plnkr.co/edit/A9ycYBKC1GUDhpCiskr5?p=preview
Adding the following to your plunker works:
<style>
select{
-webkit-appearance:none;
outline: none;
border: none;
background: none;
color: blue;
text-decoration: underline;
}
</style>
One possibility is to remove the select entirely and mock it using an unordered list. Example.
Link
<ul ng-if="show">
<li ng-repeat="color in colors">
{{color.name}}
</li>
</ul>
Related
I created a dropdown menu that opens when you click on a text box, and then when you chose a string for that dropdown list, it puts it in the text box.
I would like to make that when you hover your mouse on the strings in the dropdown, they get slightly highlighted! how can I achieve this?
<div class="row">
<div class="col-xs-12 max300" uib-dropdown is-open="vm.descriptionDropdownOpen">
<textarea name="remarks" class="form-control" ng-model="vm.presence.description" ng-click="vm.toggleDescriptionDropdown()" autofocus></textarea>
<ul id="descriptionDropdown" uib-dropdown-menu>
<li ng-repeat="descr in vm.loadedDescriptions" ng-click="vm.presence.description = descr.text; vm.descriptionDropdownOpen = false;">
{{descr.text}}
</li>
</ul>
and the css to keep the dropdown aligned with the textbox:
#descriptionDropdown {
width: 100%;
line-height: 150%;
padding-left: 8px;
position: relative;
}
thank you very much
you can do something like this
#descriptionDropdown li:hover{
background-color:#eaeaea;
}
Change the color code to your desired color code.
And remove the padding from ul to avoid space around background when you hover. Instead, use padding on li
#descriptionDropdown li{
padding-left:8px;
}
You could add this css :
li:hover {
background-color: blue;
}
Is there a way to autosize just the dropdown list in a angularjs listbox?
I don't want the top part to resize, just the dropdown.
Something like this:
enter image description here
Try using this html and css code as your basis to solve your problem.
Markup
<div class="wrapper">
<select class="dropdown">
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select>
</div>
CSS
.wrapper{
width:150px;
overflow:hidden;
}
.dropdown{
width:150px;
}
.dropdown:focus{
width:auto;
}
I want to add a 1px border to the select box ( md-select ) of angular material.
How do I do it using CSS?
In latest angular versions, md-select is renamed as mat-select and to add border to mat-select, you can use mat-form-field in your html file as follows:
<mat-form-field appearance="outline">
<mat-select placeholder="Select your option">
<mat-option *ngFor="let option of options" [value]="option">
{{option}}
</mat-option>
</mat-select>
</mat-form-field>
Here appearance="outline", will add border to the select box.
This is how I did it. Easy-peasy!
Add CSS for md-select tag
md-select {
background-color: white;
color: black;
border : 1px solid #666666;
}
md-select {
border: 1px solid #cbcbcb;
}
According to md-tab Documentation we can have custom md-tab-label, which I'm trying to do like this:
<md-tab-label class="my-label">
Label
</md-tab-label>
My css:
.my-label{
background: #40FF00;
}
However, the background color is not appearing for tab labels.
Am I doing something wrong ?
So, I was doing this the wrong way.
The correct way is:
Define your markup
Then add css
In this case, the css can be like:
all-tabs {font-size: 20px;}
.demo-tab {
color:green;
}
and in html:
<md-tab-label>
<all-tabs class="demo-tab"> {{$index+1}} </all-tabs>
</md-tab-label>
Resulting tabs:
Is there a way to set different background colors for different tabs in md-tabs ?
The default is no color as can be seen in tabs demo
I tried <md-tabs background-color="green"> but it's not working
AngularJS Material design (md) tabs, md-tabs background color is transparent and uses the background color of your main container. Try to add CSS class for md-tabs .
Added background to entire md-tabs
md-tabs {
background: red;
border: 1px solid #e1e1e1; }
By adding CSS childs to md-tab class, you can see different colors for different tabs.
.md-tab:first-child{background: green; }
.md-tab:nth-child(2){background: pink; }
.md-tab:nth-child(3){background: blue; }
fiddle
https://jsfiddle.net/cxf3otz9/
codepen
http://codepen.io/anon/pen/zGNEyw
Upon evaluating source code, i came to there a way to achieve dynamic content formatting for tab titles. To get that, please write the code as below
<md-tabs>
<md-tab>
<md-tab-label>
<span ng-class="......">
Title
</span>
</md-tab-label>
<md-tab-body>
content
</md-tab-body>
</md-tab>
</md-tabs>