CanDiceYap CanDiceYap - 2 months ago 11
CSS Question

val append attr doesn't work on mobile

Update: i have found a code from snippet that similar to my design which is here: https://bootsnipp.com/snippets/NBrr0

It working fine on dekstop, but but it have problem when viewing on mobile i guess is this:

_colors=$('._select_color_drop li');
for (var i = _colors.length - 1; i >= 0; i--) {
$(_colors[i]).click(function(){
var color_text = $(this).find('span').attr('_text_display');
var elemnt = $(this).closest('._select_color_drop').prev();
elemnt.find('span.color').remove();
$(this).find('span').clone().appendTo(elemnt);
var contents = $(elemnt).contents();
if (contents.length > 0) {
if (contents.get(0).nodeType == Node.TEXT_NODE) {
$(elemnt).html(color_text).append(contents.slice(1));
}
}
if($('[name=_color]').val() == undefined){
elemnt.next().append("<input type='hidden' name='_color' value='"+color_text+"'>");
}else{
$('[name=_color]').val(color_text);
}

})
};


Any idea to solve this? T_T




Bootstrap form select styling option

I have a question about styling issue on bootstrap 3 form.
Does it have any chances the select option can be style like this?
Sample design

<section>
<div class="col-md-6 col-xs-12 text-left form-cover">
<div class="form-group">
<label for="">Your Age</label>
<select class="form-control" id="">
<option>-Please select your Age-</option>
<option>Below 18</option>
<option>19-30</option>
<option>30-40</option>
<option>40 and above</option>
</select>
</div>

<div class="form-group">
<label for="">Choose Your Color</label>
<select class="form-control" id="">
<option>-Please select colour-</option>
<option><div style="background: yellow; width: 20px; height: 20px;"></div></option>
<option><div style="background: black; width: 20px; height: 20px;"></div></option>
<option><div style="background: white; width: 20px; height: 20px;"></div></option>
<option><div style="background: purple; width: 20px; height: 20px;"></div></option>
<option><div style="background: blue; width: 20px; height: 20px;"></div></option>
<option><div style="background: grey; width: 20px; height: 20px;"></div></option>
<option><div style="background: green; width: 20px; height: 20px;"></div></option>
<option><div style="background: pink; width: 20px; height: 20px;"></div></option>
</select></div>
</div>
</section>


i put div inside option but it seem doesn't work. :(

Wondering it is can use dropdown styling, but i worry the backend can't capture the value.

Thank you!

Answer Source

I see two easy ways to do what you want:

  1. Try select2 (version for bs3 also exists) and write your own styles for this. Using select2 you still can get value directly from select.
  2. Use hidden select + bootstrap 3 dropdown component and write a simple jQuery function: every time a user changes the dropdown's value, the hidden select's value changes too.