ผมอยากจะให้ดูภาพก่อน เพราะมันคือที่มาของบทความนี้

ในภาพ ผมใช้ div 2 อัน ใส่ข้อมูลที่เป็นตารางอันนึง แล้วก็ใส่ฟอร์มอีกอันนึง ตอนแรกในฟอร์มตรงช่องระบุอุปกรณ์ ผมใช้ dropdown list แล้วปัญหามันเกิด เวลารายการที่มีชื่อมันยาวมากๆ ทำให้ dropdown list มันกว้างเกินกว่า div ทำให้ div มันปัดไปอยู่ข้างล่าง div ที่เก็บตาราง ผมก็เลยเปลี่ยนมันเสียใหม่ ให้เป็นดังในภาพ ดูกันชัดๆอีกภาพ

ตรงช่องอุปกรณ์น่ะ ผมใช้ div ครอบตัว <input type=”radio” name=”radio” id=”radio” value=”radio” /> ไว้ แ่ล้วก็เซ็ตเส้นขอบและความสูงของ div แล้วก็กำหนดว่า ถ้าข้อมูลมันมากกว่าความสูงของ div ให้มันมี scroll bar มาเพื่อให้เลื่อนได้ มาดูโค้ดกันครับว่าทำยังไง

HTML :

<div class="option_panel">
  <input name="accessory_id" type="radio" value="159" />กรอบที่จับประตูโครเมี่ยม
 
  <input name="accessory_id" type="radio" value="163" />กรอบป้ายทะเบียน
 
  <input name="accessory_id" type="radio" value="239" />กรอบรองที่จับประตูโครเมี่ยม
 
  <input name="accessory_id" type="radio" value="250" />กรอบรองที่จับประตูโครเมี่ยม(B,C-Cab)
 
  <input name="accessory_id" type="radio" value="251" />กรอบรองที่จับประตูโครเมี่ยม(D-Cab)
 
  <input name="accessory_id" type="radio" value="136" />กระจกมองมุม ( Beige )
 
  <input name="accessory_id" type="radio" value="134" />กระจกมองมุม ( Black )</div>

CSS :

input , select , .option_panel {
	border-left:1px solid #a8a8a8;
	border-top:1px solid #a8a8a8;
	border-right:1px solid #d8d8d8;
	border-bottom:1px solid #d8d8d8;
	-moz-border-radius:3px;margin:3px;/* สำหรับไฟฟ้อกโดยเฉพาะ*/
}
 
.option_panel{
	height:250px;
	overflow:scroll;
	overflow-x:hidden;/* ไม่ให้แสดง scroll bar แนวนอน*/
}

ผลลัพธ์มันก็จะออกมาดังในรูปภาพครับ

CSS
Avatar

วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

Programmer, Blogger

ชีวิตมันคือการเดินทางเพื่อค้นหาอะไรบางอย่าง และเพื่อค้นพบอะไรบางอย่าง สิ่งที่รู้แล้วจะได้บอกกล่าวให้คนข้างหลังได้ฟัง เพื่อเดินลุยเข้าไปในพงหนามอย่างเตรียมใจไว้แล้วว่าอาจจะต้องเจ็บ