I'm trying to select an item from a dropdown with Capybara. I have done this just fine using a different CSS framework; now I'm using Materialize.
I have talked with the developer and he mentioned that Materialize uses two select boxes and so it might be getting confused there. Not sure if that's helpful but I thought I'd mention it.
I'm dealing with CSS that looks something like
<div class="select-wrapper country required">
<span class="caret">▼</span>
<input type="text" class="select-dropdown" readonly="true" data-activates="select-options-0e5c0ffe-1e78-5df0-c08d-7bced194abd1" value="">
<ul id="select-options-0e5c0ffe-1e78-5df0-c08d-7bced194abd1" class="dropdown-content select-dropdown" style="width: 435px; position: absolute; top: 0px; left: 0px; opacity: 1; display: none;"><li class=""> <span></span></li>
<li class=""><span>Afghanistan</span></li>
<li class=""><span>Åland Islands</span></li>
<li class=""><span>Albania</span></li>
<li class=""><span>Algeria</span></li>
<li class=""><span>United States</span></li></ul>
<select class="country required initialized" name="store[address_attributes][country]" id="store_address_attributes_country"><option value=""></option>
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="US">United States</option>
What I've tried is
select "United States", :from => 'store_address_attributes_country'
I've also tried
find("store_address_attributes_country").select("United States")
(I also tried this same thing using the XPath, selector and name instead of the ID)
These give me the error
Capybara::ElementNotFound:
Unable to find select box "store_address_attributes_country`
When using materialize the <select> element is hidden on the page and replaced with an <input> element as the trigger and <ul> and <li> elements as the dropdown. Because of this you can't use #select. Instead you have to replicate what a user would have to do, which is click on the input used to trigger the dropdown and then click on the correct li. In this case that would be
find("input.select-dropdown").click
find("li", text: "United States").click
Obviously the first find would have to be scoped to something on the page (or increase the specificity of the selector) if there is more than one select on the page
Related
I've been trying to figure out the way to hide every 'label' element in the html below except the first one. I've got a repeater field that adds a row with a dropdown select field and a label.
Each new row adds the select field and the label. The label id starts with 'label-repeat- ' and the suffix is dynamically generated based on the number of repeater rows, so it goes: 'label-repeat-1', 'label-repeat-2', 'label-repeat-3' etc.
The issue is that each repeater row is separately wrapped into its own div, so I'm guessing I cannot use :not(:first-child) in the case.
Here is my fiddle and below is my html:
<div class="fieldset">
<div class="status">
<label id="label-repeat-1" class="label-repeater">Status</label>
<select id="field-repeat-1" class="field-repeater">
<option value="Open">Open</option>
<option value="Closed">Closed</option>
</select>
</div>
</div>
<div class="fieldset">
<div class="status">
<label id="label-repeat-2" class="label-repeater">Status</label>
<select id="field-repeat-2" class="field-repeater">
<option value="Open">Open</option>
<option value="Closed">Closed</option>
</select>
</div>
</div>
<div class="fieldset">
<div class="status">
<label id="label-repeat-3" class="label-repeater">Status</label>
<select id="field-repeat-3" class="field-repeater">
<option value="Open">Open</option>
<option value="Closed">Closed</option>
</select>
</div>
</div>
I've been trying to use the wildcard selector to select the label with label[id^='label-repeat-'], label[id*=' label-repeat-'] which works fine, but then I'm trying to add the :nth-of-type(n+2) pseudo class to select every label except the first one and hide it, but that doesn't seem to work.
label[id^='label-repeat-']:nth-of-type(n+2),
label[id*=' label-repeat-']:nth-of-type(n+2) {
display: none !important;
}
Is there any other way to do this with CSS? Or even jQuery?
If I understand, you want to hide all except for the first label. So, you would end up with a label and 3 select boxes under it? Using the "plus" combinator in CSS is the easiest way of saying "all but the first one"...
.fieldset + .fieldset label {
display:none;
}
This rule is saying any fieldset that is followed by another fieldset (all but the first one), then the nested label under those.
I have a form with code similar to:
<form class="eng-select" action="action.php" method="POST">
<select name="position">
<option value="disabled" disabled selected>Engineer</option>
<option value="entry-1">John Doe</option>
<option value="entry-2">David Smith</option>
<option value="entry-3">Michael Silk</option>
</select>
</form>
Which produces a dropdown like this:
However I would like to change the css color of the disabled selected entry (what the user sees when they load the page - the picture above). Is this possible, and if so what would the proper CSS call be?
I have looked at similar posts for IE here that mention:
select option [disabled] { background-color: blue; }
but this does not work for me (I am using Google Chrome).
To clarify - I would like to change the CSS before the user clicks and opens the dropdown box.
Your CSS must be
select option[disabled] { background-color: blue; }
Without the space after option. It should work better this way.
With the space, it applies to descendants of the option.
use below css for disabled select option
select option:disabled {
background-color: blue;
}
<form class="eng-select" action="action.php" method="POST">
<select name="position">
<option value="disabled" disabled selected>Engineer</option>
<option value="entry-1">John Doe</option>
<option value="entry-2">David Smith</option>
<option value="entry-3">Michael Silk</option>
</select>
</form>
I want to capture all click events on the menu of my page.
I've setup a tag that will capture all click events on my page. It works with the trigger setup to "Click - All elements".
When I set up the trigger to specifically register only the clicks on elements of the menu var, nothing is detected. So, definetly, I'm doing somenthing wrong within the trigger.
EDIT 1:
this is the web page: www.chazki.com
Menu code:
<div class="collapse navbar-collapse" id="navbar-ex-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">
<a class="new_service">Solicita un Chazki</a>
</li>
<li>
Faq
</li>
<li>
<p class="new_service new-service" style=" padding: 6px;"><a>Login</a></p>
</li>
<li>
<a class="btn btn-default btn-lg location_ac"><i class="fa fa-fw fa-spin fa-star"></i>Lima</a>
</li>
</ul>
<form>
<fieldset class="navbar-form navbar-left">
<input type="text" name="track-code" id="track-code" class="form-control" placeholder="Código de tracking?">
<button id="track-find-button" class="btn btn-default" type="button">Buscar</button>
</fieldset>
</form>
</div>
Try 1 on trigger:
Element ID: It's supposed to limit the clicks registered for only the div containing the menu.
I get this error in debugging mode:
Try 2 on trigger:
on Click ID.
Click ID error:
#
I could also use the ul tag for the trigger, as it is the only unordered list on the page.
Any hint is welcome. Thanks!
Basically I needed to understand the different variables in GTM. I've found Simo Ahava web very helpful in this regard.
https://www.simoahava.com/analytics/variable-guide-google-tag-manager/
Thanks to Simo, I also understood the benefits of usen "Match CSS Selector" option.
So my configuration ended like this:
Using:
Click All Elements.
This trigger fires on "Some Clicks".
"Click Element" -> "Matches CSS Selector" -> "#navbar-ex-collapse ul li a, #navbar-ex-collapse ul li p"
As I have li and a html elements, I needed to use 2 CSS selectors, separated by a comma.
The Semantic UI dropdown menu works well by adding (http://jsfiddle.net/VL2Zq/22/):
$('.ui.dropdown')
.dropdown()
;
However, the dropdown menu cannot be displayed if I add the class active: http://jsfiddle.net/VL2Zq/21/
<div class="ui dropdown item active">
For now, I suggest to use select box with the value selected, and convert it to semantic UI dropdown list. This however isn't the best and most flexible approach.
<h2>Official Search Selection Dropdown Select Tag</h2>
<select name="country" class="ui search selection dropdown">
<option value="">State</option>
<option>Alabama</option>
<option>Alaska</option>
<option>Washington</option>
<option>West Virginia</option>
<option>Wisconsin</option>
<option selected>Wyoming</option>
</select>
http://jsfiddle.net/VL2Zq/23/
Edit:
Found that Semantic UI already has a method to handle this.
$('.dropdown').dropdown();
var selectedValue = "Female";
$('.dropdown').dropdown('set selected', selectedValue);
http://jsfiddle.net/ap3kfftw/1/
My question is similar to this one: CSS to select another Element based on a HTML Select Option Value
Here's my HTML:
<select id="select-card">
<option value=""></option>
<option value="card">**** **** **** 1982</>
</select>
<p>Or enter a new one...</p>
I want to hide the <p> when the user selects a card from the list, and show it when the user selects the empty option.
Is this possible in pure CSS, or do I need to use JavaScript?
Use the required attribute:
<select id="select-card" required>
And write rules for valid and invalid for the element, selecting the following p-element:
#select-card:invalid + p { display: block; }
#select-card:valid + p { display: none; }
Fiddle