The label in cfinput is displayed to the right of the text field

Question

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

<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> 

Never think of this problem until recently. I would just use an HTML form, but want to use cf autosuggest.

Answer 1

I'm sorry to say this, but frankly quirks, which is why many people suggest cutting out the built-in ajax functions and directly using the base libraries (or some jQuery alternatives). You will have more control, more options, not to mention that you will not be tied to any version with ColdFusion. Most of these libraries are often updated, so CF-related ones often become obsolete within a year. ExtJS is a good example. The public version is already up to version 4.2.1, but CF9 still uses 3.1.0.

Anyway, returning to your question ... if you make a view source, you will see that CF generates several div tags, one of which contains the style="float:left" directive, which can explain the behavior you see.

I did a quick search and there was a note in CF8 docs that suggest hacking date fields, which can also apply here:

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

Just adding that the div works for me with the sample you selected:

 <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 may want to use javascript libraries directly, rather than relying on the built-in ajax functions, so you can avoid such oddities as this.