How to do tabulator in HTML dropdown to format text

Question

I have a dropdown menu in my HTML-Code, which is filled with a PHP while-loop. For example:

<select name="dd1" class="form-control" id="dd1">
   <option value="" disabled="disabled" selected>Select...</option>
   <?php 
     while($row = mysqli_fetch_array($sql, MYSQL_ASSOC)){
   ?>
   <option value="<?php echo $row['ID'] ?>"> <?php echo $row['PName'] .  "\t | " . $row['AName'] ?> </option>
   <?php 
     } 
   ?>    
</select>

I want to do a tabulator between the Name1 | Name2. I tried this with \t, but it has been ignored. Anyone an idea what I can do?

If I do it with & emsp; it looks like this:

I want that all of the second Names, that means starting by |, have the same postion.

Possible duplicate of [How to get a tab character?](https://stackoverflow.com/questions/9660987/how-to-get-a-tab-character) — Joe Black, Jun 20 '17 at 07:34

score 1 · Answer 1 · answered Jun 20 '17 at 07:33

1

You can Use &emsp; instead of \t then see your output

<select name="dd1" class="form-control" id="dd1">
   <option value="" disabled="disabled" selected>Select...</option>
   <?php 
     while($row = mysqli_fetch_array($sql, MYSQL_ASSOC)){
   ?>
   <option value="<?php echo $row['ID'] ?>"> <?php echo $row['PName'] .  "&emsp; | " . $row['AName'] ?> </option>
   <?php 
     } 
   ?>    
</select>

answered Jun 20 '17 at 07:33

B. Desai

16,414
5
26
47

but they are not all the same length, so they get diffrent potisions of the names I edit my post, so you can see what I mean – Alex Jun 20 '17 at 07:42

Joe Black · Accepted Answer · 2017-06-24T14:49:37.850

You may use sprintf to pad your strings with spaces and then replace spaces with   (provided that you use a monospace font):

<select name="dd1" class="form-control" id="dd1">
    <option value="" disabled="disabled" selected>Select...</option>
    <?php
    $widthLeft = 30; // width in symbols
    $widthRight = 30; // width in symbols
    $separator = '|';

    while ($row = mysqli_fetch_array($sql, MYSQL_ASSOC)) {
        $optionFormatted = sprintf("%-{$widthLeft}s{$separator}%-{$widthRight}s", $row['PName'], $row['AName']);
        $optionHtml = str_replace(' ', '&nbsp;', $optionFormatted);
        ?>
        <option value="<?php echo $row['ID'] ?>"> <?php echo $optionHtml ?> </option>
        <?php
    }
    ?>    
</select>

More solutions:

Update:

For multibyte strings you may use the following function:

<?php
function mb_strpad(string $input, int $pad_length, string $pad_string = ' ', int $pad_type = STR_PAD_RIGHT, string $encoding = 'UTF-8'): string
{
    $diff = $pad_length - mb_strlen($input, $encoding);

    if ($diff <= 0) {
        return $input;
    }

    $pad = str_pad('', $diff, $pad_string);

    if ($pad_type === STR_PAD_LEFT) {
        return $pad . $input;
    }

    return $input . $pad;
}

So that your code will look like this:

<select name="dd1" class="form-control" id="dd1">
    <option value="" disabled="disabled" selected>Select...</option>
    <?php
    $widthLeft = 30; // width in symbols
    $widthRight = 30; // width in symbols
    $separator = '|';

    while ($row = mysqli_fetch_array($sql, MYSQL_ASSOC)) {
        $optionFormatted = mb_strpad($row['PName'], $widthLeft)
                . $separator
                . mb_strpad($row['AName'], $widthRight);
        $optionHtml = str_replace(' ', '&nbsp;', $optionFormatted);
        ?>
        <option value="<?php echo $row['ID'] ?>"> <?php echo $optionHtml ?> </option>
        <?php
    }
    ?>
</select>

thank you that works partially. if there are umlaute like ä ü ö or ß its not correct anymore — Alex, Jun 24 '17 at 09:25
@Alex Please, check the update to my answer, concerning the multibyte strings. — Joe Black, Jun 24 '17 at 14:47

How to do tabulator in HTML dropdown to format text

2 Answers2