Метка в cfinput отображается справа от текстового поля

Question

При работе с Coldfusion 9 и cfform с форматом HTML я помещаю cfinput на страницу с меткой, она отображает метку справа от текстового поля. Я пытался использовать тег с и без него, но независимо от того, что я делаю, ярлык всегда находится справа от поля.

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

Никогда не помню, чтобы у вас была эта проблема до недавнего времени Я бы просто использовал форму HTML, но хотел бы воспользоваться autosuggest cf.

Answer 1

Мне неприятно это говорить, но, откровенно говоря, такие причуды заставляют многих людей отказаться от встроенных функций ajax и напрямую использовать базовые библиотеки (или некоторую альтернативу jQuery). У вас будет больший контроль, больше возможностей, не говоря уже о том, что вы не будете привязаны к какой-либо версии, поставляемой с ColdFusion. Большинство этих библиотек часто обновляются, поэтому в течение года библиотеки, поставляемые с CF, часто устаревают. ExtJS - хороший пример. Публичная версия уже до версии 4.2.1, но CF9 по-прежнему использует 3.1.0.

В любом случае, возвращаясь к вашему вопросу... если вы сделаете просмотр источника, вы увидите, что CF генерирует несколько div теги, один из которых содержит style="float:left" директива, которая может объяснить поведение, которое вы видите.

Я сделал быстрый поиск и наткнулся на заметку в документах CF8, в которой предлагается взломать поля дат, которые также могут применяться здесь:

• Чтобы правильно отобразить текст метки рядом с элементом управления в Internet Explorer и Firefox, необходимо поместить текст метки в <div style="float:left;"> пометить и поставить три <br> теги между каждой строкой.

Мне кажется, что простое добавление div сработает с примером, который вы разместили:

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

Но опять же, вы можете рассмотреть возможность использования библиотек javascript напрямую, а не полагаться на встроенные функции ajax, поэтому вы можете избежать таких странностей.