Hint text

[Jennifer]

Why is the width of the "formCell" table set to the same width as the text input inside it, even if there is hint text present? There is no room left for the hint text, so it gets all squished up with line breaks (see attachment).

Here's the output HTML as seen in Firebug:

<table cellspacing="0" cellpadding="0" border="0" class="formCell"
    style="border: 0px none ; margin: 0px; padding: 0px; background-image: none; 
        background-color: transparent; white-space: normal; [b]width: 146px[/b];" id="isc_7E">
  <tbody>
    <tr>
      <td valign="middle" style="white-space: nowrap;">
        <input type="text" tabindex="3370" style="[b]width: 146px[/b]; height: 20px; -moz-user-focus: normal;" 
          class="textItem" autocomplete="OFF" oninput="isc_TextItem_84.$43g()" spellcheck="true" $9a="$9b" $89="isc_TextItem_84" handlenativeevents="false" id="isc_7C" name="isc_OID_72"/>
      </td>
      <td class="formHint" id="isc_7F">Here is some hint text</td>
    </tr>
  </tbody>
</table>

[Isomorphic]

Have you read the FormLayout overview in the docs package? A different combination of settings should leave room for the hint.

[Jennifer]

Yep, I read it. The thing is, there's plenty of room in the containing table cell for both the input and the hint, but that fixed-width "formCell" table isn't giving the hint text enough room, and I don't see anything that gives me any control over that. If I set the width of the TextItem to "*" or some larger pixel amount, it just makes the input field longer - there's no additional space for the hint text.

[davidj6]

Suggest you post a small test example that can be run in feature explorer or the developer console. Maybe just take and modify the Hints example so that it fails.

[Jennifer]

Well, it's easy. You just use any hint text that has spaces in it.

TextItem testText = new TextItem();
testText.setTitle("Text field");
testText.setHint("Here is some hint text");

[Jennifer]

Eh, I see the showcase examples surround multi-word hint text with nobr tags. I achieved the same thing with CSS (white-space: nowrap) but I thought it was hacky so I figured I'd ask here why the table has that fixed width which makes it necessary. If you remove the width in the table style attribute you don't need to tell it not to wrap.

[Isomorphic]

We've put down a note to take a look at this. Complete code (including the form) would help, as the problem could be that the *overall* form size or configured column widths is what's dictating a minimal size for the form cell.

[Jennifer]

I believe you will see it in your showcase example ("Various Controls"), if you remove the nobr tags in the hint text. For example:

DynamicForm form = new DynamicForm();  

TextItem textItem = new TextItem();  
textItem.setTitle("Text");  
textItem.setHint("A plain text field");

form.setFields(textItem);  

form.draw();

There is plenty of room in the column and form to show the hint text.

Thanks for your time.

[kevboy]

Any resolution to this problem? I'm getting the same with similar code to the posted example. I'm working around it by using <nobr> tags but as Jennifer put it, it feels kind of "hacky". Thanks!

[IGx89]

Any more elegant solutions for this deficiency now?

[cjustice]

I just hit this problem too. Isomorphic, any news on when this will be fixed on the 3.1 or 4.0 versions?

Thanks!
Chris

[Isomorphic]

As far as Jennifer's code sample above, the problem is that the form has not been given a width, so it has its default width, which is 100.

Give the form enough room to display the hint and it will not wrap.

Typically this happens with no effort by just putting the form in a Layout, where it will fill the breadth of the layout by default. In this case the hint will wrap when it needs to, and as much as it needs to - full wrapping (every word on it's own line) won't occur until the user has arranged the screen so that the form is completely out of horizontal room.