I'm truing to use materialize css in my project. I load the selectable elements for my select item from the server side, and when data arrived I update the select control with this statement:
$("#surveyTypeId").material_select();
The generated list looks like it contains an additional empty element at the top of the list (the gray area on the image).
When I try to select an item, the option values seems to be shifted. I have the value of the "Classec Survey" item when I select the gray area, I have the value of "Referer Survey about Candidate" when I select "Classic Survey" on the UI.
The generated source is this:
<div class="input-field col s10 m10 l10 no-padding">
<label for="surveyTypeId">Select survey type</label>
<div class="select-wrapper select-material ng-pristine ng-untouched ng-invalid ng-invalid-required initialized">
<span class="caret">▼</span>
<input class="select-dropdown" readonly="true"
data-activates="select-options-995977c5-5d47-4511-fb6a-6a51cbc1cfb6" value=""
type="text">
<ul style="width: 712px; position: absolute; top: 0px; left: 0px; opacity: 1; display: none;" id="select-options-995977c5-5d47-4511-fb6a-6a51cbc1cfb6" class="dropdown-content select-dropdown">
<li class="active"><span></span></li>
<li class=""><span>Classic Survey</span></li>
<li class=""><span>Referrer Survey about Candidate</span></li>
<li class=""><span>Project Manager Survey about Candidate</span></li>
</ul>
<select required="required" id="surveyTypeId" class="select-material
ng-untouched initialized ng-dirty ng-valid-parse ng-valid ng-valid-required" name="surveyTypeId" ng-model="survey.SurveyTypeId" ng-required="true">
<!-- ngRepeat: wl in lookups.SurveyTypesLookupValues -->
<option class="ng-binding ng-scope" ng-repeat="wl in lookups.SurveyTypesLookupValues" value="1">Classic Survey</option>
<!-- end ngRepeat: wl in lookups.SurveyTypesLookupValues -->
<option class="ng-binding ng-scope" ng-repeat="wl in lookups.SurveyTypesLookupValues" value="2">Referrer Survey about Candidate</option>
<!-- end ngRepeat: wl in lookups.SurveyTypesLookupValues -->
<option class="ng-binding ng-scope" ng-repeat="wl in lookups.SurveyTypesLookupValues" value="3">Project Manager Survey about Candidate</option><!-- end ngRepeat: wl in lookups.SurveyTypesLookupValues -->
</select>
</div>
</div>
As you can see I've got only 3 options in the original select control still.
Have you got any idea, why I have the empty item in the materialize generated list? Or how to get rid of that empty item? Or at least how to fix the shift in the values?
Thanks.
SOLVED:
After double checking the angular generation, it turned out, that nitially an empty item is generated as you said. After that the angular update fixed that, but the materialize list generation still kept that item. (Although I did not understand why?) So really the root cause was angular. Thanks to #shashanka n for the idea.
Related
(Backend developer trying to do some front end development here)
I have a simple HTML form with some text field inputs and a select menu. When the form is submitted I see the text field values hitting the web server but I don't see the value for the select menu hitting the server. The code for the select menu is:
<div class="mdc-select mdc-select--outlined mdc-select--with-leading-icon role-list">
<i class="material-icons mdc-select__icon" tabindex="0" role="button">work_outline</i>
<div class="mdc-select__anchor role-width-class">
<i class="mdc-select__dropdown-icon"></i>
<div id="role" class="mdc-select__selected-text" aria-labelledby="roles-select-label"></div>
<div class="mdc-notched-outline">
<div class="mdc-notched-outline__leading"></div>
<div class="mdc-notched-outline__notch">
<label id="roles-select-label" class="mdc-floating-label">Role</label>
</div>
<div class="mdc-notched-outline__trailing"></div>
</div>
</div>
<div class="mdc-select__menu mdc-menu mdc-menu-surface role">
<ul class="mdc-list">
<li class="mdc-list-item" data-value="0">
Painter
</li>
<li class="mdc-list-item" data-value="1">
Electrician
</li>
<li class="mdc-list-item" data-value="2">
Decorator
</li>
</ul>
</div>
</div>
The select menu is a material design component as described here.
The Javascript I have associated to this component is:
mdc.select.MDCSelect.attachTo(document.querySelector('.role-list'));
const role = new mdc.select.MDCSelect(document.querySelector('.role-list'));
role.listen('change', () => {
alert(`Selected option at index ${role.selectedIndex} with value "${role.value}"`);
});
A couple of questions I have straight off the bat:
Should I be using <li> instead of <option> - the code above follows the examples shown on the website.
Should there be a name attribute?
Create a hidden input:
<input type="hidden" name="my_select" id="my_select" value="">
Then store the value there:
mdc.select.MDCSelect.attachTo(document.querySelector('.role-list'));
const role = new mdc.select.MDCSelect(document.querySelector('.role-list'));
role.listen('change', () => {
document.getElementById('my_select').value = role.value;
});
There is a new update to this in material documentation in additional information section. It suggests doing the same thing that the accepted answer says but with no JavaScript.
Just wanted to put this out there for new people referring to this.
Select with hidden input (for HTML forms)
For convenient submission of Select's value in HTML forms, a hidden input
element may be added under the root element. The component will synchronize
its value with that of the hidden input.
<div class="mdc-select mdc-select--filled demo-width-class">
<div class="mdc-select__anchor">
<!-- Rest of component omitted for brevity -->
</div>
</div>
I am trying to load a dropdown with angularjs and semantic UI with the following code
<div id="state" class="ui search selection dropdown">
<label for="state">Estado</label>
<input type="hidden" name="state">
<i class="dropdown icon"></i>
<div class="default text">Selecione o Estado</div>
<div class="menu" ng-model="state" ng-change="loadCity()">
<div ng-repeat="state in states" class="item" data-value="{{state.ID}}">{{state.NAME}}</div>
</div>
</div>
<div>
But the event is not called.
When I use the code below it works:
<select id="state" class="ui search selection dropdown" ng-model="state" ng-init="loadState()" ng-change="loadCity(state.ID)">
<option ng-repeat="state in states" value="{{state.ID}}">{{state.NAME}}</option>
</select>
What am I doing wrong?
Looks like this is an issue other people have encountered. Take a look at this issue: https://github.com/Semantic-Org/Semantic-UI/issues/1913
I found a way to solve this issue on angular side using some 1.3 magic. It's not the best way of doing this but it works.
It can simply be solved by using the formController and a watch.
I updated the plnkr. Note that i use underscore.js to find the array index of the control inside the form.
The rest is pure angular and some jquery.
http://plnkr.co/edit/eDOej3zJ0bwQ1xyX1LDI?p=preview
Look at the section starting with:
app.directive('select'
I have a selected option in my select tag. The purpose of the selected tag is to display all the stores in the div tag underneath. I've been searching around and some suggest ng-selected, ng-init and ng-options, but I have no idea which one or how I should do it.
I've managed to sort the stores based on their category which you can find in the select tag, but I can't display all of them :/
Here's my code:
<select style="width:100px;" ng-model="selectedCategory.category" ng-options="category.id as category.name for category in categories">
<option ng-selected="{{}}" selected value="">Visa Alla</option>
<!-- {{ selectedCategory.category }} -->
</select>
<div class="row row-white" style="margin-bottom:10px" ng-click="browseShop(shop)" ng-repeat="shop in shops | filter:selectedCategory" ng-show="isAvailable(shop)">
<div class="col"></div>
<div class="col">
<img ng-src="{{shop.img}}" />
<br/>
<span style="color:black">{{getCategory(shop)}}</span>
</div>
<div class="col"></div>
</div>
Really thankful for all the help I can get!
i want to automate some browser tasks using Python and Selenium webdriver on Chromium browser. My python script is already able to login, navigate to a subpage / do some clicks, and insert something into a form.
My problem is a mandatory dropdown list where i have to choose something before i can go on. I think the webpage contains angularjs / javascript at that point (third line in the code below) to create the dropdown, and i don't know how to handle that.
Problem seem to be 1) to locate the element (xpath seems to change sometimes), and 2) i'm unable to click or send keys to what i've found. Also i've tried some kinds of "WebDriverWait" and sleep commands and "wait.until(expected_conditions.visibility_of_element_located((By.XPATH, ...))"... no luck so far.
Is it at all possible to solve that problem with just Python and Selenium?
Or do i need something like Protractor (and does Protractor just works with Javascript commands)? Also i've seen Pytractor...
I'm quite a Newbie concerning that stuff, could someone please explain what could be a good way to solve this problem? Thanks in advance... :)
Webpage code looks like this (grabbed using Firebug/Firepath):
<div class="ng-scope ng-isolate-scope" model-contains-key="true" ref="salutations" cat-input-select="editDetail.salutation">
<div id="s2id_autogen1" class="select2-container form-control ng-untouched ng-valid ng-dirty ng-valid-parse">
<a class="select2-choice select2-default" tabindex="-1" href="javascript:void(0)">
<span id="select2-chosen-2" class="select2-chosen"/>
<abbr class="select2-search-choice-close"/>
<span class="select2-arrow" role="presentation">
<b role="presentation"/>
</span>
</a>
<label class="select2-offscreen" for="s2id_autogen2"/>
<input id="s2id_autogen2" class="select2-focusser select2-offscreen" type="text" role="button" aria-haspopup="true" aria-labelledby="select2-chosen-2"/>
<div class="select2-drop select2-display-none select2-with-searchbox">
<div class="select2-search">
<label class="select2-offscreen" for="s2id_autogen2_search"/>
<input id="s2id_autogen2_search" class="select2-input" type="text" aria-autocomplete="list" aria-expanded="true" role="combobox" spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off" aria-owns="select2-results-2" placeholder=""/>
</div>
<ul id="select2-results-2" class="select2-results" role="listbox"/>
</div>
</div>
<select class="form-control ng-untouched ng-valid ng-dirty ng-valid-parse" ng-change="modelChanged(); changeCallback({value: selectValue.value})" ng-readonly="readonly" ng-disabled="disabled" ng-model="selectValue.value" ui-select2="{dropdownAutoWidth: 'true', allowClear: 'false'}" tabindex="-1" title="" style="display: none;">
<option value=""/>
<!-- ngRepeat: option in options -->
<option class="ng-binding ng-scope ng-isolate-scope" cat-i18n="xxxxxxx.salutation.Mr" value="Mr" ng-repeat="option in options">Mr</option>
<!-- end ngRepeat: option in options -->
<option class="ng-binding ng-scope ng-isolate-scope" cat-i18n="xxxxxxx.salutation.Ms" value="Ms" ng-repeat="option in options">Ms</option>
<!-- end ngRepeat: option in options -->
</select>
<!-- ngIf: infoText -->
</div>
In order to automate any webpage developed in Angular JS, we have to use an opensource tool "Protractor". Selenium itself won't be supporting the Angular JS web applications automation. For more information on Protractor, please refer to the below article
Testing Angular JS application using Protractor
The protractor also uses the same commands which selenium uses.
Hope this helps.
I modified my asp.net 2.0 website to be mobile friendly. On desktops and tablets, the navigation menu is a horizontal bar styled with the class mobilemenu, and on all other devices it is a dropdown menu, styled with class mobiledropdown. Everything works except on mobile devices with the dropdown menu, the home page menu item does nothing when selected, but all the other dropdown items navigate correctly. In both cases the url for home page is "./" but I also tried hardcoding it with the full http://www plus my domain and that also works for mobilemenu but not mobiledropdown.
I am thinking it must be related to the javascript which is used only for the dropdown.
The code is below. it is contained in an include file. the css hides or shows the appropriate menu based on media queries and that all works great.
The first div element is for larger devices and is the code that has been used for several years without any issues. I added the mobilemenu class for hiding it on smaller devices. I added the second div for showing the dropdown on smaller devices.
<div class="mobilemenu" style="width:90%; margin-left:5%; margin-right:5%; margin-top:0%; margin-bottom:1%; padding:0px;">
<div id="menu" style="text-align:center;width:100%;height:22px; padding:0px;">
<ul id="nav" style="line-height: 22px; width:100%; margin:0px; padding:0px;">
<li style="width:15%;">
<a class="custom" href="./">Home</a>
</li>
<li style="width:20%;">
<a class="custom" href="Order.aspx" >Order</a>
</li>
<li style="width:15%;">
<a class="custom" href="Company.aspx" >Company</a>
</li>
<li style="width:20%; ">
<a class="custom" href="Download.aspx" >Downloads</a>
</li>
<li style="width:15%; ">
<a class="custom" href="Blog.aspx" >Blog</a>
</li>
</ul>
</div>
<div id="menu2" style="text-align:left">
<select class="mobiledropdown" onChange="window.location=this.value">
<option value="./" selected="">Home</option>
<option value="Support.aspx">Support</option>
<option value="Order.aspx" >Order</option>
<option value="Company.aspx" >Company</option>
<option value="Download.aspx" >Downloads</option>
<option value="Blog.aspx" >Blog</option>
</select>
</div>
</div>
Remove the dot (.):
<select class="mobiledropdown" onChange="window.location=this.value">
<option value="/" selected="">Home</option>
{rest of your code goes here}
</select>
I found a solution, although I do not understand why it works so maybe someone could explain.
I changed the html code for the dropdown menu by inserting a "Menu" option as the first option and removed the selected attribute on the Home option. It seems illogical that I have to add a menu item that I dont want.
<div id="menu2" style="text-align:left">
<select class="mobiledropdown" onChange="window.location=this.value">
<option>Menu</option>
<option value="./">Home</option>
<option value="Support.aspx">Support</option>
<option value="Order.aspx" >Order</option>
<option value="Company.aspx" >Company</option>
<option value="Download.aspx" >Downloads</option>
<option value="Blog.aspx" >Blog</option>
</select>
</div