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.
Related
Currently, I am working with a reactjs web application and it has many dropdowns throughout the application, the normal dropdown (select) approach doesn't work because the options to select are dynamically loaded from react dropdown component, but for the moment I tried to sort out by using keystroke like this:
#browser.text_field(name: "countries").set("Germany");sleep1
#browser.text_field(name: "countries").send_keys :enter
I am writing into the textfield and wait until the expected text appears then use the keystroke.
Below is the HTML, I know it doesn't help to any extent:
<div class="Select-input" style="display: inline-block;"><input name="countries" data-test-id="countries" autocomplete="0" aria-activedescendant="react-select-7--value" aria-expanded="false" aria-haspopup="false" aria-owns="" role="combobox" value="" style="box-sizing: content-box; width: 5px;"><div style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: 16px; font-family: "Open Sans", sans-serif; font-weight: 400; font-style: normal; letter-spacing: normal; text-transform: none;"></div></div>
However, I see this is not the best solution any suggestions or solutions would be very helpful.
You need to pass the enter key upon that option not on the text field. May be something like this.
#browser.text_field(name: "countries").set("Germany");sleep1
#browser.element(text: "Germany").send_keys :enter
You don't need to pass the enter key to be more specific, you can trigger the click instead.
#browser.text_field(name: "countries").set("Germany");sleep1
#browser.element(text: "Germany").click
I have working plunker with my accordion:
http://plnkr.co/edit/Qk4AxzXLuDDAAXt3wZ6z?p=preview
Did the same in my project and when I click to the accordion header, it shows accordion content but its height is 1px and data successfully binds.
What's wrong? :(
(it's not a problem with angular and bootstrap version)
You need to handle the CSS on your own. Refer following dummy CSS for your purpose:
#accordion .ui-accordion-content {
width: 100%;
background-color: #f3f3f3;
color: #777;
font-size: 10pt;
line-height: 16pt;
}
where #accordian is id of the div.
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'm trying to make a cross browser CSS nav-bar for mobile and desktop using Jquery Mobile.
I don't want to use media queries for retina/non-retina devices, so I'm basically trying to use a single hi-res CSS icon/sprite on all devices. The following works nicely except on IE7+8.
HTML
<span class="hasIcon">
<span class="someText"></span>
<span class="someBackground"></span>
</span>
CSS
.hasIcon {
display: inline-block;
position: static;
height: 30px; width: 30px;
background-color: none;
background: url("http://www.franckreich.de/x/IMG/gen/6060dummy.png") no-repeat;
background-size: 30px 30px;
-o-background-size: 30px 30px;
-webkit-background-size: 30px 30px;
-moz-background-size: 30px 30px;
-ms-background-size: 30px 30px;
}
JsFiddle example here
Of course this breaks in IE7+8, as backgrond-size is not supported...
My question: Does anybody have an idea how I can achieve this effect on IE7+8?
Solutions, I don't want to use:
CSS Media Query for retina/non retina = miss out on good looks on desktop
put retina/non-retina icons in single sprite & position accordingly = works so-so & serving bigger file
Curious to see if anybody can help me out.
Thanks!
You can use a filter: http://jsfiddle.net/thirtydot/QTT4N/3/
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='http://www.franckreich.de/x/IMG/gen/6060dummy.png',
sizingMethod='scale');
http://msdn.microsoft.com/en-us/library/ms532969(v=vs.85).aspx
Duplicate of IE 8: background-size fix.
Short answer: Use IE Filter. http://www.pziecina.com/design/turorial_demos/resize_background.php
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