Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

HOME > PHP > PHP Forum > เขียน css ของ yii checkboxlist ให้เป็นแบบ responsive ปรับตามหน้าจอยังไงคะ

เขียน css ของ yii checkboxlist ให้เป็นแบบ responsive ปรับตามหน้าจอยังไงคะ

เริ่มหัวข้อใหม่

^nueng^

โพสกระทู้ ( 20 )
บทความ ( 0 )

ตอนนี้ checkbox แบ่งเป็น 2 column ค่ะ แต่เวลาย่อหน้าจอต้องการให้เหลือแค่ column เดียว ต้องเพิ่มตรงไหนคะ
ขอบคุณค่ะ

Code (PHP)

<?php $listData = CHtml::listData(PAGENAME::model()->findAll(), 'ID', 'NAME'); ?>
		<?php echo CHtml::checkBoxList('PAGENAME_ID',$pag,$listData,array('ID'=>'checklist','separator'=>'',
			 'template'=>'<span class="checkbox-columns">{input} {label}</span>')); ?>

ส่วนของ css
Code

<style>
span.checkbox-columns {
    float:left;
    width: 40%;
	overflow:auto;
}
</style>

Tag : PHP, HTML/CSS, Yii PHP Framework

Date : 2014-01-22 17:25:44

By : ^nueng^

View : 853

Reply : 5

No. 1

num

โพสกระทู้ ( 1,463 )
บทความ ( 1 )

<style>
span.checkbox-columns {
    float:left;
    width: 40%;
	overflow:auto;
}

@media (max-width:500px) {
 span.checkbox-columns {
    float:none;
    width: 80%;
 }
}
</style>

น่าจะประมาณนี้ครับ

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Date : 2014-01-22 20:12:49

By : num

No. 2

^nueng^

โพสกระทู้ ( 20 )
บทความ ( 0 )

ตอบความคิดเห็นที่ : 1 เขียนโดย : num เมื่อวันที่ 2014-01-22 20:12:49

รายละเอียดของการตอบ ::

ขอบคุณมากๆเลยค่ะ แต่พอลองย่อแล้วช่องมันไม่เรียงอ่ะค่ะ รบกวนอีกนิดนะคะ ไม่เคยเขียน css มาก่อนเลยค่ะ

พอย่อแล้วเป็นแบบนี้ค่ะ
css

Date : 2014-01-22 21:01:29

By : ^nueng^

No. 3

num

โพสกระทู้ ( 1,463 )
บทความ ( 1 )

<style>
span.checkbox-columns {
float:left;
width: 40%;
overflow:auto;
}

@media (max-width:500px) {
span.checkbox-columns {
clear:both;
display:block;
float:none;
width: 80%;
}
}
</style>

เพิ่ม clear:both;และ display:block; ไปอาจจะได้ครับ ตรงนี้ไม่แน่ใจว่าเกิดจากอะไรนะครับ
มีลิงค์หน้าเว็บที่ออนไลน์หรือเปล่าครับ หรืออาจจะ copy html ส่วนรายการ checkbox มาให้ดูก็ได้ครับ

Date : 2014-01-23 01:34:53

By : num

No. 4

^nueng^

โพสกระทู้ ( 20 )
บทความ ( 0 )

ตอบความคิดเห็นที่ : 3 เขียนโดย : num เมื่อวันที่ 2014-01-23 01:34:53

รายละเอียดของการตอบ ::

ทำได้แล้วค่ะ ขอบคุณมากๆเลยนะคะ ดีใจจัง

Date : 2014-01-23 09:04:52

By : ^nueng^

No. 5

TC Admin

โพสกระทู้ ( 74,058 )
บทความ ( 838 )

Date : 2014-01-23 09:33:01

By : mr.win

ค้นหาข้อมูล

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

Re : เขียน css ของ yii checkboxlist ให้เป็นแบบ responsive ปรับตามหน้าจอยังไงคะ

รายละเอียด

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

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก