สอบถามค่ะ ช่อง select ไม่ปรับตามขนาดหน้าจอ

HTML Basic
สำหรับนักพัฒนาเว็บไซต์มือใหม่ HTML , CSS และการใช้ Tools ต่างๆ ในการพัฒนาเว็บไซต์

Moderator: mindphp

ภาพประจำตัวสมาชิก
Tookta
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 641
ลงทะเบียนเมื่อ: 12/12/2022 9:12 am

สอบถามค่ะ ช่อง select ไม่ปรับตามขนาดหน้าจอ

โพสต์ที่ยังไม่ได้อ่าน โดย Tookta »

ปัญหา
เมื่อขยับช่อง label กิจกรรม ช่อง select จะขยับตาม
แต่ไม่สามารถทำให้ช่อง select ขยายเต็มพื้นที่ที่เหลืออยู่ได้
figma_20_2.png
figma_20_2.png (62 KiB) Viewed 950 times
HTML

โค้ด: เลือกทั้งหมด

     <div class="input-group">
                  <span class="input-group-addon alert-info head-activity" id="basic-addon1">กิจกรรม</span>
                  <select class="form-control select-act" name="type" id="list">
                    <option value="2">ไม่ออกกำลังกายหรือออกกำลังกายน้อย</option>
                    <option value="3"> 1</option>
                  </select>
                </div>
CSS

โค้ด: เลือกทั้งหมด

  .head-activity{
        box-sizing: border-box;
        width: 15% !important;
        height: 84%;
        background: #D9EDF7;
        border: 1px solid #BCE8F1;
        border-radius: 5px 0px 0px 5px;
        padding: 9px !important;
        padding-left: 20px !important;
    }
    .select-act{
        box-sizing: border-box;
        width: 100% !important;
        background: #FFFFFF;
        border: 1px solid #CCCCCC;
    }
ภาพประจำตัวสมาชิก
Tookta
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 641
ลงทะเบียนเมื่อ: 12/12/2022 9:12 am

Re: สอบถามค่ะ ช่อง select ไม่ปรับตามขนาดหน้าจอ

โพสต์ที่ยังไม่ได้อ่าน โดย Tookta »

สอบถาม บอท chat GPT และ *สามารถใช้งานได้เเล้ว*
Q : (Code ด้านบนที่แนบไว้)
i use bootstrap 3
I want to use the full size of the select box

A:To use the full size of the select box, you can try setting the width of the select element to 100% and remove the width of the head-activity class, it will automatically adjust to the full size of its container. Also, you can remove the !important from the width property of the select-act class.

Here is the updated CSS code:

Copy code

โค้ด: เลือกทั้งหมด

.head-activity{
    box-sizing: border-box;
    height: 84%;
    background: #D9EDF7;
    border: 1px solid #BCE8F1;
    border-radius: 5px 0px 0px 5px;
    padding: 9px !important;
    padding-left: 20px !important;
}
.select-act{
    box-sizing: border-box;
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
}
Also, you can use the class "col-md-" or "col-sm-" or "col-xs-*" of Bootstrap 3 to use the full size of the select box in different screen size.
ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41232
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

Re: สอบถามค่ะ ช่อง select ไม่ปรับตามขนาดหน้าจอ

โพสต์ที่ยังไม่ได้อ่าน โดย mindphp »

ตัวอย่าง การใช้ label และ กำหนด List box class
class สำหรับ list box เช่น form-select, select ,

Input object 1 object มีองค์ประกอบ

โค้ด: เลือกทั้งหมด

 <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="xxxxxxxxx">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
ควรคลุมตั้งแต่
<div class="form-row">
// Input object
</div>

ตัวอย่าง 1 row มี 3 คอลั่ม

โค้ด: เลือกทั้งหมด

<div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
ดู class ที่มีให้ใช้ แล้วแบบไม่ต้องสร้าง class ใหม่ขึ้นมาเองที่นี่
https://getbootstrap.com/docs/3.4/customize/
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 88