New select in 4.5.9 has problems

Topic: New select in 4.5.9 has problems

decosvaldo pro asked 6 years ago

Dear MDB Team, about the key filtering on the new select, something is wrong, because it is not filtering by the first letter. I mean, if I type “R”, the fist word selected is “AOR”. This makes larger selects to become impossible to get to the last results.

Also, larger selects are not scrooling, so that sometimes when you press a key, the result is hidden because the one selected it is not on the screen.

For larger selects, is it possible to style the scroolbar?

Thanks.

Andre.

Bartłomiej Malanowski staff commented 6 years ago

Currently, it's impossible to style the scrollbar, but it's on our TODO list. Could you please tell us more about the issue with a large number of options? How many options did you put to your select? Do you use multi-select or single-select? What's your browser? Providing more details will allow us to recreate your issue so we'll be able to resolve it

decosvaldo pro commented 6 years ago

I'm sending the info as an answer bellow

Add comment

decosvaldo pro answered 6 years ago

0 0 Best answer

The select that i'm using is this one:
<pre><select class="mdb-select colorful-select dropdown-dark" id="style" name="style">
<option value="" selected>Todos</option>
<option value="42" >Acústico</option>
<option value="38" >AOR</option>
<option value="61" >Art Rock</option>
<option value="76" >Avant-garde Metal</option>
<option value="73" >Barroco</option>
<option value="21" >Black Metal</option>
<option value="31" >Blues</option>
<option value="37" >Country</option>
<option value="10" >Dance</option>
<option value="22" >Death Metal</option>
<option value="11" >Disco</option>
<option value="25" >Doom</option>
<option value="28" >Eletrônico</option>
<option value="62" >Eletrônico Épico Pro</option>
<option value="29" >Experimental</option>
<option value="7" >Folk</option>
<option value="12" >Funk</option>
<option value="13" >Funk Americano</option>
<option value="58" >Funk Rock</option>
<option value="30" >Glam</option>
<option value="45" >Gospel</option>
<option value="24" >Gótico</option>
<option value="43" >Groove</option>
<option value="41" >Grunge</option>
<option value="2" >Hard Rock</option>
<option value="63" >Hardcore</option>
<option value="68" >Hardcore Punk</option>
<option value="4" >Heavy Metal</option>
<option value="9" >Heavy Metal Melódico</option>
<option value="74" >Hip Hop</option>
<option value="51" >Indie Rock</option>
<option value="52" >Industrial</option>
<option value="19" >Instrumental</option>
<option value="39" >Jazz</option>
<option value="56" >Jazz Fusion</option>
<option value="67" >Math Rock</option>
<option value="66" >Mathcore</option>
<option value="6" >Metal Progressivo</option>
<option value="16" >Metal Sinfônico</option>
<option value="65" >Metalcore</option>
<option value="17" >MPB</option>
<option value="47" >Música Celta</option>
<option value="20" >Música Clássica</option>
<option value="32" >Neo-Progressivo</option>
<option value="46" >New Age</option>
<option value="35" >New Metal</option>
<option value="26" >New Wave</option>
<option value="69" >Nu Metal</option>
<option value="5" >Pop</option>
<option value="70" >Pop-Punk</option>
<option value="55" >Post-Punk</option>
<option value="27" >Power Metal</option>
<option value="49" >Power Pop</option>
<option value="75" >Proto-Punk</option>
<option value="18" >Psicodélico</option>
<option value="15" >Punk</option>
<option value="54" >R&B</option>
<option value="40" >Rap</option>
<option value="14" >Reggae</option>
<option value="1" >Rock</option>
<option value="34" >Rock Alternativo</option>
<option value="64" >Rock Cômico</option>
<option value="48" >Rock Ópera</option>
<option value="3" >Rock Progressivo</option>
<option value="8" >Rock Sinfônico</option>
<option value="71" >Skate Punk</option>
<option value="60" >Soft Rock</option>
<option value="44" >Soul</option>
<option value="57" >Southern Rock</option>
<option value="72" >Stoner Rock</option>
<option value="50" >Surf Music</option>
<option value="53" >Synthpop</option>
<option value="23" >Trash Metal</option>
<option value="36" >Viking Metal</option>
<option value="33" >World Music</option>
<option value="59" >Zeuhl</option>
</select></pre>

Browser: Chrome

Let's say that I want to type "T" to go directly to "Trash Metal", this won't happen, because it will stop on the first word that contains the "T" letter inside it, even if it is not on the first letter.

The second problem is when I type a letter and the result is bellow the first results that are on the screen. The cursor gets there, but the list is not scrooled with it, so the selection is hidden until I manually scrool it.

Please insert min. 20 characters.

The select that i'm using is this one:

<select class="mdb-select colorful-select dropdown-dark" id="style" name="style">
<option value="" selected>Todos</option>
<option value="42" >Acústico</option>
<option value="38" >AOR</option>
<option value="61" >Art Rock</option>
<option value="76" >Avant-garde Metal</option>
<option value="73" >Barroco</option>
<option value="21" >Black Metal</option>
<option value="31" >Blues</option>
<option value="37" >Country</option>
<option value="10" >Dance</option>
<option value="22" >Death Metal</option>
<option value="11" >Disco</option>
<option value="25" >Doom</option>
<option value="28" >Eletrônico</option>
<option value="62" >Eletrônico Épico Pro</option>
<option value="29" >Experimental</option>
<option value="7" >Folk</option>
<option value="12" >Funk</option>
<option value="13" >Funk Americano</option>
<option value="58" >Funk Rock</option>
<option value="30" >Glam</option>
<option value="45" >Gospel</option>
<option value="24" >Gótico</option>
<option value="43" >Groove</option>
<option value="41" >Grunge</option>
<option value="2" >Hard Rock</option>
<option value="63" >Hardcore</option>
<option value="68" >Hardcore Punk</option>
<option value="4" >Heavy Metal</option>
<option value="9" >Heavy Metal Melódico</option>
<option value="74" >Hip Hop</option>
<option value="51" >Indie Rock</option>
<option value="52" >Industrial</option>
<option value="19" >Instrumental</option>
<option value="39" >Jazz</option>
<option value="56" >Jazz Fusion</option>
<option value="67" >Math Rock</option>
<option value="66" >Mathcore</option>
<option value="6" >Metal Progressivo</option>
<option value="16" >Metal Sinfônico</option>
<option value="65" >Metalcore</option>
<option value="17" >MPB</option>
<option value="47" >Música Celta</option>
<option value="20" >Música Clássica</option>
<option value="32" >Neo-Progressivo</option>
<option value="46" >New Age</option>
<option value="35" >New Metal</option>
<option value="26" >New Wave</option>
<option value="69" >Nu Metal</option>
<option value="5" >Pop</option>
<option value="70" >Pop-Punk</option>
<option value="55" >Post-Punk</option>
<option value="27" >Power Metal</option>
<option value="49" >Power Pop</option>
<option value="75" >Proto-Punk</option>
<option value="18" >Psicodélico</option>
<option value="15" >Punk</option>
<option value="54" >R&B</option>
<option value="40" >Rap</option>
<option value="14" >Reggae</option>
<option value="1" >Rock</option>
<option value="34" >Rock Alternativo</option>
<option value="64" >Rock Cômico</option>
<option value="48" >Rock Ópera</option>
<option value="3" >Rock Progressivo</option>
<option value="8" >Rock Sinfônico</option>
<option value="71" >Skate Punk</option>
<option value="60" >Soft Rock</option>
<option value="44" >Soul</option>
<option value="57" >Southern Rock</option>
<option value="72" >Stoner Rock</option>
<option value="50" >Surf Music</option>
<option value="53" >Synthpop</option>
<option value="23" >Trash Metal</option>
<option value="36" >Viking Metal</option>
<option value="33" >World Music</option>
<option value="59" >Zeuhl</option>
</select>

Browser: Chrome Let's say that I want to type "T" to go directly to "Trash Metal", this won't happen, because it will stop on the first word that contains the "T" letter inside it, even if it is not on the first letter. The second problem is when I type a letter and the result is bellow the first results that are on the screen. The cursor gets there, but the list is not scrooled with it, so the selection is hidden until I manually scrool it.

Bartłomiej Malanowski staff commented 6 years ago

Thank you for the details! We'll try to improve our Material Select as quick as possible

decosvaldo pro commented 6 years ago

Thanks. Please, if you find a quick fix to this issues, post it so I can use it before the next update.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

decosvaldo

Pro User 42Support score
16Questions 10Answers 1Snippets