Ir para conteúdo
Lisbi

Select option usando Dropkick desconfigurado no IE

Recommended Posts

Boa noite Pessoal

 

Estou com um problema sério, baixei um plugim para estilizar o meu select option de opções de cidades do meu projeto,

até ai td bem! Mas quando fui testar no IExplorer ele duplicava os selects, mostrando o estilizado e o select basico do html (sem estilização).

resolvi o problema da seguinte forma usando esses códigos css.

.formulario select {
	position: inherit;
	display: none;
}

E funcionou igual nos navegadores, mas quando fui ver o site "(responsivo)" pelo celular  tive a surpresa de não aparecer o select de opções, então vi que o display influenciava diretamente nisso!

Dai vem o meu dilema, se eu mudar o display, funciona em todos os navegadores normalmente e tb no celular, embora no celular seja sem estar estilizado!

 

Como resolvo esse problema, gostaria que funcionasse corretamente em todos! Alguem ai pode esclarecer pra mim como resolvo esse problema?

 

Desde já eu agradeço pessoal.  

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Boa tarde pessoa! @Fabio Victor, foi de grande ajuda esse tutorial! Mas mesmo aplicando as regras e mudando ate o layout do site, o select option continuou sem aparacer! Sera que tem como eu mudar esse codigo css acima só para as telas de celulares!

Tipo :

.formulario select {
	position: inherit;
	display: block;
}

 

mas para ter essa leitura só quando for acessado pelos smart fones

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Andrelirasp
      Tenho uma página onde exibe livros registrados, eu gostaria de fazer uma outra focada em busca para buscar dados nas tabelas.
       
      Gostaria de fazer um sistema de busca onde buscaria dados digitados de acordo com a categoria selecionada, porém não sei por onde começo.
      Eu gostaria de adicionar a opção de **filtrar** por **categoria** seguida de um `_<input type="text">_` para o usuário selecionar a categoria e escrever o que ele quer buscar, a categoria no caso seriam as tabelas:
          <select name="opcao_filtro">
                     <option value="nulo">--</option>                
                     <option value="titulo">Título</option>
                     <option value="autor">Autor</option>
                     <option value="tema">Tema</option>
                     <option value="editora">Editora</option>
                     <option value="indice">Índice</option>
          </select>

      Logo abaixo teria o input:
          <input type="text" name="busca" id="busca"> // Procurar em tabela tal, tal coisa
          <input type="submit" value="Procurar">
       
      E depois(opcional para o usuário) buscar por letras(funcionaria junto com o filtro de categorias):
          <a href="url">A</a>
          <a href="url">B</a>
      **Exemplo**: Usúario escolheu filtrar por título e quando ele clica na letra _" A "_ buscasse entre a categoria e exibisse os resultados dos títulos que comesse com a letra selecionada.
    • Por LucasFalcao
      Como é feito um PWA, quais os recursos utilizados, oque preciso conhecer para desenvolver um?
    • Por PedroNunes
      Coloquei o plugin [Pace Master](http://github.hubspot.com/pace/docs/welcome/) em minha página que faz uma barra carregar na parte superior enquanto a página esta carregando, como a do YouTube, entretanto, quero fazer com que essa mesma barra carregue ao enviar o formulário que contém na página, caso ele esteja devidamente preenchido. Ja vi isso em uma infinidade de sites, e parece ser bem simples mas não tenho muito conhecimento em JavaScript ainda, por isso das formas que tentei não funcionou.  Tentei chamar a função do loading com onclick mas não funcionou, estava querendo que funcionasse no mínimo sem verificar se o form esta preenchido pois o principal seria que o usuário tivesse um feedback quando clicasse em enviar o form.
       
       
      -HTML COM PARTE DO FORM-
      <label for="questao5">5. Se possível, liste alguns sites que você gosta, incluindo as URLs.</label> <textarea name="questao5" id="questao5" required></textarea> <button class="btn" id="enviar" name="enviar" type="submit">Enviar</button> <label for="questao5">5. Se possível, liste alguns sites que você gosta, incluindo as URLs.</label> <textarea name="questao5" id="questao5" required></textarea> <button class="btn" id="enviar" name="enviar" type="submit">Enviar</button> -CSS DO PLUGIN-
      .pace { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .pace-inactive { display: none; } .pace .pace-progress { background: #8BB006; position: fixed; z-index: 2000; top: 0; right: 100%; width: 100%; height: 2px; } -JavaScript do plugin-
      Link GitHub
       
      -JavaScript do formulário-
      $('.formphp').on('submit', function() { var emailContato = "contato@tenshitech.com.br"; // Escreva aqui o seu e-mail var that = $(this), url = that.attr('action'), type = that.attr('method'), data = {}; that.find('[name]').each(function(index, value) { var that = $(this), name = that.attr('name'), value = that.val(); data[name] = value; }); $.ajax({ url: url, type: type, data: data, success: function(response) { if( $('[name="leaveblank"]').val().length != 0 ) { $('.formphp').html("<div id='form-erro'></div>"); $('#form-erro').html("<span>Falha no envio!</span><p>Você pode tentar novamente, ou enviar direto para o e-mail " + emailContato + " </p>") .hide() .fadeIn(1500, function() { $('#form-erro'); }); } else { $('.formphp').html("<div id='form-send'></div>"); $('#form-send').html("<span>Mensagem enviada!</span><p>Em breve eu entro em contato com você. Abraços.</p>") .hide() .fadeIn(1500, function() { $('#form-send'); }); }; }, error: function(response) { $('.formphp').html("<div id='form-erro'></div>"); $('#form-erro').html("<span>Falha no envio!</span><p>Você pode tentar novamente, ou enviar direto para o e-mail " + emailContato + " </p>") .hide() .fadeIn(1500, function() { $('#form-erro'); }); } }); return false; });  
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.