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/
Related
I am using Primeng v11.x in my Angular 11 application. For some reason the option items are not highlighting when i used keyboard arrows to select an option item from the dropdown list
<p-dropdown
#dropdown
[options]="options"
optionLabel="name"
dropdownIcon="fas fa-caret-down"
[(ngModel)]="value"
(onChange)="onValueChange()"
[placeholder]="placeholderText"
[disabled]="disabled || readonly"
[autoDisplayFirst]="config?.autoDisplayFirst"
[resetFilterOnHide]="true"
(onFocus)="onFocusHandler()"
>
<ng-template let-option pTemplate="item">
<span class="truncate-option-text">{{ option?.name }}</span>
</ng-template>
</p-dropdown>
Can anyone point me what am i doing wrong here and why it is not highlighting as it is shown in primeng documentation? https://www.primefaces.org/primeng-v11-lts/#/dropdown
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.
ref: this jsfiddle
The html is:
<script id='radio' type='text/ractive'>
<div>
<input type='radio' name='{{status}}' value='true' />
<input type='radio' name='{{status}}' value='false' />
{{status}}
</div>
</script>
<div id='container' />
and the javascript is:
Item = Ractive.extend({
template : '#radio'
})
new Ractive({
el : '#container',
template : "{{#items:i}}<item status='{{status}}' />{{/items}}",
components : { item : Item },
data:{items :[{status : 'false'},{status : 'true'}]}
})
So there are two items each with a pair of radio buttons to set status to true or false.
Problem is that the 'name' attribute is the same for both items (i.e. in all four radio buttons). So the radio buttons don't behave as two pairs (one per item) but they behave instead as a group of four.
How can this be written such that each item has its own pair of true/false radio buttons?
I found the answer in the Ractive github issues.
As noted in the issue comment, scoping can be achieved by wrapping the radio buttons inside a element. This will not work when adding the form element creates nested forms, but it will work in my case.
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
I'm trying to add a button on the accordion heading. but when I click on the button, the accordion group collapse or open. but i dont want to trigger the accordion click when I click on the button.
If i put the button tag inside accordion-heading, it will put that into accordion-toggle class. so it wont trigger the button click. not sure if there is an easy way to change it.
http://plnkr.co/edit/eXE7JjQTMxn4dOpD7uKc?p=preview
Anyone can help?
Thanks
Add $event.stopPropagation(); in the ng-click.
http://plnkr.co/edit/eXE7JjQTMxn4dOpD7uKc?p=preview
The check marked solution didn't work for me, until I added $event.preventDefault() before $event.stopPropagation(). Maybe I got different results because I'm dealing with a check box or a newer version of Angular?
<uib-accordion-heading>
{{ thisGroup.stringThatShouldOpenAndCloseTheHeader }}
<!-- my checkbox changes -->
<div class="material-switch pull-right">
<input type="checkbox" id="{{ thisGroup._id }}" name="{{ thisGroup._id }}" ng-checked="thisGroup.active" />
<label for="{{ thisGroup.template._id }}" ng-click="$event.preventDefault(); $event.stopPropagation(); $ctrl.checkOrUnCheck(arg)"></label>
</div>
</uib-accordion-heading>
I needed BOTH, though. If I removed either, any clicking on the checkbox would open or close the accordion
or you can create a directive in your button tag for further usage :
.directive('yourDirective',function(){
return{
restrict:'A',
link : function(scope,ele,attr){
ele.bind("click",function(event){
alert('I will not toggle accordion');
event.preventDefault();
event.stopPropagation();
})
}
}
})
HTML
<button your-directive> Click Me <button>