Das Label in cfinput wird rechts neben dem Textfeld angezeigt

Question

Wenn ich mit Coldfusion 9 und cfform mit einem HTML-Format arbeite, lege ich einen cfinput auf eine Seite mit einem Label, es zeigt die Beschriftung rechts neben dem Textfeld an. Ich habe versucht, das Tag zu verwenden, mit und ohne es, aber egal was ich tue, ist das Etikett immer auf der rechten Seite der 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> 

Erinnern Sie sich nie daran, dieses Problem vor kurzem zu haben. Ich würde einfach ein HTML-Formular verwenden, möchte aber die Auto-Sugges von cf nutzen.

Answer 1

Ich hasse es zu sagen, aber offen gesagt, Macken wie diese sind, warum viele Leute vorschlagen, die eingebauten Ajax-Funktionen und die zugrunde liegenden Bibliotheken (oder einige jQuery-Alternative) direkt ditching. Sie haben mehr Kontrolle, mehr Auswahlmöglichkeiten, ganz zu schweigen davon, dass Sie nicht an die Version gebunden sind, die mit ColdFusion ausgeliefert wird. Die meisten dieser Bibliotheken werden häufig aktualisiert, so dass innerhalb eines Jahres die mit CF gebündelten häufig veraltet sind. ExtJS ist ein gutes Beispiel. Die öffentliche Version ist bereits bis Version 4.2.1, aber CF9 verwendet immer noch 3.1.0.

Wie auch immer, zurück zu Ihrer Frage ... wenn Sie eine Ansicht Quelle sehen Sie sehen CF generiert mehrere div Tags, von denen eine enthält die style="float:left" Direktive, die das Verhalten, das Sie sehen, erklären könnte.

Ich habe eine schnelle Suche und zufällig auf einer Notiz in der the CF8 docs, die einen Hack für datefields vorschlagen, die auch hier anwenden können:

• richtig neben der Steuerung sowohl in Internet Explorer Beschriftungstext anzuzeigen und Firefox, müssen Sie den Etikettentext in einem <div style="float:left;"> Tag umgeben und drei <br> Tags zwischen jede Zeile setzen.

einfach das div Zugabe scheint mit der Probe für mich arbeiten Sie auf dem Laufenden:

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

Aber noch einmal, möchten Sie vielleicht direkt betrachten, anstatt auf dem eingebauten zu verlassen, mit Hilfe der Javascript-Bibliotheken in Ajax Features, so können Sie Seltsamkeit wie diese vermeiden.