Personal I have a select that shows
CODE | TITLE | DESCRIPTION | UF
0001 | TESTE1 | NEW ITEM 1 | SP
0002 | TESTE2 | NEW ITEM ADD 2 | SC
How to customize a Select in columns?
4
asked by anonymous 01.05.2016 / 23:35
1 answer
3
You have to use various tools, and even with a commitment to font .
First you have to have a font that has the same width for all letters, otherwise it will be impossible to make these columns hit right.
Second (and if you do not do this when you generate these strings) you have to compare all the lines, break into pieces and know the maximum width you need. Then you have to add spaces to those that are too short.
An example would look like this:
function gerarEspaco(qtd) {
var str = '';
for (var i = 0; i < qtd; i++) str += ' '
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: link
02.05.2016 / 00:00