I'm using angular with chosen ( source) , and i'm trying to add rtl support , here is my Demo . i've read this but it's not working .
The problem is when body has dir="rtl" attribute after click on select list , page get horizantal scroll .
<select class="chzn-rtl" chosen disable-search="false"
no-results-text="'Tough luck'"
ng-model="bar">
<option>Hi</option>
<option>This is fun</option>
<option>I like Chosen so much</option>
<option>I also like bunny rabbits</option>
<option value=""></option>
</select>
Demo
This is happening because chosen dropdown never getting close &
On start up it goes most left of the end where scroll bar end.
CSS
.chosen-container{
.position: fixed;
z-index: 99;
}
Adding inside your style will fix this problem. I haven't find any good fix for it. This is some what hacky way but this work around I found.
Working Plunkr
Thanks.
Related
I am trying to build a selectpicker using Bootstrap 5 with optgroups. My issue is that under each optgroups, all option elements are identical and do not match the HTML I have written in my file. The issue is apparent even when we have something very simple and boiled down, such as this:
<select class="form select selectpicker" multiple id="simple">
<optgroup label="Fruits">
<option>Cherry</option>
<option>Papaya</option>
</optgroup>
<optgroup label="Vegetables">
<option>Lettuce</option>
<option>Tomato</option>
</optgroup>
</select>
What this displays is a selectpicker with two optgroups, Fruits and Vegetables, but where both optgroups have the "Cherry" and "Papaya" options. It seems to be using the options from the first optgroup and pulling these into any subsequent optgroups within the select element. Any help with resolving this would be greatly appreciated.
That is exactly the same problem i am facing right now. I am using Bootstrap 4. If i find a solution i will post it here.
edit:
Ok i fixed it for me.
I switched the bootstrap-select version and now it is working.
Now i am using bootstrap-select.1.14.0-beta3.
I am using select2 plugin for dropdown list on angularjs application. I want to show text both left and right.
<select ng-model="selEmployee" id='selUser' name="selEmp" ng-disabled="currentmode == 'edit' || currentmode=='view'">
<option ng-repeat="employee in employees" value="{{employee.Ldap}}">
{{employee.FirstName}} {{employee.LastName}} ({{employee.Email}})
</option>
<option value="" style="display:none">Please select</option>
I want to show Firstname and lastname to the left side and email to the right.
Can you please help. Thanks in advance.
There are only a few style attributes that can be applied to an element.
This is because this type of element is an example of a "replaced element". They are OS-dependent and are not part of the HTML/browser. It cannot be styled via CSS.
There are replacement plug-ins/libraries that look like a but are actually composed of regular HTML elements that CAN be styled.
it's not possible, as the styling for these elements is handled by the user's OS. MSDN: Option
Except for background-color and color, style settings applied through the style object for the option element are ignored.
I want to ask about html dropdown menu. As we know, that option tag in html only support text. However, I need to create a drowp down menu that show list of image. I've searched for it. And I found several ways, including using css or jquery. However, that's not what I want. Here is, what I want to create:
<option value = blablabla><img src = "img/blbalba.txt"></option>
The code above is not working. Is there any sugestion to display dropdown menu like that?
Thank you for your help.
As You can't do that in plain HTML, but you can do it with JQuery.
Right now You can do like this
<select>
<option value="img1" style="background-image:url(images/img1.png);">image 1</option>
<option value="img2" style="background-image:url(images/img2.png);">image 2</option>
<option value="img3" style="background-image:url(images/img3.png);">image 3</option>
<option value="img4" style="background-image:url(images/img4.png);">image 4 </option>
</select>
Browsers will only render text inside a select tag, so, if you wan to use a selector that shows images instead of text, you cannot use a select you'll need to build your own selectable object.
That could be quite difficult to do. You can use different premade solutions that people on your situation developed before or try to reinvent the wheel.
Check this :)
A free light weight jQuery plugin that allows you to create a custom drop down with images and description.
What is so cool about this plugin!
Adds images and description to otherwise boring drop downs.
Allows JSON to populate the drop down options.
Converts your HTML select element to ddSlick.
Uses Minimum css and no external stylesheets to download.
Supports callback functions on selection.
Works as good even without images or description!
http://designwithpc.com/Plugins/ddSlick#demo
How can I put image next to the text in the select menu.
For example this is not working:
<select style="background-color:black; width:150px;color:white;">
<option style="background-image:url(images/english.png);">English</option>
</select>
This is not working. I want to have a little flag first and then name of the language.
The select element does not support that type of thing. It's meant to be a native control that's consistent wherever it's used. You can, however, whip up your own custom drop-down style menu.
Here's one I did (under the graph).Also, here's a jquery plugin that might make it easier for you.
Good luck!
I have a select menu like this:
<select name="mySelect">
<option value="250" selected="selected">250</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="1500">1500</option>
</select>
It comes out looking different depending on OS and I would like it to have a different background. The problem is when I use a standard css background the arrow on the right of the select element remains visible.
select {
background: url(../images/bg_select.png);
}
I would also like to have different background colours when the select list has been opened. The default is often blue and white.
Edit: Looks like I'll have to use javascript. Are there any jQuery plugins to do this?
You may want to look at this: Cut & Paste DHTML Select menu. It uses Javascript to replace the select menu with custom HTML.
all a listener to the select and use jquery to trigger the class
add/remove classes should work fine