I want to create a dropdown with scrollable list items. I used overflow-y: scroll; in CSS but not worked as I expected. Please check the sample svelte code written below.
<script>
let names = ['Name1','Name2','Name3','Name4','Name5',
'Name6','Name7','Name8','Name9','Name10',
'Name11','Name12','Name13','Name14','Name15',
'Name16','Name17','Name18','Name19','Name20',];
let selected;
</script>
<select bind:value={selected}>
{#each names as name}
<option value={name}>
{name}
</option>
{/each}
</select>
Svelte REPL Example
How can I achieve this in Svelte?
I need to display the dropdown lists as in the picture
EDIT
I used the size attribute for the <select></select> tag but the list items are not selectable and the dropdown height is getting broken. I want to display the scrollable dropdown list items when I click on the dropdown field.
Set a size <select ... size="8">
Related
I have seen some other posts using below format but it did not work at all, even the select is not opening:
.click(".selectpicker option[value='somevalue']")
But when I wrote like this:
.click("select[id='chooseone']")
it did open the dropdown.
This is how select looks like:
<select class="selectpicker btn dropdown-toggle btn-default" title="Choose one of the following..." id="chooseone" style="">
<option value="chooseone" style="">Choose one</option>
<option value="value1" style="">option 1</option>
<option value="value2" style="">option 2</option>
<option value="value3">option 3</option>
</select>
There is react code in backend, so an onchange event is fired which will display appropriate input field per option and a submit button.
My test is basically:
select an option
fill fields
submit
validate result container
How should I write this code? This is my first time in such thing. Any help is appreciated.
Thanks
UPDATE >>>
This was in Safari and it did not work. But when I installed chromedriver, it did work. Here is the working code:
.click('select[id="searchBySelect"] option[value="any_option_value"]')
This will click the provided option in the select element.
First you need to open the dropdown menu. It looks like you already know this but in any case you would start with:
browser.click('.selectpicker');
Then there are a couple of ways you can get the option you want to click. You can choose a specific option by doing something like this (just modify it to select whichever option you want)
browser.element('css selector', '.selectpicker', function(element) {
browser.elementIdElement(element.value.ELEMENT, 'css selector', 'option[value="value1"]', function(option) {
browser.elementIdClick(option.ELEMENT);
});
});
Or you could get all of the options in an array and click on one of them this way:
browser.elements('css selector', 'option', function(elements) {
browser.elementIdClick(elements.value[0].ELEMENT); //can use any index here as long as you know which one you are looking for
});
tehbeardedone thanks so much for providing your solution. I had to do a small fix to get the elementIdClick() working.
Instead of option.ELEMENT
I had to use option.value.ELEMENT
Since my code snippet had to be added to a page object, this is its final version:
let durationOptionSelector = `option[contains(text(), "${duration}")]`; //dynamic option selector
this.click("#duration_dropdown");
this.api.element("xpath", "#duration_dropdown", function (dropdown) {
this.elementIdElement(dropdown.value.ELEMENT, "xpath", durationOptionSelector, function(option) {
this.elementIdClick(option.value.ELEMENT);
});
});
I am using select2() in <select multiple>. What I have is a placeholder in that select. What I am doing is initially I am hiding the select containing div and then I am making it visible. In this case initially placeholder not showing.
If we are not doing this hide and block thing then it is working fine.
FIDDLE
(EDITED) Sorry I read the question wrong. I thought it was about regular selects not multiples.
I've checked your fiddle.
This contains 2 multiples. <select multiple id="e1" style="width:100%" multiple data-placeholder="Choose country(s)*">. I don't know if this is intentional. But you should remove one.
The input element select2 has it's width set to 0px when you set display: none. You need to increase the width to an appropriate size.
I added $('.select2-input, .select2-default', $("#divid")).css('width', '100%'); to your code and this solved your issue.
Snippet (non-functional, needs select2 libraries):
$("#e1").select2();
$('.select2-input, .select2-default', $("#divid")).css('width', '100%');
$("#divid").css("display","block");
<div id="divid" style="display:none;">
<select id="e1" style="width:100%" multiple data-placeholder="Choose country(s)*">
<option value="AL">Alabama</option>
<option value="Am">Amalapuram</option>
<option value="An">Anakapalli</option>
<option value="Ak">Akkayapalem</option>
<option value="WY">Wyoming</option>
</select>
</div>
just add this class in your .css file.
.select2-search__field{width:100% !important;}
Am new to ZK and using combobox in my page.I gave width="100%" to combobox but it doesn't take and if I refresh the page , the combobox shrinks.
Please anyone tell me how I can set common width to entire combobox in my application uniformly?
There are few ways to do what you want. for example:
<div sclass="positionInfo">
<combobox readonly="true" width="30%" model="#load(vm.positionModel)" constraint="no empty:Please select position!"
selectedItem="#bind(fx.position)" tabindex="3">
<template name="model" var="po">
<comboitem label="#load(po.positionName)" value="#load(po.positionId)" />
</template>
</combobox>
</div>
put your combobox inside div element, then set CSS class named "positionInfo".
set CSS rule for CSS selector .positionInfo (width by a specific pixels or percent), then everything will be done.
I'm creating a template showcase theme that has a set of image blocks and i'm having a custom contact form too. As soon as users selects an image it'll dynamically select from my custom form's select option too.
Now i'm trying to hide my select option field,
My code is
<form action="">
<select name="templates">
<option value="THEME001">THEME001</option>
<option value="THEME002">THEME002</option>
<option value="THEME003">THEME003</option>
<option value="THEME004">THEME004</option>
<option value="THEME005">THEME005</option>
</select>
</form>
So far i tried type="hidden" but its not working. Is there any other way to do it other than using ccs visibility:hidden
You can use jquery's hide function like
$("select").hide();
I think you can remove it by Jquery's remove function.
$("select").remove();
Just pick the select element and you can use these Jquery functions to hide or remove your select element
With javascript you have to use like the following (display = 'none')
document.getElementById('THE ID OF YOUR SELECT BOX').style.display = 'none'
I have an HTML input element of type select. The height of the element is 28px. Without modifying the element with CSS, the text inside gets automatically vertically-aligned in all browsers except for IE8. In IE8 the select's text is in the bottom left corner of the element.
Does anyone know how to vertically-align the text inside an HTML select element?
Without your html it is hard to know exactly what you are styling. It sounds like you are using something like <input type="select" /> but that isn't actually valid html.
However, to vertically align the text in the middle you need to set the line-height to be the same figure as your height.
So in this case you would need to set line-height: 28px; to match height: 28px;.
For your html I would recommend either using:
<input type="text" /> if you are looking for a standard text input
or
If you are looking for a drop down selection:
<select>
<option value="Test1">Test 1</option>
<option value="Test2">Test 2</option>
</select>