I'm currently working with Angular-material.
What I'm trying to achieve is a input field with md-chips and autocomplete.
The problem that i'm having is that the "dropdown" with the suggestions doesn't render correctly. As in the last 2 items in the list don't render, as shown below.
And if I scroll all the way down it shows Test4/Test5/Test6, but not Test7 & Test8 (The list contains 8 items).
If I look in the dom I notice that there are no dom elements for the last 2 items.
The html code that I used is:
<md-chips ng-model="result" md-autocomplete-snap>
<md-autocomplete
md-autofocus="false"
md-min-length="0"
md-search-text="searchText"
md-items="item in items"
placeholder="Filter">
<md-item-template>{{item}}</md-item-template>
</md-autocomplete>
<md-chip-template><span><em>{{$chip}}</em></span></md-chip-template>
</md-chips>
I have a simple plunker in which you can see how it works.
How can I make the dropdown render correctly?
Edit:
I've noticed that if the dropdown is open and the window resizes the dropdown re-renders correctly
Related
I'm using Angular-UI's latest Datepicker control, inline, and I can't figure out how to make it bigger so it takes up the entire page (or its container).
Has anyone attempted/achieved this desired result?
Datepicker control: https://github.com/angular-ui/bootstrap/tree/master/src/datepicker from http://angular-ui.github.io/bootstrap/
I tried:
manually setting width on control,
played with different parent containers
was hopeful but no luck on this: How do you change the size of a size of an angular ui bootstrap date picker popup?
even though its Jquery related, tried How to resize the jQuery DatePicker control
changing container/element font-size appears to make no difference
Code:
<div style="display:inline-block; min-height:290px!important; min-width:800px!important;">
<div uib-datepicker ng-model="dt" class="col-12" datepicker-options="options"></div>
</div>
Any information is appreciated.
I am using md-menu-item elements in my md-menu. The menu is activated by a button - all is working fine and all uses default angular js.
Within each md-menu-item I have md-select inputs. It looks like this:
...
<md-menu-item>
<md-input-container>
<label>My Label</label>
<md-select name="myName" aria-label="My Label" ng-model="mv.myModel" ng-change="vm.onChangeEvent(foo)">
<md-option ng-value="value" ng-repeat="foo in vm.bar | orderBy: 'name'">
{{foo.name}}
</md-option>
</md-select>
</md-input-container>
</md-menu-item>
...
If I open the menu via clicking the button - If I choose nothing and I click off of the <md-select> (anywhere on screen) the md-menu goes away like it should & all is well.
If I click into one of the <md-select> elements, then click somewhere in the screen, the <md-menu> closes, but I can still see the <md-select> element.
Is there a way to "nest" select elements within a menu item so that when I close the menu item, all child elements also close?
Here is a codepen example of what I am seeing.
Thank you for any suggestions!
To hide md-select when you click outside the box . I am using '$mdSelect.hide()' to close md-select dropdown menu. I just put following 3 lines in my main controller.
$(document).bind('click', function (event) {
$mdSelect.hide();
});
The problem here is with menu and select backdrops which are used to close corresponding elements, when clicked out. So it's angular material thing. You can change z-index of these backdrops. Defaults are specified in variables.scss file (as you can see menu's backdrop is above select's, so you close it first):
$z-index-menu: 100 !default;
$z-index-calendar-pane: 100 !default;
$z-index-select: 90 !default;
That's the only quick fix I see (you can change z-index for these backdrops just in your css).
I'm using slider provided by Angular-Material. I want to show a different control on selection of particular value in slider. How do I check if that value is selected in slider?
E.g. If slider has three values VEG, NON-VEG and ALL and If user slides towards NON-VEG, then I want to show one more checkbox so how do I get NON-VEG is selected? so that I can show next control.
My slider code looks like -
<div flex="60">
<md-slider md-discrete ng-model="rating3" step="1" min="1" max="3" aria-label="rating" id="foodtype">
</div>
Any solution will be really helpful, thank you.
I have an an input box in my angular template that looks like below:
<input type="text"
name="growth"
label="Growth"
ng-model="mySettings.growth"
class="input-mini text"
required
integer
min="0"
max="4"
tooltip
tooltip-trigger="{{{true: 'mouseenter', false: 'never'}[mySettings.growth.$invalid]}}"
tooltip-placement="right"
/>
When this is rendered by angular, it looks like below:
<input type="text" name="growth" label="Growth" ng-model="mySettings.growth" class="input-mini text ng-scope ng-pristine ng-valid ng-valid-required ng-valid-integer" required="" integer="" min="0" max="4" tooltip="" tooltip-trigger="never" tooltip-placement="right">
#shawdow-root (user-agent)
<div id="inner-editor">10</div>
</input>
What is this #shadow-root element that's showing up above ?
The #shadow-root is not really an element, but an annotation added by the browser to make clear that the following element (the .inner-editor div element) is the Shadow DOM added by the browser to display the input field.
Consider a more complex form element like a slider. As a developer you simply set the input type to "range" and have a functional slider which is represented by a single input tag.
The knob and the slider track is rendered by the browser as well, but hidden for any CSS selectors or JavaScript DOM traversal functions since you only add a single input tag it would break things if the browser silently attaches DOM nodes to render the slider correctly. This "hidden DOM elements" are called Shadow DOM.
In Chrome Browser the visibility of the Shadow DOM in the Elements tab can be switched by an option under Settings > General > Elements > 'Show user agent shadow DOM'.
For further information about Shadow DOM I found this link from HTML5 Rocks and this resource were very helpful for me.
This Shadow DOM elements can be found inside a normal input tag as well, it does not relate to the AngularJS input directive you have in your example.
For CSS selection there is a ::shadow pseudo class and also a JavaScript Shadow DOM traversal API - see the HTML5 Rocks link above.
The upcomming WebComponents make use of the shadow DOM. If you are interested in implementations you may have a look at thePolymer project and its sources which makes heavy use of the Shadow DOM.
When creating a xtype=radiogroup, the rendered element is using input type=button instead of input type=radio, I took the example from the doc, put it into a fiddle and the same happens. Tried this in Firefox and Chrome.
Why is not generating radio inputs, and how can I fix this ?
This is a correct behavior. ExtJs is using input type=button to render radiogroup. These inputs are styled with css to look like real radio buttons.
As #matt has mentioned the reason for using input type=button is that a radio box's color, border and background cannot be styled using CSS.
In your fiddle inputs look like plain buttons because jsfiddle didn't load ext-all.css properly. If you add ext-all.css manualy (like I did in this fiddle) you will see that all inputs appear as if they were radio buttons.