“To be, or not to be: that is the question:”-William Shakespeare
Width is very important element in application design. If not used wisely it can break entire screen design. Few days back i was working on fixing few bugs in one of application. QA team reported that they were not able to see a table (which was created using GridView of .net) was not displaying data properly. Here is an example of it.
| Hi, my wife tried to use a credit card online by inserting it into the floppy port of our pc. I have tried to fish it out but looks like it will have to come apart to retrieve the card. Is that a easy task to do? | |
| What would be your immediate reaction to spilling a beverage on your laptop? |
Here is HTML code for this
<table cellspacing="0" cellpadding="5" border="1">
<tr>
<td>
Hi, my wife tried to use a credit card online by inserting it into the
floppy port of our pc. I have tried to fish it out but looks like it will
have to come apart to retrieve the card. Is that a easy task to do?
</td>
<td width="40%">
<select style="width: 100%">
<option>I would call GeekSquad for help.</option>
<option>I would search on web for answers.</option>
<option>I would google for an action.</option>
</select>
</td>
</tr>
<tr>
<td>
What would be your immediate reaction to spilling a beverage on
your laptop?
</td>
<td>
<select style="width: 100%">
<option>I would turn it off immediately.</option>
<option>I would cream for help.</option>
<option>I would google for an action.</option>
</select>
</td>
</tr>
</table>
This looks OK enough, right? It has 60-40 split, all text comes properly. That's what we thought initially too. When QA team reported that they were not able to see this page properly I was surprised, I requested for screenshot and they send me this.
| How to Buy Inexpensive Quality Computers and Electronics? | |
| How to Choose a Computer? |
Instead of using long question text they has short questions and long responses like in above example. As they reported text in dropdown, After reviewing code I found that code for creating dropdown <select style="width"100%"> was root of problem I changed it to <select> and ... see the result.
| How to Buy Inexpensive Quality Computers and Electronics? | |
| How to Choose a Computer? |
As you can see here by removing style="width:100%" dropdown expanded to accommodate text and user can see entire text in dropdown.
Here is another example, in this example I needed to display some text, this text can be few words, short statements or many words and long statements as this was free form text entered by user. UI specification was if it is short text it should come into center, if there are more then one line then all lines should be left aligned and come into center of screen, as line becomes wide it shold automatically change it's position to be in center till line can not fit in same row at that time it should fall into next row. Here are few examples of this.
Example: 1
|
Example: 2
|
As you can see here in both of above examples text gets adjusted automatically according to width.
Here is code for it.
<table width="100%">
<tr>
<td align="center">
<table>
<tr>
<td align="left">
To create this table you should follow these steps.
<br />
1) open ms-word. 2 ) select insert -> table.
3) select number of rows and columns you need, even after
creating table if you can change this selection if you need.
4) use that table
</td>
</tr>
</table>
</td>
</tr>
</table>
The trick here is not to define width for inner table. By not defining width for inner table it will expand to accommodate longest text and will automatically come to next row if text is more then one row and align="center" on outer <td> will keep inner table into center all the time.
"Using width can be very tricky and can produce unexpected results some time, specially if input is controlled by user, in this kind of situations use minimum width and maximum width as text input to avoid any 'surprises' "
Posts
