Etichetta cfinput visualizza alla destra della casella di testo

Question

Quando si lavora con Coldfusion 9 e cfform con un formato HTML, ho posto un cfinput su una pagina con un'etichetta, si visualizza l'etichetta alla destra della casella di testo. Ho provato a usare il tag, con e senza, ma non importa quello che faccio, l'etichetta è sempre a destra della scatola.

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

Non ricordo mai di aver avuto questo problema prima di recente. Vorrei solo utilizzare un modulo HTML, ma voglio approfittare di autosuggest di cf.

Answer 1

Odio dirlo, ma sinceramente bizzarri come questo sono il motivo per cui molte persone suggeriscono di abbandonare le funzionalità ajax integrate e di usare direttamente le librerie sottostanti (o qualche alternativa di jQuery). Avrai un controllo maggiore, più scelte, per non parlare del fatto che non sarai legato a nessuna versione fornita con ColdFusion. La maggior parte di queste librerie viene aggiornata frequentemente, quindi entro un anno quelle in bundle con CF sono spesso obsolete. ExtJS è un buon esempio. La versione pubblica è già alla versione 4.2.1, ma CF9 utilizza ancora 3.1.0.

Comunque, tornando alla tua domanda ... se fate una fonte di vista si vedrà CF genera diversi div tag, uno dei quali contiene la direttiva style="float:left", il che potrebbe spiegare il comportamento che state vedendo.

Ho fatto una ricerca rapida e capitata una nota nella the CF8 docs che suggeriscono un hack per il datefields che possono essere applicate anche qui:

• per visualizzare correttamente il testo dell'etichetta accanto al controllo sia in Internet Explorer e Firefox, è necessario circondare il testo dell'etichetta in un tag <div style="float:left;"> e inserire tre tag <br> tra ciascuna riga .

semplicemente aggiungendo la div sembra funzionare per me con il campione che hai postato:

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

Ma ancora una volta, si potrebbe prendere in considerazione utilizzando le librerie javascript direttamente, invece di basarsi sulla incorporato in ajax, così puoi evitare stranezze come questa.