Nhãn trong cfinput hiển thị ở bên phải của hộp văn bản

Question

Khi làm việc với Coldfusion 9 và cfform với định dạng HTML, tôi đặt cfinput trên trang có nhãn, nó hiển thị nhãn ở bên phải của hộp văn bản. Tôi đã thử sử dụng thẻ, có và không có nó nhưng không có vấn đề gì tôi làm, nhãn luôn ở bên phải của hộp.

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

Đừng bao giờ nhớ có vấn đề này trước đây. Tôi sẽ chỉ sử dụng một dạng HTML, nhưng muốn tận dụng ưu thế tự động của cf.

Answer 1

Tôi ghét phải nói điều đó, nhưng thẳng thắn như thế này là lý do tại sao nhiều người đề nghị bỏ các tính năng ajax được xây dựng trong và sử dụng các thư viện cơ bản (hoặc một số thay thế jQuery) trực tiếp. Bạn sẽ có quyền kiểm soát tốt hơn, nhiều sự lựa chọn hơn, chưa kể bạn sẽ không bị ràng buộc với bất kỳ phiên bản nào đi kèm với ColdFusion. Hầu hết các thư viện này được cập nhật thường xuyên, vì vậy trong vòng một năm, các thư viện được đóng gói với CF thường lỗi thời. ExtJS là một ví dụ điển hình. Phiên bản công khai đã lên tới phiên bản 4.2.1, nhưng CF9 vẫn sử dụng phiên bản 3.1.0.

Dù sao, quay trở lại câu hỏi của bạn ... nếu bạn làm một nguồn xem, bạn sẽ thấy CF tạo một số thẻ div, một trong số đó chứa chỉ thị style="float:left", có thể giải thích hành vi bạn đang thấy.

Tôi đã làm một tìm kiếm nhanh và xảy ra khi một lưu ý trong the CF8 docs trong đó đề xuất một hack cho datefields mà cũng có thể áp dụng ở đây:

• Để hiển thị một cách chính xác văn bản nhãn bên cạnh việc kiểm soát ở cả hai trình duyệt Internet Explorer và Firefox, bạn phải bao quanh văn bản nhãn trong một thẻ <div style="float:left;"> và đặt ba thẻ <br> giữa mỗi dòng .

Đơn giản chỉ cần thêm div dường như làm việc cho tôi với các mẫu mà bạn đã đăng:

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

Nhưng một lần nữa, bạn có thể muốn xem xét sử dụng các thư viện javascript trực tiếp thay vì dựa vào các built- trong các tính năng ajax, vì vậy bạn có thể tránh sự kỳ quặc như thế này.