Often, I come across applications with forms containing optional fields. In the Show view, these fields tend to "collapse" together and lose alignment with their corresponding labels. For instance, if I have 3 fields that should be displayed as:
Phone: 312-555-1212
FAX:
Mobile: 312-555-1234
They end up appearing like this:
Phone: 312-555-1212
FAX: 312-555-1234
Mobile:
To address this issue, I found a workaround by adding non-breaking spaces (%nbsp) just before every closing "dd" tag, but I'm seeking a more efficient solution.
Is there a CSS approach to handling this problem?
Below is my existing Rails/HTML code incorporating the non-breaking spaces. While it works, I am interested in discovering a better alternative.
<dt>FAX:</dt>
<dd><%= number_to_phone(@user.fax, :area_code => true) %> </dd>
<dt>Pager:</dt>
<dd><%= number_to_phone(@user.pager, :area_code => true) %> </dd>
<dt>Mobile:</dt>
<dd><%= number_to_phone(@user.mobile, :area_code => true) %> </dd>
By inserting a non-breaking space right before the closing "dd" tag, I trick the system into preserving the layout integrity even for fields without content, preventing misalignment between labels and values.