skip to Main Content

I am trying to evenly space multiple strings in a every option element in a select dropdown to create the appearance that each string is displayed like a column in each option. This is what I am trying to accomplish (shown is a WPF select):

goal

You can see text on the left and a number value on the far right no matter the length of the text on the left.

Mine looks like the following:

current

Mine doesn’t need the number on the far right, I just want each option to have space between the two properties as if they were in columns. Because there is little available in terms of styling HTML select options, my idea was to count the length of the left string and insert a number of spaces based of that length to try and evenly space the left string and right decimal.

My option element Razor code looks like the following:

@foreach (var component in components)
{
    <option>
        @component.Description
        @for (int i = 0; i < (12 - component.Description.Length); i++)
        {
            <p>&nbsp;</p>
        }
        @component.DecimalValue
    </option>
}

From what I understand, this doesn’t work because letters have varying widths and the number of spaces inserted doesn’t account for that.

Is there an algorithm for inserting spaces based on length and width of letters or an alternate way to evenly space these two properties in an option element like using CSS?

2

Answers


  1. Chosen as BEST ANSWER

    My current solution is using a custom dropdown component instead of a select component. Using the answer from here seems to work pretty well. Still open to any suggestions that relate to the idea of inserting spaces based on length of a string.


  2. Have you tried a formattable string?

    $"@{component.Description}      {@component.DecimalValue}"
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search