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

Oi

 

Você podia tentar fazer o CSS para a resolução do celular primeiro e deixava responsivo para as outras resoluções como desktop, TV e Tablet   

 

 

Editado por Giovani
Imagens desnecessárias retiradas do post
  • +1 1

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
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  .formulario select {
      position: inherit;
      display: block;
  }
}

Dessa forma isso vai aparecer apenas em telas menores que 480px, acho que resolve seu problema.

  • +1 1

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 mag_souza
      Oi pessoal, 
       
      Eu tenho o código abaixo onde o usuário efetua o cadastro e ao apertar enviar deve salvar as informações no banco de dados e prosseguir para a próxima página, porém apenas salva no banco e retorna pra mesma página e pelo que ja pesquisei o "?act=save" é o que esta fazendo continuar na mesma página ou não, posso estar errada, ja tentei mudar usar href ou header mas não acontece nada, poderiam me ajudar ?
       
      <?php
       
      if ($_SERVER['REQUEST_METHOD'] == 'POST') {
          $id = (isset($_POST["id"]) && $_POST["id"] != null) ? $_POST["id"] : "";
           $nome = $_POST['nome'];
           $email = $_POST['email'];
           $dtnascimento= $_POST['data_nascimento'];
           $d_for = explode('/', $dtnascimento); 
           $dia = $d_for[0]; 
           $mes = $d_for[1]; 
           $ano = $d_for[2]; 
           $dtnascimento = $ano."-".$mes."-".$dia;
           $cpf = $_POST['cpf'];
           $rg = $_POST['rg'];
           $telefone = $_POST['telefone'];
      } else if (!isset($id)) {
          // Se não se não foi setado nenhum valor para variável $id
          $id = (isset($_GET["id"]) && $_GET["id"] != null) ? $_GET["id"] : "";
          $nome = NULL;
          $email = NULL;
          $dtnascimento = NULL;
          $cpf = NULL;
          $rg = NULL;
          $telefone = NULL;
      }

      try {
          $conexao = new PDO("mysql:host=localhost; dbname=navj2", "root", "");
          $conexao->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
          $conexao->exec("set names utf8");
      } catch (PDOException $erro) {
          echo "Erro na conexão:" . $erro->getMessage();
      }
             
             if (isset($_REQUEST["act"]) && $_REQUEST["act"] == "save" && $nome != "") {
          try {
              $stmt = $conexao->prepare("INSERT INTO passageiros (nome, email, data_nascimento, cpf, rg, telefone) 
        VALUES (?, ?, ?, ?, ?, ?)");

               $stmt->bindParam(1, $nome);
              $stmt->bindParam(2, $email);
              $stmt->bindParam(3, $dtnascimento);
              $stmt->bindParam(4, $cpf);
              $stmt->bindParam(5, $rg);
              $stmt->bindParam(6, $telefone);
              if ($stmt->execute()) {
                  if ($stmt->rowCount() > 0) {
                   
                  
                      $id = null;
                      $nome = NULL;
                      $email = NULL;
                      $dtnascimento = NULL;
                      $cpf = NULL;
                      $rg = NULL;
                      $telefone = NULL;
                      
                  } else {
                      echo "Erro ao tentar efetivar cadastro";
                  }
              } else {
                     throw new PDOException("Erro: Não foi possível executar a declaração sql");
              
          }
           } catch (PDOException $erro) {
              echo "Erro: " . $erro->getMessage();
          }
         }
      ?>
       
               <div class="box"> 
               <form action="?act=save" method="POST" name="form1" >
                <h1>Dados do Passageiro</h1>
                
                <input type="hidden" name="id" <?php
                  // Preenche o id no campo id com um valor "value"
                  if (isset($id) && $id != null || $id != "") {
                      echo "value=\"{$id}\"";
                  }
                  ?> />
                <label>
                  <center><span> Nome Completo </span></center>
                <input type="text" class="input_text" name="nome" <?php
                  // Preenche o nome no campo nome com um valor "value"
                  if (isset($nome) && $nome != null || $nome != ""){
                      echo "value=\"{$nome}\"";
                  }
                  ?> />
              </label>
                <label> 
                  <center><span>E-mail</span></center>
                 <input type="text" class="input_text" name="email" <?php
                  // Preenche o email no campo email com um valor "value"
                  if (isset($email) && $email != null || $email != ""){
                      echo "value=\"{$email}\"";
                  }
                  ?> /></label>
                  <label>            
                 <center><span> Data de Nascimento </span></center>
                <input onkeypress="MascaraData(this);" maxlength="10"  type="text" class="input_text" name="data_nascimento" <?php
                  // Preenche o nome no campo nome com um valor "value"
                  if (isset($dtnascimento) && $dtnascimento != null || $dtnascimento != ""){
                      echo "value=\"{$dtnascimento}\"";
                  }
                  ?> />
              </label>
                <label >
                  <center><span>Cpf</span></center>
                <input onkeypress="Cpf(this);" maxlength="14" type="text" class="input_text" name="cpf" <?php
                  // Preenche o cpf no campo cpf com um valor "value"
                  if (isset($cpf) && $cpf != null || $cpf != ""){
                      echo "value=\"{$cpf}\"";
                  }
                  ?> />
              </label>
      <label>
                 <center><span>Rg</span></center>
                <input type="text" class="input_text" name="rg" <?php
                  // Preenche o cpf no campo cpf com um valor "value"
                  if (isset($rg) && $rg != null || $rg != ""){
                      echo "value=\"{$rg}\"";
                  }
                  ?> />
      </label>
               <label>
                  <center><span>Telefone</span></center>   
                     <input onkeypress="Telefone(this);" maxlength="13" type="text" class="input_text" name="telefone" <?php
                  // Preenche o celular no campo celular com um valor "value"
                  if (isset($telefone) && $telefone != null || $telefone != ""){
                      echo "value=\"{$telefone}\"";
                  }
                  ?> />
                 
                 <br>
                 <br>
                 <br>
                <input type="submit" class="button" value="Enviar" />
               </label>
           
             </form>
         </div>
          <br>
          <br>
          <br>
       
    • Por Kleisson Azevedo
      bom dia galera. seguinte, preciso fazer um formulário mais ou menos assim...
      ao selecionar o estado me mostrar as cidades daquele estado..
      as tabelas no banco esta todas prontas.. as cidades e os estados tem uma ligação, que é o estado_id (nome da linha da tabela)
      ou seja, o estado tem um estado_id e todas as cidades tambpem tem um estado_id.
      estou perdido, desde já, obrigado!
    • Por MarcosxEduardo
      Olá. Alguém por favor pode me ajudar nisso.
      Esse código a seguir vai fazer que ao usuário colocar um link de exemplo "www.exemplo.com/ABC42" os números e letras depois da "/" vai aparecer logo abaixo quando clicar no botão.
      Gostaria de que alguém soubesse fazer o seguinte.
       
      Ao colocar um link no primeiro campo, automaticamente vai abrir outro campo embaixo, e ao preencher o segundo campo vai abrir o terceiro campo, e quando o terceiro campo for preenchido vai aparecer o botão pra gerar o link.
       
      <html> <head> <title>ABC</title> </head> <body> <input id="url" size="60"></input> <button id ="btn" onclick=change()>Gerar Link</button> <br> <div id="res"></div> </body> <script> function change() { var url = document.getElementById("url").value; var resDiv = document.getElementById("res"); var i = url.lastIndexOf("/"); if (i < 0) { return; } var beg = url.substring(0, i); var last = url.substring(i + 1, url.length); if (last == "" || last == null) { i = beg.lastIndexOf("/"); if (i < 0) { return; } last = beg.substring(i + 1, beg.length); } resDiv.innerHTML = "http://tuga.com="+last; } </script> </html>  
    • Por Luccas Gaulia
      Ola Pessoal,
       
       
      Seguinte, eu tenho um campo (input) que quando passo o mouse, ele sobe o "nome" do input. Até funciona corretamenta... Quando utilizo type="text" funciona corretamente pois ele considera tudo valido a partir de qualquer preenchimento...
      Agora, quando utilizo por exemplo type="email", e não preencho com aa@a., e saiu antes de colocar um email valido, o nome de cima some... ae vêem minha luta desde terça feira...
       
      .se-form-element input:valid + label { top: -40px; color: black; font-size: 10px; } Assim, ele funciona corretamente quando valido...
       
      Agora.... quando esta invalido porém ainda preencheu, é isso que preciso resolver...
       
      Segue o link para visualizar melhor (preencha um email invalido e saia do campo): Exemplo
    • Por uninerds
      Olá pessoal, estamos criando algumas vídeo aulas de programação em HTML5 e CSS e gostaríamos que vocês dessem críticas e sugestões do que podemos estar fazendo para melhorar
      Segue o link da playlist com 12 vídeos de HTML5
      https://www.youtube.com/playlist?list=PLi3qhjm7dbeeC5h0NDfUiRqEvE0v08Pdd
       
      1 - O que é HTML, CSS e JavaScript?
      Neste vídeo é explicado o que é HTML, CSS e JavaScript e porque é necessário conhecer estas 3 linguagens para programar para Web
       
      2 - Programas necessários
      Neste vídeo é mostrado os programas necessários para começar a programar (estamos fazendo as vídeo aulas no sistema operacional Xubuntu)
       
      3 - Primeiro HTML5 | Tutorial de HTML5 | #01
      Neste vídeo começamos a mostrar de fato como começar a programar em HTML e como fazer para validar o código
       
      4 - Hierarquia de títulos e linha horizontal | Tutorial de HTML5 | #02
      Neste vídeo é explicado como fazer hierarquia de títulos e colocar linha horizontal
      Tags: h1 até h6 e hr
       
      5 - Parágrafo, quebra de linha e texto pré-formatado | Tutorial de HTML5 | #03
      Neste vídeo é explicado como fazer parágrafo, quebra de linha e texto pré-formatado
      Tags: p, br e pre
       
      6 - Formatação de texto | Tutorial de HTML5 | #04
      Neste vídeo é explicado como fazer formatação de texto
      Tags: b, strong, i, em, mark, small, sub, sup, ins e del
      Atributos: cite e datetime das tags ins e del
       
      7 - Citações | Tutorial de HTML5 | #05
      Neste vídeo é explicado como fazer citações
      Tags: q, blockquote, cite, address, abbr e bdo
      Atributos: title da tag abbr, dir da tag bdo e cite das tags q e blockquote
       
      8 - Comentários e comentários condicionais | Tutorial de HTML5 | #06
      Neste vídeo é explicado como fazer comentário e para que serve
       
      9 - Arquivo Externo | Tutorial de HTML5 | #07
      Neste vídeo é explicado como fazer referência de arquivo externo no HTML
       
      10 - Links - Parte 1 | Tutorial de HTML5 | #08
      Neste vídeo é explicado como fazer links para abrir outros HTML, enviar e-mail, executar JavaScript e direcionar para um local específico
      Tag: a
      Atributos: href, hreflang e type
       
      11 - Links - Parte 2 | Tutorial de HTML5 | #09
      Neste vídeo é explicado como criar links para download, diferentes formas de abrir no navegador e vulnerabilidade do target="_blank"
      Tag: a
      Atributos: download e target
      Valores para o target: _self, _blank, _top e _parent
       
      12 - Links - Parte 3| Tutorial de HTML5 | #10
      Neste vídeo é explicado como resolver vulnerabilidade do target="_blank" e o atributo rel
      Tag: a
      Atributo: rel
      Valores para o rel: alternate, author, bookmark, prev, next, external, help, license, search, tag, nofollow, noreferrer, noopener
       
      Segue o link da playlist com 4 vídeos de CSS
      https://www.youtube.com/playlist?list=PLi3qhjm7dbedkcSwqOrGYHD_E_0H7Nopj
       
      1 - O que é HTML, CSS e JavaScript?
      Neste vídeo é explicado o que é HTML, CSS e JavaScript e porque é necessário conhecer estas 3 linguagens para programar para Web
       
      2 - Programas necessários
      Neste vídeo é mostrado os programas necessários para começar a programar (estamos fazendo as vídeo aulas no sistema operacional Xubuntu)
       
      3 - Primeiro CSS | Tutorial de CSS | #01
      Neste vídeo é mostrado como fazer a integração entre HTML e CSS
       
      4 - Cores | Tutorial de CSS | #02
      Neste vídeo é mostrado como definir cor por nome, hexadecimal, RGB, HSL, RGBA e HSLA
       
      PS:
      - Como temos nossos serviços seculares que é como conseguimos o sustento não teremos como responder todos os comentários de imediato, mas de qualquer forma agradecemos desde já a ajuda
      - Sempre que fizermos vídeo novo atualizaremos este tópico
×

Informação importante

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

Este projeto é mantido e patrocinado pelas empresas:
Hospedado por: