Publicidade

Lisbi

Select option usando Dropkick desconfigurado no IE

Patrocínio:

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.  

 

0

Compartilhar este post


Link para o post
Compartilhar em outros sites

Postado (editado)

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

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

0

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

Valeu @Fabio Victor, exatamente isso cara! Ajustei a necessidade que eu precisava! Inclusive outros elementos tb.

Obg

0

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

  • Próximos Eventos

  • Conteúdo Similar

    • Por Lisbi
      Boa tarde
       
      Pessoa , estou com problemas em algumas telas , umas grandes, outras de tamanhos médios! Sei que isso se deve ao fato dos códigos se misturarem de acordo com a medida das telas!
      A pergunta é, tem como colocar um código pra tudo funcionar direitinho, pq o site é responsivo, mas desfigura em alguns monitores!
      Segue a baixo os codigos que estão até aqui!
       
       
      @media only screen and (max-width : 1024px) and (min-width : 600px) { .anuncios{ width:550px; margin-left:120px; } } @media only screen and (max-width : 1280px) and (min-height : 800px) { .anuncios{ width:1000px; margin-left:-17px; } } @media only screen and (max-width : 1440px) and (min-height : 899px) { .anuncios{ width:1000px; margin-left:45px; } #logo { width: 231px; height: 80px; margin-top: 15px; margin-left:30px; } nav { margin-top: 35px; margin-right:30px; } } @media only screen and (max-width : 1600px) and (min-height : 900px) { .anuncios{ width:1000px; margin-left:100px; } #logo { width: 231px; height: 80px; margin-top: 15px; margin-left:87px; } nav { margin-top: 35px; margin-right:87px; } } @media only screen and (max-width : 1680px) and (min-height : 1050px) { .anuncios{ width:1000px; margin-left:130px; } #logo { width: 231px; height: 80px; margin-top: 15px; margin-left:120px; } nav { margin-top: 35px; margin-right:120px; } } @media only screen and (max-width : 1920px) and (min-height : 1080px) { .anuncios{ width:1000px; margin-left:220px; } #logo { width: 231px; height: 80px; margin-top: 15px; margin-left:210px; } nav { margin-top: 35px; margin-right:210px; } } @media only screen and (min-width : 1920px) and (min-height : 1200px) { #logo { width: 231px; height: 80px; margin-top: 15px; margin-left:210px; } nav { margin-top: 35px; margin-right:210px; } .anuncios{ margin-left:225px; } } @media only screen and (min-device-width : 320px) and (max-device-width : 568px) { #logo { width: 231px; height: 80px; margin-top: 15px; margin-left:-10px; } nav { margin-top: 35px; margin-right:-10px; } .anuncios{ width:500px; margin-left:120px; } .formulario select { margin-top:20px; margin-bottom:20px; float:none; width: 180px; cursor: pointer; box-shadow: 0px 0px 10px rgba(0,0,0,0.4); font-weight: bold; color: rgb(29,119,162); height: 40px; white-space: nowrap; overflow: hidden; background-color: white; border: 1px solid #CCCCCC; font-size: 14px; text-align: center; color: rgb(29,119,162); -o-text-overflow: ellipsis; position: inherit; display: block; text-indent:20px; } .formulario{ margin-top:20px; margin-bottom:2opx; } }  
    • Por lucascuri1
      Estou desenvolvendo uma página de cadastro, e estou com problemas para posicionar o logo da página e os campos de formulário, queria que algum entendedor de CSS me explicasse a forma correta e mais fácil de se fazer essas duas coisas. Está como na primeira, e deve ficar como na segunda.
      HTML: 
      <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="css/reset.css"> <style> body { font-family: 'Open Sans', sans-serif; } #header { background-color: #e0e80d; } #header-logo { padding-left: 50px; padding-top: 50px; } #titulo { text-align: center; position: relative; bottom: 70px; font-size: 24px; } #content { margin-top: 30px; } #camposCadastro { width: 60%; margin: 0 auto; } #camposCadastro input { padding: 10px; width: 25%; border-style: none; box-shadow: 0px 0.5px #888888; } #enviar { margin-left: 43%; padding: 15px; background-color: #b4bb07; border-style: none; border-radius: 4px; width: 15%; height: 50px; color: white; box-shadow: 1px 1px 1px #888888; } #footer { background-color: #e0e80d; margin-top: 303px; padding: 50px; display: flex; justify-content: center; } </style> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> </head> <body> <div id="header"> <div id="header-logo"> <img src="img/logo.png"> <h4>Social Network</h4> </div> </div> <h1 id="titulo">Cadastro</h1> <div id="content"> <form id="formulario"> <div id="camposCadastro"> <p> <label for="nome">Nome:</label><input type="text" name="nome" id="nome" placeholder="Digite aqui seu nome"> <label for="sbnome">Sobrenome:</label><input type="text" name="sbnome" id="sbnome" placeholder="Digite aqui seu sobrenome"> </p> <p> <label for="email">E-mail:</label><input type="email" name="email" id="email" placeholder="Digite aqui seu email"> <label for="idade">Idade:</label><input type="number" name="idade" id="idade" placeholder="Digite aqui sua idade"> <label for="cpf">CPF:</label><input type="number" name="cpf" id="cpf" placeholder="Digite aqui seu CPF"> </p> <p> <label for="cep">CEP:</label><input type="number" name="cep" id="cep" placeholder="Digite aqui seu cep"> <label for="endereco">Endereço:</label><input type="text" name="endereco" id="endereco" placeholder="Digite aqui seu endereço"> <label for="senha">Senha:</label><input type="password" name="senha" id="senha" placeholder="Digite aqui sua senha"> </p> </div> <input type="submit" name="enviar" id="enviar" value="ENVIAR"> </form> <div id="footer"> <p>Projeto Realiza Digital © 2017</p> </div> </div> </body> </html>  
       
       
       
       


    • Por Leandro.Dias
      boa noite,
      faz algum tempo(muito tempo) que não programo em php e recentemente comecei a criar um projeto de site responsivo seguindo alguns tutoriais para me atualizar com as novas ferramentas.
      Acontece que depois de buscar um template no bootstrap e customiza-lo, criei um tema no wordpress para administra-lo. Ao desmembrar e chamar as partes atraves do bloginfo aparece uma lina de codigo impressa entre o final do </head> e o inicio do <header>..
      Criei um arquivo para gerenciar as paginas atravez da URL , nele contem um switch e na chamada do pagina em questão utilizo a chamada "bloginfo", ai que esta a me&#a! se utilizo "bloginfo_url" ele printa o caminho do site no servidor, se utilizo "bloginfo_diretory" ele printa o titulo da pagina.
      uma luz por favor, não consigo encontrar onde está essa chamada.