How do I adjust for character widths?

Question

I am trying to format the jqueryui autocomplete dropdown menu and currently have a list of states and cities in the dropdown menu, like so:

  Boston Massachusetts
  Seattle Washington
  Atlanta Georgia
  Waco Texas
  Walla Walla Washington

I would like to line them so that the states line up:

  Boston       Massachusetts
  Seattle      Washington
  Atlanta      Georgia
  Waco         Texas
  Walla Walla  Washington

How do I do that? Solely calculating the number of characters in the cities and then adding a "filler" to those cities that have fewer characters doesn't work as it doesn't take into account kerning and different character widths (ie "W" vs. "i").

I've tried monkeypatching, as described here, and tried formatting the dropdown box as a table, with each city and state in their own columns. However, the table elements get no respect from JQuery UI and doesn't change the formatting.

Any suggestions?

function monkeyPatchAutocomplete() {
          $.ui.autocomplete.prototype._renderItem = function( ul, item) {
              var re = new RegExp(this.term, "i");
              var l = item.label.replace(re,"<span style='font-weight:bold;color:#000;'>" + "$&" + "</span>");
              var v = item.value.replace(re,"<span style='font-weight:bold;color:#000;'>" + "$&" + "</span>");
              return $( "<li></li>" )
                  .data( "item.autocomplete", item )
                  .append( "<a>" + v + " " + l + "</a>" )
                  .appendTo( ul );
          };
      }

You could loop through all in a list and get the width if it is larger than previous. Then set the width of all of them to the largest width — jsweazy, Sep 24 '12 at 15:57
but that doesn't take into account different widths of different characters (ie "W" vs. "i"_, though, right? — user_78361084, Sep 24 '12 at 16:00
Have you tried `display: table-cell` and `display: table-row`? — Blazemonger, Sep 24 '12 at 16:07
Did you discarded using a monospace font? so your first method works.. — Nelson, Sep 24 '12 at 16:11
Another idea is to use
with tabs inside. Yea I know an ugly one. — Nelson, Sep 24 '12 at 16:59

Trond Hatlen · Accepted Answer · 2012-09-24T17:32:40.050

I tried the thing with styling as a table and got it to work if I changed the markup a little bit. The ul is the table, lis is table-rows and then instead of having two spans inside an a element we just have two a elements.

<ul> //display: table
    <li> //display: table-row
        <a>City</a> // display: table-cell
        <a>State</a> //display: table-cell
    </li>
</ul>

Maybe you can have the same structure as before if you find some special display value on the original a element, but i tried all combinations of table-row and block on the original li and a elements without success.

Edit: ps Overriding the jquery ui styles can be a bit cumbersome but inspect the elements one by one in chromes developer tools and make sure to write css rules that override all the display values on the autocomplete's ul, li and a elements.

How do I adjust for character widths?

1 Answers1