formularios - select en html
¿Cómo coloco un carácter de espacio antes del texto de opción en un elemento de selección HTML? (13)
En una lista desplegable, necesito agregar espacios en frente de las opciones en la lista. estoy intentando
<select>
<option>  Sample</option>
</select>
para agregar dos espacios pero no muestra espacios. ¿Cómo puedo agregar espacios antes de textos de opción?
@Brian
Estoy casi seguro de que puedes lograr esto con el relleno de CSS, también. Entonces no estarás casado con los caracteres espaciales que están codificados en todas tus etiquetas.
Buen pensamiento, pero desafortunadamente no funciona en (el navegador favorito de todos ...) IE7 :-(
Aquí hay un código que funcionará en Firefox (y supongo que 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>
Creo que quieres
o  
Entonces, una versión fija de tu ejemplo podría ser ...
<select>
<option> Sample</option>
</select>
o
<select>
<option>  Sample</option>
</select>
Estoy casi seguro de que puedes lograr esto con el relleno de CSS, también. Entonces no estarás casado con los caracteres espaciales que están codificados en todas tus etiquetas <option>
.
Como señaló Rob Cooper, existen algunos problemas de compatibilidad con los navegadores más antiguos (IE6 mostrará las letras reales "& nbsp;"
Así es como lo soluciono en ASP.Net (no tengo VS abierto, así que no estoy seguro de a qué caracteres se lo traduce realmente):
Server.HtmlDecode(" ")
También puede presionar alt + espacio (en mac) para un espacio sin interrupciones. Lo uso para un módulo Drupal porque Drupal decodifica entidades html.
Server.HtmlDecode(" ")
es el único que funcionó para mí.
De lo contrario, los chr se imprimen como texto.
Traté de agregar el relleno como un atributo para el elemento de lista, sin embargo, no lo afectó.
¿Puedes intentar eso? ¿O es lo mismo?
Use / xA0 con String. Esto funciona perfectamente al unir los datos del modelo C # a un menú desplegable ...
SectionsList.ForEach(p => { p.Text = "/xA0/xA0Section: " + p.Text; });
Intenté varias cosas, pero lo único que funcionó para mí fue usar javascript. Solo note que estoy usando el código Unicode para espacio en lugar de la entidad html, ya que js doenst sabe algo acerca de las entidades
$("#project_product_parent_id option").each(function(i,option){
$option = $(option);
$option.text($option.text().replace(/─/g,''/u00A0/u00A0/u00A0''))
});
¿No es  
la entidad para el espacio?
<select>
<option> option 1</option>
<option> option 2</option>
</select>
Funciona para mi...
EDITAR:
Acabo de comprobar esto, puede haber problemas de compatibilidad con esto en navegadores más antiguos, pero todo parece funcionar bien aquí. Solo pensé que debería avisarte, ya que es posible que quieras reemplazarlo con
Simplemente use char 255 (escriba Alt + 2 + 5 + 5 en su teclado numérico) con una fuente monoespaciada como Courier New
.
También estaba teniendo el mismo problema y me pidieron que lo solucionara lo antes posible. Aunque busqué en Google, no pude encontrar una solución rápida.
En su lugar, utilicé mi propia solución, aunque no estoy seguro si es la adecuada, funciona en mi caso y exactamente lo que se me pidió que hiciera.
Por lo tanto, cuando agrega un elemento ListItem en el menú desplegable y desea agregar espacio, use lo siguiente:
Presione ALT y escriba 0160
en su teclado numérico, por lo que debería ser algo así como ALT+0160
. Agregará un espacio.
ListItem("ALT+0160 ALT+0160 TEST", "TESTVAL")
Probé varios de estos ejemplos, pero lo único que funcionó fue usar javascript, al igual que el de dabobert, pero no jQuery, simplemente los viejos javascript y espacios de vainilla:
for(var x = 0; x < dd.options.length; x++)
{
item = dd.options[x];
//if a line that needs indenting
item.text = '' '' + item.text; //indent
}
Esto es solo IE. IE11 de hecho. Ugh.