4

Pessoal tenho um select que mostra

CODIGO | TITULO | DESCRICAO | UF

0001 | TESTE1 | NEW ITEM 1 | SP

0002 | TESTE2 | NEW ITEM ADD 2 | SC

Veja que a coluna fica desconfigurada, eu gostaria de alinhar isso com css, só consegui se usar fonte fixa (tipo courrier), mas aí destona da página.

Sei que existe como fazer em DIV, mas queria saber antes se tem como fazer com CSS no Select mesmo.

Procurei na web, mas só achei como estilizar cores e afins, mas não o texto em colunas.

2
  • 1
    Queres que as linhas de cada option tenham essas colunas e que estejam alinhadas na vertical, é isso?
    – Sergio
    Commented 1/05/2016 às 21:38
  • Sim, quero alinhar os textos em forma de colunas, quando eu trazer o texto que vem de uma tabela já vou deixar todos com o mesmo numero de caracteres condizente a cada coluna. Seria como colocar uma table dentro de um select
    – user37466
    Commented 1/05/2016 às 21:41

1 Resposta 1

3

Tens de usar várias ferramentas, e mesmo assim com compromisso com a font.

Em primeiro lugar tens de ter uma fonte que tenha a mesma largura para todas as letras, senão vai ser impossivel de fazer essas colunas baterem certo.

Em segundo lugar (e caso não faças isso quando geras essas strings) tens de comparar todas as linhas, partir em pedaços e saber qual a largura máxima que precisas. Depois tens de acrescentar espaços aos que são curtos demais.

Um exemplo seria assim:

function gerarEspaco(qtd) {
    var str = '';
    for (var i = 0; i < qtd; i++) str += '&nbsp;'
    return str;
}

var options = [].slice.call(document.querySelectorAll('option'));
var partes = options.map(function(option) {
    return option.innerHTML.split(' | ');
});
var maximos = options[0].innerHTML.split(' | ').map(function(str, i) {
    var max = 0;
    partes.forEach(function(parte) {
        if (parte[i].length > max) max = parte[i].length;
    })
    return max;
});


options.forEach(function(option, i) {
    var html = partes[i].map(function(parte, j) {
        var emFalta = maximos[j] - parte.length;
        var novosEspacos = gerarEspaco(emFalta)
        return parte + novosEspacos;
    }).join(' | ');
    option.innerHTML = html;
});
console.log(maximos); // [6, 6, 14, 2]
option {
	font-family: monospace;
}
<select name="" id="">
    <option value="">CODIGO | TITULO | DESCRICAO | UF</option>
    <option value="">0001 | TESTE1 | NEW ITEM 1 | SP</option>
    <option value="">0002 | TESTE2 | NEW ITEM ADD 2 | SC</option>
</select>

jsFiddle: https://jsfiddle.net/nsjhce28/

2
  • Hum... esse método eu já uso... eu já trago o tamanho de cada coluna fixo de uma result php, e já uso fonte monospace, mas queria saber se existe uma forma mais elegante, pelo que vejo vou ter que partir para div com scroll
    – user37466
    Commented 1/05/2016 às 22:05
  • @Marcelo pois, nesse caso é mesmo com custom select. Pensei que não tinhas os espaços normalizados pelo HTML que colocaste na pergunta.
    – Sergio
    Commented 1/05/2016 às 22:06

Você deve fazer log-in para responder a esta pergunta.