Select not appearing in materialize

Asked

Viewed 730 times

1

I’m trying to make a project here using Materialize, but the field select is not appearing.

This one is HTML

<div class="input-field col s4">
    <select>
      <option value="" disabled selected>Escolha uma opção</option>
      <option value="1">Código</option>
      <option value="2">Nome</option>
      <option value="3">Email</option>
    </select>
    <label for="search">Filtrar</label>
  </div>

This one is Javascript:

$(document).ready(function() {

$('select').formSelect();});

It’s getting like this in the View

inserir a descrição da imagem aqui

Who wants to know more about has a documentation of Materialize: https://materializecss.com/select.html

This is the console error

inserir a descrição da imagem aqui

css

  • Any error in console?

  • Vitor I tested the Selects here in the two versions of Materialize and gave no error in the Console, the JS is right. If you have an error it must be because you have something else in your Script that is accusing the error. Until pq I used the official documentation, and it does not include anything else in the script. So the error is something unrelated to the Select Script.. You have to see what you did to JS

  • He’s showing me indefinite $ error

  • It is I noticed, but it is not related to the Select script, this error is elsewhere in your JS, you must have put something else there in this script. I advise you to open another question and put your full JS to see what might be... So much so that if you test only with the code I posted in a new file you will see that there is no error in the console.

  • now gave another error: Uncaught Referenceerror: Materialize is not defined

  • This is the script I used $('select').formSelect(); Note that the word "Materialize" does not appear in it... Your error is not with Select. It is in another part of the script. As and I told you recommend open another question, put your full Javascript and some user will be able to help you better.

  • Okay then, I’ll be opening another question, thank you hugocsl

  • @hugocsl, if you are interested, please enter the other question https://answall.com/questions/302516/erro-uncaught-referenceerror-materialize-is-not-defined

Show 3 more comments

1 answer

2


Dude your problem is that you are using a version of Materialize, but are using the script another version. Recently Mateiralize underwent a version update passing the 0.100.2 for 1.0.0-rc-1 Documentation link for this version http://archives.materializecss.com/0.100.2/forms.html#select-initialization

Aversion 0.100.2 use that way:

$(document).ready(function () {
    $('select').material_select();
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

<div class="row">
    <div class="input-field col s4">
        <select>
            <option value="" disabled selected>Escolha uma opção</option>
            <option value="1">Código</option>
            <option value="2">Nome</option>
            <option value="3">Email</option>
        </select>
        <label for="search">Filtrar</label>
    </div>
</div>

Aversion 1.0.0-rc-1 use that way:

$(document).ready(function(){
    $('select').formSelect();
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>

<div class="row">
    <div class="input-field col s4">
        <select>
            <option value="" disabled selected>Escolha uma opção</option>
            <option value="1">Código</option>
            <option value="2">Nome</option>
            <option value="3">Email</option>
        </select>
        <label for="search">Filtrar</label>
    </div>
</div>

  • Thanks man, I’ll be testing here

  • Jaja I give you a return

  • @Victorgabriel Summarizing what I said you are using a version of Materialize, but is starting Select with the script of the other version... QQ thing of the touch

  • I’m trying and gave a deformed in my view

  • posted there as it was @hugocsl

  • @Victorgabriel Cara I saw, I extend this type of bug. Because theoretically only changed the startup of Select... I will edit my reply and put the option for both versions I think will look better

  • vlw man, I’m on hold

  • @Victorgabriel guy gave an edited answer, note that now has the two options for both versions. Also note that Select has to fit your grid in the number of columns etc. If the number of columns within Row adds up to more than 12, you may have layout breaking problems. No more you are on the right track, consulting the official documentation. Just watch out for the versions and do not mix codes from one another.

  • Thanks Hugo, I’ll be testing

  • tried and got the best way

  • console is showing an error

  • I edited the publication...when you can look at it to observe this error

  • @Victorgabriel Quanl version after all you are using the 1.0.0 or the 0.100.2 ??

  • 1

    1.0.0 beta: https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js

Show 9 more comments

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.