วันอังคารที่ 7 พฤษภาคม พ.ศ. 2556

ปรับความยาว Listbox ในฟอร์ม (HTML Form) เพราะว่าข้อมูลเยอะ ทำให้ยาวเกินไป

บางครั้งกาารสร้างฟอร์ม (Html Form) ก็ติดปัญหาเรื่องของการแสดงผล ของหน้าฟอร์มที่เกิดจาก Listbox หรือ tag ครับ  ปัญหาคือ ข้อมูลใน Listbox ยาวมากทำให้หน้าเว็บเพจที่ใช้แสดงผลนั้นยืดออกจนน่าเกลียด ดังภาพตัวอย่างครับ

ขนาดของ Listbox ที่ยาว ๆ นี้ทำให้จัดหน้าฟอร์ม (Form) ได้ค่อนข้างยาก


วิธีการปรับ เพื่อให้ Listbox ที่อยู่ในฟอร์มสามารถแสดงผลได้โดยไม่ใช้พื้นที่ของหน้าเว็บเพจมากเกินไปนั้น ก็ใช้ CSS เข้ามาช่วยครับ โดยใช้ Property : Width เข้ามาช่วยในการจัดรูปแบบ ดังตัวอย่างครับ


หากปรับแล้วจะได้ผลดังภาพต่อไปนี้

จะได้หน้าตาดังนี้ ซึ่งทำให้สามารถจัดหน้า ฟอร์ม (Html form) ได้งายยิ่งขึ้น


เวลาเลือก ข้อความก็ไม่ได้หายไปนะครับ ยังสามารถแสดงผลได้ยาว ๆ เหมือนเดิม ตามภาพตัวอย่างนี้ครับ

ผลการเลือกรายการ ที่มีข้อความแสดงเต็มเหมือนเดิม



เพียงคำสั่งสั้นๆ เท่านี้ก็ช่วยให้สามารถจัดการฟอร์มได้งายขึ้นแล้วใช่ไหมครับ 

ไม่มีความคิดเห็น:

แสดงความคิดเห็น