question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Multiple Select Scrolling to select entry

See original GitHub issue

Hi there,

I seem to be having an issue with the multiple select form element. When you select an element on the list, the scrollbar will jump to make the selection at the top of your view. This is frustrating for the user as the list will keep jumping around when the user selects an element. This issue only occurs on the last occurrence of a select multiple form element where all of the others are unaffected. Code example is below:

<div class="input-field col s12"><!-- This form element will be unaffected, not jumping around. --> <select multiple> <option value="" disabled selected>Choose your option</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> <option value="5">Option 5</option> <option value="6">Option 6</option> <option value="7">Option 7</option> <option value="8">Option 8</option> <option value="9">Option 9</option> <option value="9">Option 10</option> <option value="9">Option 11</option> <option value="9">Option 12</option> <option value="9">Option 13</option> <option value="9">Option 14</option> </select> <label>Materialize Multiple Select</label> </div>

                <div class="input-field col s12"> <!-- This element will jump around as the user select options from the list -->
                    <select multiple>
                        <option value="" disabled selected>Choose your option</option>
                        <option value="1">Option 1</option>
                        <option value="2">Option 2</option>
                        <option value="3">Option 3</option>
                        <option value="4">Option 4</option>
                        <option value="5">Option 5</option>
                        <option value="6">Option 6</option>
                        <option value="7">Option 7</option>
                        <option value="8">Option 8</option>
                        <option value="9">Option 9</option>
                        <option value="9">Option 10</option>
                        <option value="9">Option 11</option>
                        <option value="9">Option 12</option>
                        <option value="9">Option 13</option>
                        <option value="9">Option 14</option>
                    </select>
                    <label>Materialize Multiple Select</label>
                </div>

`

Thanks, Evan

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:3
  • Comments:12 (8 by maintainers)

github_iconTop GitHub Comments

4reactions
Tim-artscommented, Aug 7, 2016

If you want to avoid this behavior, you have to delete the line 3280 in materialize.js : options.scrollTo(option);

3reactions
dkatoLSVTcommented, Jan 31, 2018

This action is really annoying. It should be removed.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Why do <select multiple> boxes scroll to the top with ...
I've made a workaround by adding a wrapper-div that has overflow-y: auto; border: 1px solid darkgrey; and then setting overflow: visible; border ...
Read more >
Multi select scrolling selected option to top
Hi,I have an issue with multi select when number of options increases . when i select an option, the selected item scrolls to...
Read more >
when use multi-select with [closeOnSelect: false] each time ...
I use the control without infinite scrolling (my option set is fixed size), and I find it annoying that the first selected item...
Read more >
Multiple select autoscroll to last item - javascript - Daniweb
I have 3 multiple select list boxes that all must scroll to the latest selected item in the list. ... Does anyone know...
Read more >
multiple select with custom scrollbar - CodePen
multi select box with custom scrollbar using css and js, you can use default select box. ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found