Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá amigos.
Tenho o seguinte campo:
<div class="form-group col-md-4 col-md-offset-1">
<label>Funcionário(a)</label>
<div class="input-group">
<select class="form-control form_input_recebe_foco" id="funcionario" name="funcionario" autofocus onkeypress="return handleEnter(this, event)">
<option value="">- Selecionar Funcionário(a) -</option>
<?php
$Sql = "SELECT .......";
$Resultado = @executa($Sql);
while ($linha = @pg_fetch_array($Resultado)){
$id_pessoa = $linha["id_pessoa"];
$pessoa_nome = $linha["nome"];
if ($funcionario == $id_pessoa){
echo "<option value='$id_pessoa' selected = 'selected'>$pessoa_nome</option>";}
else{
echo "<option value='$id_pessoa'>$pessoa_nome</option>";}
}
?>
</select>
<span class="input-group-addon"><a href="#" class="glyphicon glyphicon-user" data-toggle="modal" data-target="#modal_cad_pessoa" title="Clique aqui para cadastrar uma nova Pessoa!"></a></span>
</div>
</div>
Este campo está ok. Porém quando implemento o código a seguir, ***o campo diminui sua largura***:
<script type="text/javascript">
$(document).ready(function() {
$('#funcionario').select2();
});
</script>
Outro problema é quando reduzo o tamanho da tela, ele mantém o tamanho inicial, não apresentando responsividade.
O que faço para resolver o problema?Opa Danilo, obrigado pela força.
#funcionario é o id do campo:
<select class="form-control form_input_recebe_foco" id="funcionario" name="funcionario" autofocus onkeypress="return handleEnter(this, event)">Opa que isso :) !
Mas então....bom se o id #funcionario não tem nenhum estilo, Então vamos descartar. É que aqui o script eu acho que não funcionou.
Mas faz assim...sua página deve estar só no seu PC né?
Sim, a página está no PC.
Faz disso....
entra no navegador...e na página do formulário, clica em inspecionar elemento....
Daí vai abrir uma aba do lado da janela...daí você pode ir mexendo no código para descobrir de onde vem o problema....
Se fosse chutar, eu diria que é isso aqui é essa é a classe com problema: form_input_recebe_foco
O css original do boostrap você alterou ou criou um outro arquivo para personalizar?
Não alterei o css original. Criei um novo.
Vou verificar.
Retirei o form_input_recebe_foco , porém não houve alteração.
Estou utilizando os seguintes arquivos:
CSS:
<link rel="stylesheet" href="css/select2.css">
<link rel="stylesheet" href="css/select2-bootstrap.css">
JS:
<script type="text/javascript" src="js/select2.min.js"></script>
<script type="text/javascript" src="js/select2.js"></script>
Estão corretos? Versão dos arquivos influencia?Ow desculpa a demora....Eu estava na correria aqui....
Eu não entendi...porque você colocou 2 css select?
O "Form Control" você mecheu? Eu vou fazer um teste aqui. Eu vou salvar um arquivo e enviar...daí dá uma olhada se ele vai reagir como o seu, está bem?
Eu acho que ele está se adaptando certinho na página>> [http://www.superdanilof1page.com.br/teste](http://www.superdanilof1page.com.br/teste)
Pega o cód. do Boostrap original, troca por este que você está usando e dá uma olhada se isso vai acontecer.
O Cód que postei:
<div class="form-group col-md-4 col-md-offset-1">
<label>Funcionário(a)</label>
<div class="input-group">
<select class="form-control form_input_recebe_foco" id="funcionario" name="funcionario" autofocus onkeypress="return handleEnter(this, event)">
<option value="">- Selecionar Funcionário(a) -</option>
<option value="">- 2 -</option>
<option value="">-3 -</option>
<option value="">- 4 -</option>
</select>
Pega esse Boostrap novo: [https://v4-alpha.getbootstrap.com/](https://v4-alpha.getbootstrap.com/)Opa Danilo, tudo certo?
Retirei 1 css select2.
Retirei o form_input_recebe_foco, e nada mudou.
Pelo que percebi, seu código está funcionando, porém como um select normal e não como select2.
Estou usando o Bootstrap 3, posso usar versão 4 sem problemas.
Aguardo.É estranho porque aqui fica tudo normal! Você viu la o teste que te enviei?
Olá!
Eu acho que seu problema está no css.
Aqui com meu boostrap o campo responsivo funciona normalmente.
você alterou alguma coisa no boostrap?
Por acaso isso não é um estilo? #funcionario
Se sim pode ser a fonte do problema....
Seu site está já on line? Se sim manda o link para mim tentar ver se é isso mesmo :)