2

Tenho uma tabela que possui um dropdown materialize, que quando selecionado pelo PC/Notebook funciona normalmente. Porém quando clicado por algum dispositivo mobile com o mesmo navegador ele não reconhece o touch como click e não direciona para a página específica. Código do <th> da tabela abaixo.

    <th>
        <!-- Dropdown Trigger -->
        <a class='dropdown-trigger btn' href='#' data-target='status'>Status</a>

        <!-- Dropdown Structure -->
        <ul id='status' class='dropdown-content'>
              <li><a href="@Url.Action("Filtrar","Construcao", new {text = "Não Iniciado"})">Não Iniciado</a></li>
              <li><a href="@Url.Action("Filtrar","Construcao", new {text = "Em Andamento"})">Em Andamento</a></li>
              <li><a href="@Url.Action("Filtrar","Construcao", new {text = "Pausado"})">Pausado</a></li>
              <li><a href="@Url.Action("Filtrar","Construcao", new {text = "Finalizado"})">Finalizado</a></li>
        </ul>
   </th>

Estou utilizando jquery para chamar os dropdowns

$('.dropdown-trigger').dropdown();
1
  • 1
    Tentou com @Html.ActionLink() ao invés de @Url.Action()? Commented 30/11/2019 às 19:48

1 Resposta 1

0
+50

Tenta fazer o seguinte:

Html:

<div>
    <!-- Dropdown Trigger -->
    <div class='btn'>
        <a id="dropdown-trigger" data-target="status" onclick="abreDropdown"> 
            Status
        </a>
    </div>

    <!-- Dropdown Structure -->
    <ul id='status' class='dropdown-content'>
          <li><a href="@Url.Action("Filtrar","Construcao", new {text = "Não Iniciado"})">Não Iniciado</a></li>
          <li><a href="@Url.Action("Filtrar","Construcao", new {text = "Em Andamento"})">Em Andamento</a></li>
          <li><a href="@Url.Action("Filtrar","Construcao", new {text = "Pausado"})">Pausado</a></li>
          <li><a href="@Url.Action("Filtrar","Construcao", new {text = "Finalizado"})">Finalizado</a></li>
    </ul>

Javascript:

document.addEventListener('DOMContentLoaded', function() {
  let elem = document.getElementById('dropdown-trigger');
  let instances = M.Dropdown.init(elem);
});

function abreDropdown(){
    let elem = document.getElementById('dropdown-trigger')
    M.Sidenav.getInstance(elem).open();
}

Tive um problema parecido com o Materialize e o Angular, onde o sistema ignorava o link e insistia em tentar abrir uma nova página.

3
  • 1
    Olá, no caso o problema se encontra no clique da ´<li>´ e não em abrir o dropdown em si. É como se a @Url.Action não executasse o link quando há um touch em um dispositivo mobile. Commented 4/12/2019 às 13:34
  • @Thiagomoreira o que acontece se você substituir a tag <ul> por uma <div> com as mesmas propriedades e deixar direto a âncora (<a>) no lugar dos <li>? Commented 4/12/2019 às 13:53
  • 1
    Então eu preciso das <tr> pois é uma tabela. este dropdown está dentro de uma tabela então não posso alterar Commented 4/12/2019 às 14:21

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .