Is there a way to remove the preselected option in <select> element, like it happens with mat-select?
I mean that I don't want the first element of the array to be preselected in the element, but without adding an "empty" entry. I want something like this:
Is this possible with native select?
just include another option at the top:
<mat-option>None</mat-option>
Related
I have problem with one of the selects on page that I want to locate.
SELECT name="" id="" onblur=""
OPTION selected></OPTION
OPTION value=324686977>324686977</OPTION
OPTION value=324689385>324689385</OPTION
/SELECT
The parent name is "ATTR_SECVOIPNETA" and it generates few more Selects with blank spaces too.
I tried few options before asking, however I have no more ideas.
I attached a screen to be more specific how problem looks like.
Screen1
As per screenshot, this is a part of table and if you can locate label "Numer wirtualny" (in this case), you can also locate the corresponding "select" field(drop down).
Here is a sample xpath for your use-
//*[#id='ATTR_SECVOIPNETA']//descendant::*[contains(text(),'Numer wirtualny')]//following-sibling::select
or
//*[#id='ATTR_SECVOIPNETA']//child::*[contains(text(),'Numer wirtualny')]//following-sibling::select
Note:
Make sure you talk to your developer to add some ids. :)
Descendant is similar to grand grand child. In this case you can use "child".
Problem:
I have an ion-select and in the controller when the user does something, I populate the ion-select with 1 value and make that value the selected value. The ion-select does not show that the value has been selected, but the [(ngModel)] has the correct value. When I open the ion-select it shows the value in the list and it is selected, when selecting the value in the list again it goes over the ion-select label.
How can I populate the ion-select with a value and make the populated value the selected value so that it shows on the ion-select as a selected item?
Screenshots:
The Make has value of CHEVROLET but it does not show as selected by ion-select:
When tapping on ion-select, it shows the CHEVROLET as selected and CHEVROLET goes over the Make label:
HTML:
<ion-item>
<ion-label position="floating">
<span class="required">* </span>Make
</ion-label>
<ion-select [interfaceOptions]="global.compactAlertOptions" id="make" [(ngModel)]="global.valuation.vehicle.make" name="make" #makeRef="ngModel" required>
<ion-select-option *ngFor="let make of makes">{{make}}</ion-select-option>
</ion-select>
</ion-item>
<ion-label *ngIf="makeRef.touched && makeRef.invalid && makeRef.errors.required" class="error">Make is required</ion-label>
Controller:
Modal Controller (the Make gets set in a popup modal):
this.global.valuation.vehicle.make = this.vehicleDetails.VehicleMake;
Populate the ion-select options in parent controller:
this.makes = [this.global.valuation.vehicle.make];
This generally happens when the value in ngModel is set before <ion-select-option> options are loaded on the DOM.
You will have to explicitly delay setting the value to ngModel until the <ion-select> and options are loaded on the DOM.
You can achieve it by adding a setTimeout in your component file and assign the ngModel value in the callback of setTimeout.
It seems to me that this has to do with some custom css that you are using on the template. Since when you use floating for a select is exactly the same as when you use stacked, Since the select is going to expand on the ion-item anyway. This floating works best with ion-input.
In your case, if the option was not selected, the select should be empty and the label above it. but it is on the item furthermore on the baseline of the select. When you select the option it will show in the baseline on the select left aligned.
like this:
If you remove the floating you will see what I mean.
it should show like this:
It will be easier to understand the issue if you just provide the CSS bits that are messing with the alignment of the elements.
My guess is that you have some styles that only reduce the ion-item and don't deal with alignment and positioning of the inner elements.
I will try to simplify my explanation.
https://codepen.io/jordan_gio/pen/QeRNZr
Check it out.
When It works : Don't click Remove. Try to select one or more items. It works right?
When it doesn't work: Now try to remove the first one(Remove button after the first item). Then try to select checkboxes once again. After removal, both of them get selected and then I can't choose multiple checkboxes.
You use an index of the item as the key and then transform the array. It is not a good idea. To solve your problem use e as a :key instead of index.
<li v-for="e in options">
<v-checkbox
:key="e"
...
My Problem:
The Page I try to test with NightwatchJS Contains Some Input Fields that have the Same beginning, but a random number is added. I want to Fill the Textfield on the page. Only one with this name is present on the same time.
<input id="groupNamec7aed06a-67a1-4780-9cc3-5b985666adb9" class="d-styled-input" data-value-update="keyup" data-bind="value: name" title="">
Is the definition of the Field. groupName is every Time the same, but the number changes.
Is there a possibility to use CSS Selector in nightwatch instead of XPATH?
You can try this way :
input[id^="groupName"]
From MDN > Attribute selectors :
[attr^=value] : Represents an element with an attribute name of attr and whose first value is prefixed by "value".
Unfortunately CSS Selector does not provide such a way. You could use a different CSS Selector to match inputs with an id and get those as a list. Afterwards using getAttribute('id') you could do it manually, but this seems like unnecessary effort to me and I'd recommend just using Xpath.
Ofcourse you could try and get a different unique CSS Selector. If it's in a form you could locate the form and use :nth-child but if I remember correctly this has limited/no support in IE.
Edit Apparently IE9 and later does support :nth-child
Hello I am trying to check if the color of an input is red.(Selenium IDE 1.9 Firefox Plugin)
If i select it with
<td>verifyAttribute</td>
<td>id=focus_me</td>
<td>*color=red*</td>
the "Find" button works, but there is no attribute selected to check.
if i change it to
<td>verifyAttribute</td>
<td>id=focus_me#color</td>
<td>*color=red*</td>
the element is not found, so how do i use it ?
Assuming we are talking about color as a style, your HTML probably looks something like:
<span id="custom1" style="color:red;">Custom Attribute 1</span>
As you can see 'color' is not an attribute. It is part of the value of the 'style' attribute.
So what you want do is verify that the 'style' attribute contains the 'color:red':
<td>verifyAttribute</td>
<td>id=focus_me#style</td>
<td>*color:*red*</td>
Note that the asterisk (*) are wildcards. They have been added in case there is another style property before or after the one of interest. One was also added between the color and red since sometimes people puts spaces and sometimes not.