I have a problem with md-select (Angular Material Design v1.0.0).
When pressing the select, it freezes and I can't press on anything - it stays open!
<md-input-container flex>
<md-select ng-model="product.paymentCode" name="paymentCode" md-on-open="loadPaymentCode()" placeholder="Payment Code" required>
<md-option ng-value="rPaymentCode" ng-selected="rPaymentCode.id==product.paymentCode.id" ng-repeat="rPaymentCode in paymentCodes">{{ rPaymentCode.code}}</md-option>
</md-select>
<div ng-messages="createProductForm.paymentCode.$error" ng-show="createProductForm.paymentCode.$touched">
<div ng-message="required">choose payment code</div>
</div>
<tr-clear model-to-clear="product.paymentCode" ng-if="product.paymentCode"></tr-clear>
</md-input-container>
It worked before with this current version of angular material design. I've read all the CHANGELOG and nothing helped to figure it out.
I figured it out.. The problem was in the bower.json it was written like this
'angular-material': '~1.0.0'
and the first time when I did 'bower update' it updated to '1.0.0-rc4'
but the second time when I did 'bower update' it was 1.0.0 and it got wrong.
All the version 1.0.0-rc5 till 1.0.4 breaking md-select in my site.(I've checked each of them)
It still unclear how to solve the implemantaion of mdSelect in my site to fit the updated versions.
I suspect this what breaks;
"select no longer overflows window, resizes from small to big correctly"(version 1.0.0-rc5)
The Change Log
https://github.com/angular/material/blob/master/CHANGELOG.md
I hope someone could help me understand how to fix it so I could upgrade to the newest version.
Thank you, Diana.
Related
I'm trying to select the third option in a dropdown list. Below are some details about the element:
Outer HTML:
<md-option _ngcontent-c6="" role="option" ng-reflect-value="last90Days" tabindex="0" id="md-option-2" aria-selected="false" aria-disabled="false" class="mat-option"><!--bindings={
"ng-reflect-ng-if": "false"
}--> Last 90 Days <!--bindings={
"ng-reflect-ng-if": "true"
}--><div class="mat-option-ripple mat-ripple" md-ripple="" ng-reflect-trigger="[object HTMLElement]"> </div> </md-option>
CSS Selector:
#md-option-37 > div:nth-child(1)
Sorry for the terrible formatting. If anyone has any suggestions about how to select the "Last 90 Days" dropdown item then I'd be very grateful.
Based on what I understand out of your info an the AngularJS md-select you need to do the following
// Open the md-select, use the correct selector, this is a demo
$('md-select').click();
// There is an animation, I don't know how long, you need to wait for the animation to be finished.
// Quick and dirty is a browser.sleep(), but it's better to find a more stable way because if the animation will take longer in the future your test will break
browser.sleep(500);
// Click on you option, this can be done in several ways
// By index
$$('md-option').get(1).click();
// By text
element(by.cssContainingText('md-option', 'your text')).click();
// Wait for the menu to close, this is also an animation
browser.sleep(500);
For element(by.css('selector')); I always use the shorthand notation, for the rest of the selectors see the docs of Protractor.
I would advice to use a better way to wait for the animation to be done. Here I used a browser.sleep(), but it's not future proof. You don't want your script to rely on sleeps.
Hope it helps.
I'm using Angular Material Datepicker, and I'm trying to display the "year" view (which display months instead of days) when opening the datepicker :
<md-datepicker required ng-model="departureDate"
md-current-view="year"
md-placeholder="Date de départ"
md-open-on-focus class="col-md-6"></md-datepicker>
<md-datepicker required ng-model="leavingDate"
md-current-view="year"
md-placeholder="Date de retour"
md-open-on-focus class="col-md-6"></md-datepicker>
However, It doesnt work. I searched over the git repo issues, didn't find any solution about that, nor any reason why it behave like this.
I had exactly the same issue and was using version 1.1.0.
I upgraded to 1.1.8 and the issue was fixed straight away.
Hope that helps,
Sam
I am upgrading an application from Angular Material 1.0.5 to 1.0.9
I currently have a few input containers containing select and icon elements like so
<md-input-container class="md-icon-right" flex>
<label>Something</label>
<md-select ng-model="option2" flex>
<md-option ng-repeat="option in options">
</md-option>
</md-select>
<md-icon class="material-icons">X</md-icon>
</md-input-container>
So this would mean I get the icon appearing to the right of the select input.
After upgrading to 1.0.9, using the same markup as above, the icon now appears to the left.
I have looked at the input examples on the demo's page for AM 1.0.9 and I can't see anything has changed across the versions.
Here's how it should look with 1.0.5 - http://codepen.io/parky128/pen/rLWJNK
Just change the material script includes to 1.0.9 and you will see, in fact this happens from 1.0.6 onwards.
Notice as well this only seems to be an issue when using an md-select, regular inputs don't get affected by this.
I can't see any breaking changes in their change log to say why this would happen.
Anyone know how I can get the icon to align to the right when using an md-select inside the md-input-container for version 1.0.6 upwards?
Thanks
If you inspect the CSS of the md-icon for version 1.0.5 you will see the following:
md-input-container.md-icon-right>md-icon:last-of-type {
margin: 0;
right: 2px;
left: auto;
}
This is defined in angular-material.min.css.
This does not appear when you inspect the md-icon for version 1.0.9:
If you add the above CSS to your own CSS file it will work with version 1.0.9 - CodePen
The other thing to note is that the md-input-container is shifted to the left. This can be fixed (after further inspection) by the following CSS:
md-input-container.md-icon-right {
padding-left: 0 !important;
}
Standard date field with datepicker-popup from UI Bootstrap.
Setting date programmatically - no problem. But after ANY change it is marked as $invalid and stays $invalid even format is correct and I edit it to previous value (which was correct in the beginning). Why?
<form name="form">
<input name="testDatepicker"
ng-model="testDatepicker"
placeholder="dd-MM-yyyy"
datepicker-popup="dd-MM-yyyy"/>
<div style="color:red;font-weight:bold;"
ng-show="form.testDatepicker.$dirty && form.testDatepicker.$invalid">
Invalid date
</div>
</form>
JSFiddle: http://jsfiddle.net/yoorek/mug2e381/
Apparently there is a bug in UI Bootstrap: https://github.com/angular-ui/bootstrap/issues/3835
Upgrade the version to the latest one. It has at least been resolved in version 0.14.3.
I am converting a little HTML/JS form I did years ago, as a React.js learning exercise, and I have run into a stumbling block which I'd like to understand the reason for.
Basically, as it originally was, I had a select, where you could choose which form you wanted to display. The onchange handler for the select displayed the chosen form and hid the others. So my first step in doing a React makeover of this, which has worked fine, is to make the forms into React components. I am left with this as my HTML:
<body>
<div id="main">
<select id="calculations" onChange="handleSelect();">
<option value="" selected="selected">SELECT CALCULATION FORM</option>
<option value="1">Enter pace and distance to get a total time</option>
<option value="2">Enter distance and target time to get the required pace</option>
<option value="3">Enter pace and time to get the distance run</option>
<option value="4">Convert mph to mins/mile</option>
<option value="5">Convert mins/mile to mph</option>
</select>
<div id="calcForm"/>
</div>
</body>
This is the JS:
window.handleSelect=function(){
var selected=$("#calculations").val();
if(selected!=""){
React.render(React.createElement(CalcForm, {selected: selected, distances: distances}),document.getElementById('calcForm'));
} else {
$("#calcForm").html("");//clear it
}
};
I have been frustrated, though, in my attempts to finish the job off my making the main select into a React component. I tried creating a SelectCalc component and using it like this:
<body>
<div id="main">
<div id="selectCalc"/>
<div id="calcForm"/>
</div>
</body>
In my app.js I had this:
React.render(React.createElement(SelectCalc,null), document.getElementById('selectCalc'));
I made the handleSelect a function of the SelectCalc class, so that when an option was selected, it called this:
React.render(React.createElement(CalcForm, {selected: selected, distances: distances}),document.getElementById('calcForm'));
Here is where the problem came in, though. When done this way, when I select an option I get the error:
Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.
The target container in question is the 'calcForm' div, as identified in document.getElementById('calcForm'). For reasons which baffle me, this is null (I checked in the console). And yet it is clearly there in the HTML, and it was successfully targeted by my more primitive select change handler, prior to the React makeover.
So what is the issue? What am I misunderstanding here? Given that this is such a very simple example of React.js at work, how should I be doing it?
Fiddle of non-working version at https://jsfiddle.net/JohnMoore/7rp3n1oy/2/, I hope - first ever use of Fiddle (!), so I hope it shows the issue. Try running it and selecting one of the options and see the error in the console. There is also a preceding error, I notice, on JSFiddle: "SyntaxError: expected expression, got '<'". I have to say this doesn't make much sense to me, as I would have thought what was expected in the return from the render was, precisely, some HTML beginning with <. I don't know whether this is related or whether it's an artefact of the Fiddle environment.
i solved it by removing the divs. They will be create dynamically in the react component.
Here is the fiddle.
EDIT: The old one did not work because <div id="selectCalc" /> is "invalid" html. it will be replaced with <div id="selectCalc"> instead of <div id="selectCalc"></div>. And because there is a missing end-tag, the browser ignores everthing after the <div ... />. -> <div id="calcForm" /> won't appear in the DOM.
Here is a version with the corrected html tags, but you should prefer the other version.
Take a look at this for more information about in/valid html tags.