Skip to main content
Se corrige error de sintaxis
Origen Enlace

Sucede que al momento de querer abrir una lista desplegable de Materialize V0.100.2 en Google Chrome, no se despliega correctamente y es necesario hacer dos o más click para poder ver las opciones correctamente.

Algunas veces funciona haciendo un solo click, otras no, y por eso estoy confundido y no se cual sea una posible solución. Intenté aplicando e.preventDefault(); al evento mouseup y mousedown, pero no funcionó:

$(document).ready(function() {

  $('select').material_select();

  $('.select-dropdown').on('mousedown', function(e) {
    //e.preventDefault();
    
    //Se clickeó el mouse

  });

  $('.select-dropdown').on('mouseup', function(e) {
      //e.preventDefault();
      
      //Se soltó el mouse
    });
  });
});
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<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.3.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>


<div class="container">
  <div class="row">
    <div class="input-field col s3">
      <select id="selectEstadoNotificacion">
        <option value="" selected="selected">Todos</option>
        <option value="done">Exito</option>
        <option value="failed">Fallido</option>
      </select>
      <label>Estado</label>
    </div>
    <div class="input-field col s3">
      <select id="jsChannelNotification">
        <option value="" selected="selected">Otro</option>
        <option value="done">Uno</option>
        <option value="failed">Dos</option>
      </select>
      <label>Medio</label>
    </div>
  </div>
</div>

Sucede que al momento de querer abrir una lista desplegable de Materialize V0.100.2 en Google Chrome, no se despliega correctamente y es necesario hacer dos o más click para poder ver las opciones correctamente.

Algunas veces funciona haciendo un solo click, otras no, y por eso estoy confundido y no se cual sea una posible solución. Intenté aplicando e.preventDefault(); al evento mouseup y mousedown, pero no funcionó:

$(document).ready(function() {

  $('select').material_select();

  $('.select-dropdown').on('mousedown', function(e) {
    //e.preventDefault();
    
    //Se clickeó el mouse

    $('.select-dropdown').on('mouseup', function(e) {
      //e.preventDefault();
      
      //Se soltó el mouse
    });
  });
});
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<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.3.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>


<div class="container">
  <div class="row">
    <div class="input-field col s3">
      <select id="selectEstadoNotificacion">
        <option value="" selected="selected">Todos</option>
        <option value="done">Exito</option>
        <option value="failed">Fallido</option>
      </select>
      <label>Estado</label>
    </div>
    <div class="input-field col s3">
      <select id="jsChannelNotification">
        <option value="" selected="selected">Otro</option>
        <option value="done">Uno</option>
        <option value="failed">Dos</option>
      </select>
      <label>Medio</label>
    </div>
  </div>
</div>

Sucede que al momento de querer abrir una lista desplegable de Materialize V0.100.2 en Google Chrome, no se despliega correctamente y es necesario hacer dos o más click para poder ver las opciones correctamente.

Algunas veces funciona haciendo un solo click, otras no, y por eso estoy confundido y no se cual sea una posible solución. Intenté aplicando e.preventDefault(); al evento mouseup y mousedown, pero no funcionó:

$(document).ready(function() {

  $('select').material_select();

  $('.select-dropdown').on('mousedown', function(e) {
    //e.preventDefault();

    //Se clickeó el mouse

  });

  $('.select-dropdown').on('mouseup', function(e) {
    //e.preventDefault();

    //Se soltó el mouse
  });

});
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<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.3.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>


<div class="container">
  <div class="row">
    <div class="input-field col s3">
      <select id="selectEstadoNotificacion">
        <option value="" selected="selected">Todos</option>
        <option value="done">Exito</option>
        <option value="failed">Fallido</option>
      </select>
      <label>Estado</label>
    </div>
    <div class="input-field col s3">
      <select id="jsChannelNotification">
        <option value="" selected="selected">Otro</option>
        <option value="done">Uno</option>
        <option value="failed">Dos</option>
      </select>
      <label>Medio</label>
    </div>
  </div>
</div>

Se comentan acciones con console.log()
Origen Enlace

Sucede que al momento de querer abrir una lista desplegable de Materialize V0.100.2 en Google Chrome, no se despliega correctamente y es necesario hacer dos o más click para poder ver las opciones correctamente.

Algunas veces funciona haciendo un solo click, otras no, y por eso estoy confundido y no se cual sea una posible solución. Intenté aplicando e.preventDefault(); al evento mouseup y mousedown, pero no funcionó:

$(document).ready(function() {

  $('select').material_select();

  $('.select-dropdown').on('mousedown', function(e) {
    //e.preventDefault();
    console.log('Se
    //Se clickeó el mouse');mouse

    $('.select-dropdown').on('mouseup', function(e) {
      //e.preventDefault();
      console.log('Se 
 soltó el mouse');
   //Se soltó el console.log('*****************');mouse
    });
  });
});
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<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.3.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>


<div class="container">
  <div class="row">
    <div class="input-field col s3">
      <select id="selectEstadoNotificacion">
        <option value="" selected="selected">Todos</option>
        <option value="done">Exito</option>
        <option value="failed">Fallido</option>
      </select>
      <label>Estado</label>
    </div>
    <div class="input-field col s3">
      <select id="jsChannelNotification">
        <option value="" selected="selected">Otro</option>
        <option value="done">Uno</option>
        <option value="failed">Dos</option>
      </select>
      <label>Medio</label>
    </div>
  </div>
</div>

Sucede que al momento de querer abrir una lista desplegable de Materialize V0.100.2 en Google Chrome, no se despliega correctamente y es necesario hacer dos o más click para poder ver las opciones correctamente.

Algunas veces funciona haciendo un solo click, otras no, y por eso estoy confundido y no se cual sea una posible solución. Intenté aplicando e.preventDefault(); al evento mouseup y mousedown, pero no funcionó:

$(document).ready(function() {

  $('select').material_select();

  $('.select-dropdown').on('mousedown', function(e) {
    //e.preventDefault();
    console.log('Se clickeó el mouse');

    $('.select-dropdown').on('mouseup', function(e) {
      //e.preventDefault();
      console.log('Se soltó el mouse');
      console.log('*****************');
    });
  });
});
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<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.3.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>


<div class="container">
  <div class="row">
    <div class="input-field col s3">
      <select id="selectEstadoNotificacion">
        <option value="" selected="selected">Todos</option>
        <option value="done">Exito</option>
        <option value="failed">Fallido</option>
      </select>
      <label>Estado</label>
    </div>
    <div class="input-field col s3">
      <select id="jsChannelNotification">
        <option value="" selected="selected">Otro</option>
        <option value="done">Uno</option>
        <option value="failed">Dos</option>
      </select>
      <label>Medio</label>
    </div>
  </div>
</div>

Sucede que al momento de querer abrir una lista desplegable de Materialize V0.100.2 en Google Chrome, no se despliega correctamente y es necesario hacer dos o más click para poder ver las opciones correctamente.

Algunas veces funciona haciendo un solo click, otras no, y por eso estoy confundido y no se cual sea una posible solución. Intenté aplicando e.preventDefault(); al evento mouseup y mousedown, pero no funcionó:

$(document).ready(function() {

  $('select').material_select();

  $('.select-dropdown').on('mousedown', function(e) {
    //e.preventDefault();
    
    //Se clickeó el mouse

    $('.select-dropdown').on('mouseup', function(e) {
      //e.preventDefault();
       
      //Se soltó el mouse
    });
  });
});
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<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.3.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>


<div class="container">
  <div class="row">
    <div class="input-field col s3">
      <select id="selectEstadoNotificacion">
        <option value="" selected="selected">Todos</option>
        <option value="done">Exito</option>
        <option value="failed">Fallido</option>
      </select>
      <label>Estado</label>
    </div>
    <div class="input-field col s3">
      <select id="jsChannelNotification">
        <option value="" selected="selected">Otro</option>
        <option value="done">Uno</option>
        <option value="failed">Dos</option>
      </select>
      <label>Medio</label>
    </div>
  </div>
</div>

Se añadió línea comentada con e.preventDefault()
Origen Enlace

Sucede que al momento de querer abrir una lista desplegable de Materialize V0.100.2 en Google Chrome, no se despliega correctamente y es necesario hacer dos o más click para poder ver las opciones correctamente.

Algunas veces funciona haciendo un solo click, otras no, y por eso estoy confundido y no se cual sea una posible solución. Intenté aplicando e.preventDefault(); al evento mouseup y mousedown, pero no funcionó:

$(document).ready(function() {

  $('select').material_select();

  $('.select-dropdown').on('mousedown', function(e) {
    //e.preventDefault();
    console.log('Se clickeó el mouse');

    $('.select-dropdown').on('mouseup', function(e) {
      //e.preventDefault();
      console.log('Se soltó el mouse');
      console.log('*****************');
    });
  });
});
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<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.3.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>


<div class="container">
  <div class="row">
    <div class="input-field col s3">
      <select id="selectEstadoNotificacion">
        <option value="" selected="selected">Todos</option>
        <option value="done">Exito</option>
        <option value="failed">Fallido</option>
      </select>
      <label>Estado</label>
    </div>
    <div class="input-field col s3">
      <select id="jsChannelNotification">
        <option value="" selected="selected">Otro</option>
        <option value="done">Uno</option>
        <option value="failed">Dos</option>
      </select>
      <label>Medio</label>
    </div>
  </div>
</div>

Sucede que al momento de querer abrir una lista desplegable de Materialize V0.100.2 en Google Chrome, no se despliega correctamente y es necesario hacer dos o más click para poder ver las opciones correctamente.

Algunas veces funciona haciendo un solo click, otras no, y por eso estoy confundido y no se cual sea una posible solución. Intenté aplicando e.preventDefault(); al evento mouseup y mousedown, pero no funcionó:

$(document).ready(function() {

  $('select').material_select();

  $('.select-dropdown').on('mousedown', function(e) {
    console.log('Se clickeó el mouse');

    $('.select-dropdown').on('mouseup', function(e) {
      console.log('Se soltó el mouse');
      console.log('*****************');
    });
  });
});
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<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.3.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>


<div class="container">
  <div class="row">
    <div class="input-field col s3">
      <select id="selectEstadoNotificacion">
        <option value="" selected="selected">Todos</option>
        <option value="done">Exito</option>
        <option value="failed">Fallido</option>
      </select>
      <label>Estado</label>
    </div>
    <div class="input-field col s3">
      <select id="jsChannelNotification">
        <option value="" selected="selected">Otro</option>
        <option value="done">Uno</option>
        <option value="failed">Dos</option>
      </select>
      <label>Medio</label>
    </div>
  </div>
</div>

Sucede que al momento de querer abrir una lista desplegable de Materialize V0.100.2 en Google Chrome, no se despliega correctamente y es necesario hacer dos o más click para poder ver las opciones correctamente.

Algunas veces funciona haciendo un solo click, otras no, y por eso estoy confundido y no se cual sea una posible solución. Intenté aplicando e.preventDefault(); al evento mouseup y mousedown, pero no funcionó:

$(document).ready(function() {

  $('select').material_select();

  $('.select-dropdown').on('mousedown', function(e) {
    //e.preventDefault();
    console.log('Se clickeó el mouse');

    $('.select-dropdown').on('mouseup', function(e) {
      //e.preventDefault();
      console.log('Se soltó el mouse');
      console.log('*****************');
    });
  });
});
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<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.3.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>


<div class="container">
  <div class="row">
    <div class="input-field col s3">
      <select id="selectEstadoNotificacion">
        <option value="" selected="selected">Todos</option>
        <option value="done">Exito</option>
        <option value="failed">Fallido</option>
      </select>
      <label>Estado</label>
    </div>
    <div class="input-field col s3">
      <select id="jsChannelNotification">
        <option value="" selected="selected">Otro</option>
        <option value="done">Uno</option>
        <option value="failed">Dos</option>
      </select>
      <label>Medio</label>
    </div>
  </div>
</div>

Loading
Origen Enlace
Loading