CODEWITHSUNDEEP
htmlcssselection
Nate
Nate

Reputation: 28354

Aligning part of a select option's text on the left and part on the right?

I have a select box and I need to have some of the options' text aligned to the left with the rest to the right, like this:

| option 1      0.5 |
| option 2      1.5 |

Is that possible? I thought about putting div's in the option, but in searching to see if that's allowed I ran across several places that said it wasn't.

Thanks for your help.

Upvotes: 6

Views: 5360

Answers (4)

Кирилл Гетте
Кирилл Гетте

Reputation: 1

text-align-last: left; works !!!

<form>
    <select class="custom-select">
        <option value="Yandexmap">Яндекс карты</option>
        <option value="app_store">App Store</option>
        <option value="google_play">Google Play</option>
        <option value="thor-tuning.com">thor-tuning.com</option>
    </select>
</form>

Upvotes: 0

S. Rieger
S. Rieger

Reputation: 41

At the moment I am continuing to work with a workaround in which suitable spaces are inserted.

select option {
     font-family: monospace;
 }
<select>
  <option>TEXT ONE&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.02</option>
  <option>LONG TEXT&nbsp;&nbsp;&nbsp;&nbsp;1.00</option>
  <option>TEXT&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;100.00</option>
</select>

I usually solve that with some JavaScript code.

max_chars_col_1 = Math.max('TEXT ONE'.length, 'LONG TEXT'.length, ...);

option.innerHTML = 'TEXT ONE' + '&#160'.repeat( max_chars_col_1 - 'TEXT ONE'.length + max_chars_col_2 - '0.02'.length + 1 ;

Upvotes: 1

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201538

The option element content is taken as plain text (no tags are recognized), so there is no direct way to do it. As a clumsy workaround, you can hand-format the options using a monospace font and use no-break spaces:

    <style>
    select, option { font-family: Consolas,  monospace; }
    </style>
    <select>
    <option>option 1          0.5
    <option>option 2          1.5
    <option>one more option 110.5
    </select>

(where the spaces inside the option elements are no-break spaces; use &nbsp; for them if you don’t know how to type no-break spaces in your authoring environment).

A completely different workaround, or approach, is the replace the select element by a set of checkboxes (or, depending on desired logic, radio buttons) and associated labels. You can then represent this data in a table and set suitable formatting on it:

    <table>
    <tr><td><input type=checkbox> <td>option 1 <td align=right>0.5
    <tr><td><input type=checkbox> <td>option 2<td align=right>1.5
    <tr><td><input type=checkbox> <td>one more option <td align=right>110.5
    </table>

Upvotes: 5

Yarneo
Yarneo

Reputation: 3000

Its kind of a problem as you cant put a div inside a select tag like you stated. The only option inside a select tag is and you can read about it more here: optgroup

Although that won't help you much as you are trying to edit inside an option tag itself. I would suggest that you would try to sort it out using spaces in collaboration with the select box size so to make it fit your preferred alignment

Upvotes: 1

Related Questions