Level 67
@oxbir This is likely happening because of how native selects work on mobile browsers. In order to make this work, you'll need to create a custom dropdown component, like a div, write it out with javascript to be clickable, etc.
24 likes
Nov 25, 2020
8
Level 10
How to add font awesome to select option in mobile?
I want to add symbols to my selected list. I put the text in the header. When I tried to use the icon in the selected menu, it did not work on mobile. But it works perfectly outside the selection menu. Is it possible to place the icon in the menu select option or is it simply impossible to do? How can I do this?
In Computer
In mobile
html
<link rel="stylesheet" href="themes/fontawesome/css/all.min.css">
<select class="form-control" id="reading_skill" name="reading_skill[]">
<option value="1">    </option>
<option value="2">    </option>
<option value="3">    </option>
<option value="4">    </option>
<option value="5">    </option>
</select>
css
select#listening_skill, select#writing_skill, select#reading_skill, select#level {
font-family: 'FontAwesome';
/*content: '';*/
font-weight: 900;
}
Level 10
How?
Level 28
You should check out Select2 which is widely used. Else, if you use Bootstrap, you have some built in custom selects available (called dropdowns). However, unlike Select2, Boostrap dropdowns do not "act" as a select. You have to do some custom code.
Level 10
Level 28
Assuming you have jQuery installed in your project, the following is pretty much all you need (this is the simplest form, I would recommend using a package manager instead of cdn links).
<!-- In your head tag -->
<head>
<!-- ... -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<!-- ... -->
</head>
<body>
<!-- ... -->
<select class="select2" name="state">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
<!-- At the end of the body -->
<script>
$(document).ready(function() {
$('.select2').select2();
});
</script>
</body>
Level 67
Level 10
I am using with bootstrap
Level 67
Doesn't matter, you'd still have to make custom dropdowns. Bootstrap does not custom-format dropdown menus. This is a common/known thing. Same thing with custom checkboxes. You have to roll your own. The articles I posted will get you there. Yes, you literally need to do all of that or use a package as suggested above.
24 likes
Please or to participate in this conversation.