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.
Related
I want to hide part a dropdown list select option and then use the hidden part to filter the list. i.e. A list of names with a hidden location for each name. Then I can use Javascript to filter the list based on the location of the people. I tried the following:
<form>
<select>
<option value='x'> Visible Name <p hidden> Invisible Location</p></option>
</select>
</form>
However it's not allowing me to hide inside the option element. Is there a way to hide HTML here? I tried hidden and display:none, neither was working. Is there a way to do this?
you can't do that.
try this https://select2.org/ or https://harvesthq.github.io/chosen/
I have a select element with class "chosen-select-no-results". This is a part of the CSS chosen. As a result of this I can select multiple values in a select menu. However, when i add this select menu inside a dialog box the select inherits properties from the dialog box and loses the properties of "chosen-select-no-results". Any way to solve this issue?
Update: This is the code:
<div id="dialog-2" title="Dialog Title goes here..." style="display:none">
<select data-placeholder="Empty by default" id="myCountries" name="Countries[]" multiple class="chosen-select-no-results" style="width:450px" tabindex="5">
<optgroup label="Countries">
<option id='us'>USA</option>
<option id='ca'>Canada</option>
.
.
.
</optgroup>
</select></div>
From a "get it done" perspective, you can use:
selector{
property: value !important;
}
and modern browsers will override the inheritance with the value marked !important. But you should really only use !important when you can't find a way to properly structure your CSS. Look at inheritance rules and change the way you are specifying your CSS selectors.
You could also use the initial keyword:
selector {
property:initial;
}
Donwside: doesn't work in IE - as far as I know.
http://www.w3schools.com/cssref/css_initial.asp
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
Is there anyway to strike out text in a drop down. I'm making an commerce app and looking for a way to demonstrate that an item is on sale. I'd like to do this by showing the old price and the striking this out and showing the sale price next to it.
I tried something like this
<select>
<option value="1">Small Box 10.99</option>
<option value="2">Large Box <del>19.99</del> 15.99</option>
</select>
You could use the Unicode combining character U+0336 LONG STROKE OVERLAY:
"19.99".replace(/\d/g, function (digit) { return digit + "\u0336" })
Result: 1̶9̶.9̶9̶
(It doesn’t look so good when you apply it to the period; that’s why I left that out.)
Here are all the digits with the stroke applied, if you want to just copy them into your server-side script:
0̶1̶2̶3̶4̶5̶6̶7̶8̶9̶
This is not possible if you're using a standard HTML select. Any markup within the <option> tag will be ignored:
<!-- The style in the span tag is completely ignored -->
<option value="1"><span syle="color:red">Small</span> Box 10.99</option>
The closest you're going to get to your desired functionality with the HTML select is by using the "disabled" property. Example:
<select>
<option />
<option value="1" disabled="disabled">Small Box 10.99 (Original Price)</option>
<option value="1">Small Box 6.99 (Sale Price)</option>
</select>
Here's a working fiddle to demonstrate.
No. With HTML standard elements you can't have that kind of functionality. To solve that problem you have to create your own element.
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