Label in cfinput is displaying to the right of the text box

Question

When working with Coldfusion 9 and cfform with a HTML format, I place a cfinput on a page with a label, it displays the label to the right of the text box. I have tried using the tag, with and without it but no matter what I do, the label is always to the right of the box.

<cfform method="post" name="mfForm" >
  <label for="campaign">Mailfile ID:</label>
  <cfinput type="text" name="campaign" id="campaign">
  <cfinput type="submit" name="submit" value="Submit" id="submit">
</cfform>

Don't ever remember having this problem before recently. I would just use an HTML form, but want to take advantage of cf's autosuggest.

Answer 1

I hate to say it, but frankly quirks like this are why many people suggest ditching the built-in ajax features and using the underlying libraries (or some jQuery alternative) directly. You will have greater control, more choices, not to mention you will not be tied to whatever version ships with ColdFusion. Most of these libraries are updated frequently, so within a year the ones bundled with CF are often out of date. ExtJS is a good example. The public version is already up to version 4.2.1, but CF9 still uses 3.1.0.

Anyway, getting back to your question ... if you do a view source you will see CF generates several div tags, one of which contains the style="float:left" directive, which could explain the behavior you are seeing.

I did a quick search and happened upon a note in the the CF8 docs which suggest a hack for datefields which may also apply here:

• To correctly display label text next to the control in both Internet Explorer and Firefox, you must surround the label text in a <div style="float:left;"> tag and put three <br> tags between each line.

Simply adding the div seems to work for me with the sample you posted:

<cfform method="post" name="mfForm" >
    <div style="float:left;">
        <label for="campaign">Mailfile ID:</label>
    </div>
    <cfinput type="text" name="campaign" id="campaign" autosuggest="AA,BBB,CCC,DDD">
    <cfinput type="submit" name="submit" value="Submit" id="submit">
</cfform>

But again, you might want to consider using the javascript libraries directly instead of relying on the built-in ajax features, so you can avoid weirdness like this.