เมื่อขยับช่อง label กิจกรรม ช่อง select จะขยับตาม
แต่ไม่สามารถทำให้ช่อง select ขยายเต็มพื้นที่ที่เหลืออยู่ได้
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>
โค้ด: เลือกทั้งหมด
.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;
}