How to keep Fix width in between two or more li in select option Dropdown?

Question

<select class="form-control selectpicker" data-live-search="true" id="dynamic-select" >
    <option value=""  style="bold"> </option>
    <option value=""  style="bold">Code&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Name </option>
    <?php
            include "config.php";
            echo $sup_code="select * from supplier where status='active' order BY su_code ASC";
            $sel_sup_code = mysql_query($sup_code) or die(mysql_error());
            while($row_sup_code=mysql_fetch_array($sel_sup_code))
            {
            ?>
               <option value="supplier.php?selectedid=<?php echo $row_sup_code['id']; ?>" >
               <li>&nbsp;&nbsp; <?php echo $row_sup_code['su_code']; ?> </li>&nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;<li> <?php echo $row_sup_code['su_name'] ?> </li> 
               </option>
            <?php
            }
           ?>
</select>

Please refer http://stackoverflow.com/questions/13931571/how-can-change-width-of-dropdown-list — Anish Chandran, Jun 11 '16 at 06:20
i want all option in one line and in fixed width like as code...some space...name...some space...City....like 01 Diamond New York or if this is not possible then tell me how i drae a table in dropdown using mysql data — Ankur Sheth, Jun 11 '16 at 06:33

Aziz · Answer 1 · 2016-06-11T08:14:02.023

The option tag is not allowed to have any children, you can either just play around with fake spaces (&nbsp) or replace select with a div then submit data through javascript.

Example of spaces:

<select class="form-control selectpicker" data-live-search="true" id="dynamic-select">
  <option value=""> </option>
  <option value="" style="font-weight: bold">Code &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Name</option>
  <option value="123">&nbsp;&nbsp; 123 &nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;Lorem Ipsum</option>
  <option value="345">&nbsp;&nbsp; 345 &nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;Lorem Ipsum</option>
  <option value="6789">&nbsp;&nbsp; 6789 &nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;Lorem Ipsum</option>
  <option value="10">&nbsp;&nbsp; 10 &nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;Lorem Ipsum</option>
</select>

As you see, code with varying length causes inconsistencies, therefore you must modify number of spaces based on length, for example:

0 space before 4 characters code

1 space before 3 characters code

2 spaces before 2 characters code

3 spaces before 1 character code
Code - Name
   1 - 1 character
  22 - 2 characters
 333 - 3 characters
4444 - 4 characters

The result will look like this:

<select class="form-control selectpicker" data-live-search="true" id="dynamic-select" style="font-family:monospace;">
  <option value=""> </option>
  <option value="" style="font-weight: bold">Code &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Name</option>
  <option value="123">&nbsp;123 &nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;Lorem Ipsum</option>
  <option value="345">&nbsp;345 &nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;Lorem Ipsum</option>
  <option value="6789">6789 &nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;Lorem Ipsum</option>
  <option value="10">&nbsp;&nbsp;10 &nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;Lorem Ipsum</option>
</select>

Please note that to ensure exact spacing, use a monospace font for the select (I added style="font-family:monospace;".

To conclude, make your PHP code check for length of product code and then add dynamic space based on that, e.g: ( if length = 4, space = 0 ) etc...

P.S: style="bold" should be style="font-weight: bold;".

Thank you For your Answer Mr. Aziz but i have little Confusion..can you say me or give me a code for how can i check the length of name and put it from that script automatically because user have no fixed name..some may be 5 character or some may be 40...i hope you Understand my confusion for this dropdown — Ankur Sheth, Jun 11 '16 at 09:08

How to keep Fix width in between two or more li in select option Dropdown?

1 Answers1