I have a select ond it's options contains text in hebrew and english. For example:
<select>
<option value="1">(J9J) AMCKDPR ללא הגבלה IAPPLE</option>
<option value="2">(B0A) MICROSOFT-עם הגבלה</option>
</select>
Because my pages are in hebrew, I am using direction:rtl to the page. As result I get the options displayd incorrect, something like:
IDIGITAL ללא הגבלה R9K) MICROUSIM)
If I change the direction of the whole select to ltr, I get the arrow of the select on the right - which is not good.
Is there any way I can set style only to the options of the select?
I am using IE8 and not firefox.
This cannot be done in CSS, since there is no element to set a rule on—you want part of the option element contents to be treated left-to-right, but you cannot use markup for that part. No markup is allowed inside the option element.
Therefore, the issue needs to be dealt with at the character level, using LEFT-TO-RIGHT MARK and RIGHT-TO-LEFT mark, e.g.
<option value="1">(J9J) AMCKDPR ללא הגבלה IAPPLE</option>
I’m not sure how to apply the idea to the second option element; maybe just this way:
<option value="2">(B0A) MICROSOFT-עם הגבלה</option>
but I cannot judge whether the result looks OK, because I can’t really read Hebrew.
Check out Authoring HTML: Handling Right-to-left Scripts.
Related
I am trying to get a simple select field with two options, let's say ac and bc. Somehow, the sub-fields are ignored inside the option-field. How can I fix it to show "c" as an index? So far I've only tried this in Firefox.
Example:
<select>
<option>a<sub>c</sub></option>
<option>b<sub>c</sub></option>
</select>
The option element can only take text as content. You can however, use any unicode character inside it. Unicode has subscript characters built in. You would have to use the unicode characters for subscript.
You could use it like this:
<select name="" id="">
<option value="a">Hello</option>
<option value="a">hₐ</option>
</select>
Your best bet would probably be to just copy and paste whatever subscript character you need.
I am attempting to build a select box with options that require minor formatting and am running into issues.
an example of what I am looking for in an option text:
title (some content)
title-2nd (other content)
And while I have formatted the text in the option elements to look like the text above all my extra spaces seem to be truncated when it is rendered.
actual html:
<option value="1">1st Option (0, 0, 0) </option>
<option value="5">Default Option (0, 0, 0) </option>
<option value="6">Other (0, 0, 0) </option></select>
Again, when rendered in HTML the spaces are gone and all the text is just aligned left and single spaced.
I know there are javascript replacements for the select, but would like to avoid if possible.
Is there a special char I can use ( didn't work)
Thanks in advance. (Hope this made sense)
EDIT: So there have been a few mentioning using javascript components to replace the select, and I do know how that works but would like to avoid it.
Adding some screen shots to show the difference between what I am seeing in jsFiddle and codepen vs what I am seeing locally
markup
Again, any help would be greatly appreciated
Maybe try instead of
Like this
form fields are notoriously difficult to style, especially elements like <select> and <option>.
MDN - Styling HTML forms
your idea to use a special character can work though. you can tabulate the options yourself using em spaces like so.
EDIT: too new to comment ^__^
did you define your character set in the header of your HTML?
try adding <meta charset="utf-8"> in your header. it's likely included in Codepen and JSFiddle. I'm thinking maybe your browser doesn't know your local copy wants to use Unicode characters.
I noticed that some elements have attributes which are boolean. I wonder why the values are not true or false? or 1 and 0? Are there any reason behind why they are like this?
<option selected="selected">Ham Burger</option>
or
<input type="button" disabled="disabled" />
Thanks in advance!
In SGML, an attribute may be minimized so that its value alone is short for both the name and the value, with the only possible value for the attribute in this case obviously being the attribute's own name. HTML uses this for boolean attributes, where the presence or absence of the attribute is what's meaningful, and its value is irrelevant. But in XML, minimized attributes were disallowed, so we wound up with the awkwardness that is selected="selected" when XHTML came into vogue. If you're writing HTML rather than XHTML, you can just write selected.
The exact definition is:
Some attributes play the role of boolean variables (e.g., the selected
attribute for the OPTION element). Their appearance in the start tag
of an element implies that the value of the attribute is "true". Their
absence implies a value of "false".
Also:
Boolean attributes may legally take a single value: the name of the attribute itself [...] In HTML, boolean attributes may appear in minimized form
Basically, this implies that there are only two possible statuses for boolean attributes, true and false, but there isn't a not set status.
For the disabled attribute I think it's the presence of the attribute that disables the element regardless of its value.
It guess one of the reasons could be to allow more values than just yes/no in the future. For instance, instead of visible=true/false, you can have visibility=visible/hidden/collapsed
the HTML standard (Not the XHTML) is to have simply selected instead of selected="selected"
See here: http://www.w3.org/TR/html4/interact/forms.html#adef-selected
When XHTML was created to allow a a better integration with XML in HTML, (see http://www.w3.org/MarkUp/2004/xhtml-faq#need), the parts that do not fit to the XML-like structure requirements of HTML were corrected. So wordings like selected got transformed into selected="selected" to fit the standard
Readability, a lot of HTML is not coded by people with computer science backgrounds so the concept of "Boolean" would be foreign to them in those terms. Also it improves readability for Computer Science and other technical users by providing reinforced clues as to the function of a given statement.
As vc74 has said, it doesn't matter what value you have for selected or disabled.
<option selected="selected">Ham Burger</option>
will do the same as
<option selected="sjkhdaskj">Ham Burger</option>
i think this is just for ease to user to specify the attribute value in most human readable form if he/she dont know what is true/false
<html>
<body>
<select>
<option>1</option>
<option selected="blah">2</option>
<option >3</option>
</select>
</body>
you see in above code i have not use selected=selected, i used what i want it still select the option value, or you can simply use <option selected>2<option>.
I have some long text in a html select element.
When a user selects one option the text is displayed as long as the select is.
What is a best solution to make this usable and clear ?
Example
<select>
<option>very long text 1</option>
<option>very long text 2</option>
<option>very long text 3</option>
</select>
The user will see something like " very long t " because of the select element length.
Is there a jquery script or some trick to make the entire text visible ?
I usually truncate the display value (using ... suffix) so that it won't mess up the drop down list, then I set the actual long value as option title:-
<select>
<option value="1" title="the brown fox jumped over the fence">the brown fox...</option>
...
</select>
One option is to replace the <select> with a set of radio buttons / labels. You have more options for formatting the text, and it'll be easier to read.
Or, if don't need to have all the text in the select box, you could shorten the text on the options - maybe use javascript to populate another area on the page with a detailed description of the option they just selected.
Edit --
To lengthen the <select> box, you can set its css width with style="width:250px;", or whatever width you need. (Or put the style in a class, obviously)
In a drop down list, I need to add spaces in front of the options in the list. I am trying
<select>
<option> Sample</option>
</select>
for adding two spaces but it displays no spaces. How can I add spaces before option texts?
Isn't   the entity for space?
<select>
<option> option 1</option>
<option> option 2</option>
</select>
Works for me...
EDIT:
Just checked this out, there may be compatibility issues with this in older browsers, but all seems to work fine for me here. Just thought I should let you know as you may want to replace with
Use \xA0 with String.
This Works Perfect while binding C# Model Data to a Dropdown...
SectionsList.ForEach(p => { p.Text = "\xA0\xA0Section: " + p.Text; });
I think you want or
So a fixed version of your example could be...
<select>
<option> Sample</option>
</select>
or
<select>
<option> Sample</option>
</select>
As Rob Cooper pointed out, there are some compatibility issues with older browsers (IE6 will display the actual letters "& nbsp;"
This is how I get around it in ASP.Net (I don't have VS open so I'm not sure what characters this actually gets translated to):
Server.HtmlDecode(" ")
i tried multiple things but the only thing that worked for me was to use javascript. just notice that i'm using the unicode code for space rather than the html entity, as js doenst know a thing about entities
$("#project_product_parent_id option").each(function(i,option){
$option = $(option);
$option.text($option.text().replace(/─/g,'\u00A0\u00A0\u00A0'))
});
You can also press alt+space (on mac) for a non-breaking space. I use it for a Drupal module because Drupal decodes html entities.
I'm nearly certain you can accomplish this with CSS padding, as well. Then you won't be married to the space characters being hard-coded into all of your <option> tags.
#Brian
I'm nearly certain you can accomplish this with CSS padding, as well. Then you won't be married to the space characters being hard-coded into all of your tags.
Good thinking - but unfortunately it doesn't work in (everyone's favourite browser...) IE7 :-(
Here's some code that will work in Firefox (and I assume Op/Saf).
<select>
<option style="padding-left: 0px;">Blah</option>
<option style="padding-left: 5px;">Blah</option>
<option style="padding-left: 10px;">Blah</option>
<option style="padding-left: 0px;">Blah</option>
<option style="padding-left: 5px;">Blah</option>
</select>
Just use char 255 (type Alt+2+5+5 on your numeric keypad) with a monospace font like Courier New.
Can you try that? Or is it the same?
Server.HtmlDecode(" ") is the only one that worked for me.
Otherwise the chr are printed as text.
I tried to add the padding as a Attribute for the listitem, however it didnt affect it.
I was also having the same issue and I was required to fix this as soon as possible. Though I googled a lot, I was not able to find a quick solution.
Instead I used my own solution, though I am not sure if its appropriate one, it works in my case and exactly which I was required to do.
So when you add an ListItem in dropdown and you want to add space then use the following:-
Press ALT and type 0160 on your numeric keypad, so it should be something like ALT+0160. It will add a space.
ListItem("ALT+0160 ALT+0160 TEST", "TESTVAL")
In PHP you can use html_entity_decode:
obj_dat.options[0] = new Option('Menu 1', 'Menu 1');
obj_dat.options[1] = new Option('<?php echo html_entity_decode(' '); ?>Menu 1.1', 'Menu 1.1');
I tried several of these examples, but the only thing that worked was using javascript, much like dabobert's, but not jQuery, just plain old vanilla javascript and spaces:
for(var x = 0; x < dd.options.length; x++)
{
item = dd.options[x];
//if a line that needs indenting
item.text = ' ' + item.text; //indent
}
This is IE only. IE11 in fact. Ugh.
1.Items Return to List
2.Foreach loop in list
3..
foreach (var item in q)
{
StringWriter myWriter = new StringWriter();
myWriter.Lable = HttpUtility.HtmlDecode(item.Label.Replace(" ", " "));
}
This work for me!!!