Vertical scrollbar hidden iin the selection box

Question

I have a problem in the selection box, I can't see the vertical scrollbar in the right-hand site, it makes me difficult to scroll down in the selection box to choose the option. Hope someone can guide me how to solve it.

<style>
#parentid{
  max-height:200px;
  overflow:auto;
  size:10;
}
</style>


<select onchange="getComboA(this)" class="form-control blank" id="parentid" name="parentid" title="parentid">
    <option value="please_select">--Sila Pilih--</option>
    <option value="0">New Category</option>
    <?php
    $sql_incharge = 'select * from filing_code_management where status=1 and is_approved = 1 and category_id in (1,2,3,4)ORDER BY id ASC';
    $arr_incharge = db_conn_select($sql_incharge);
    foreach ($arr_incharge as $rs_incharge) {
        $folder_location      = $rs_incharge['folder_location'];
        $function_code_select = $rs_incharge['function_code'];
        $function_name_select = $rs_incharge['function_name'];
        $activity_code_select = $rs_incharge['activity_code'];
        $activity_name_select = $rs_incharge['activity_name'];
        $name_select          = $rs_incharge['name'];
        $id_select            = $rs_incharge['id'];
        $root             = $rs_incharge['id_root'];
        $category_id          = $rs_incharge['category_id']; // get category_id here
        // save the data here↓↓ in data attributes 
        echo "<option value='{$id_select}' data-cat_id='{$category_id}' data-root='{$root}'>{$name_select}</option>";
        }
?></select>

Scroll down problem

I want the expected result like below the sample picture:

Output 2

Thanks in advance.

Can you at least provide CSS and copy the html you are getting in your browser ? to test with similar data ? — MaxiGui, Sep 03 '20 at 07:30
Have you tried to change `overflow:auto;` to `overflow:scroll;`? — xKobalt, Sep 03 '20 at 07:42
This is duplicate of: https://stackoverflow.com/questions/36676701/set-width-at-option-of-select-box Just reduce the width how you want as in this question — MaxiGui, Sep 03 '20 at 08:00
@MaxiGui I've tried to use your link. But doesn't work for me — Pi Network Crytocurrency, Sep 03 '20 at 08:52

score 0 · Accepted Answer · answered Sep 03 '20 at 08:56

I am answering more clearly but this answer has been posted Set Width at Option of Select Box

If needed, you can add a setTimeOut to be sure it is well applied

$('option').each(function() {
  var optionText = this.text;
  var newOption = optionText.substring(0, 36);
  $(this).text(newOption + '...');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<select style="width:250px">
    <option>Select your University</option>
    <option>Bangladesh University of Engineering and Technology</option>
    <option>Mawlana Bhashani Science and Technology University</option>
</select>

Vertical scrollbar hidden iin the selection box

1 Answers1