Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

JAAFSANTOS

Alterar tamanho do campo com jquery

Por , em Javascript

Recommended Posts

JAAFSANTOS    0

JAAFSANTOS
Postado

Boa tarde pessoal, eu gostaria de mais uma ajuda de vocês, no caso eu estou desenvolvendo um projeto em HTML e estou usando também dos recursos do Bootstrap, acontece que eu tive que usar em meu projeto alguns select, daí a minha duvida começa pois eu queria que os mesmo também ficasse no estilo do Bootstrap, daí eu encontrei na internet um exemplo, onde faz uso desses recursos segue o link https://github.com/danielfarrell/bootstrap-combobox mais devido a estrutura do meu HTML, o meu select fica mal dimensionado devido ao span adicionado a frente do meu campo, segue abaixo uma imagem ilustrando.

 

81384955458.jpg

 

Abaixo também segue o fonte do exemplo acima.

 


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>People</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Styles -->
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/bootstrap-combobox.css" rel="stylesheet">

  </head>

  <body>

  <div class="container">
	<br><h1>Example<h1><br>
	  <form>
	  	<div class="row-fluid span12">
	  		<div class="row-fluid">
            	<div class="span6">
                	<div id="namePeople" class="control-group">
                		<input type="text" name="name" id="name" placeholder="Name" class="span12">
                    </div>
               	</div>
               	<div class="span3">
                	<div id="birthDate" class="control-group">
                 		<input type="text" name="date" id="date" class="span12" placeholder="dd/mm/aaaa" onkeypress="return PermiteSomenteNumeros(event);" onkeydown="formataData(event);" onKeyup="return autoTab(this, 10, event);">                                                                          
                   	</div>
                </div>
              	<div class="span3">
                	<div id="maritalStatus" class="control-group">
                		<select class="span12">
              				<option value="">Select</option>
  							<option value="Single">Single</option>
  							<option value="Married">Married</option>
  							<option value="Separate">Separate</option>
  							<option value="Divorced">Divorced</option>
  							<option value="Widower">Widower</option>
						</select>
                   	</div>                                                                    
               	</div>
         	</div>
         	<div class="row-fluid">
            	<div class="span4">
                	<div id="address" class="control-group">
                		<input type="text" name="address" id="addressPeople" placeholder="Address" class="span12">
                    </div>
               	</div>
               	<div class="span2">
                	<div id="number" class="control-group">
                		<input type="text" name="number" id="numberPeople" placeholder="Number" class="span12">
                	</div>
                </div>
              	<div class="span3">
                	<div id="city" class="control-group">
                		<input type="text" name="cityPeople" id="cityPeople" placeholder="City" class="span12">
                   	</div>                                                                    
               	</div>
              	<div class="span3">
                	<div id="country" class="control-group">
                		<input type="text" name="countryPeople" id="countryPeople" placeholder="Country" class="span12">
                   	</div>                                                                    
               	</div>
         	</div>
	  	</div>
	  </form>

	<br>
	<br><h1>Error ( using Bootstrap Combobox)<h1><br>
	  <form>
	  	<div class="row-fluid span12">
	  		<div class="row-fluid">
            	<div class="span6">
                	<div id="errorPeople" class="control-group">
                		<input type="text" name="name" id="errorName" placeholder="Name" class="span12">
                    </div>
               	</div>
               	<div class="span3">
                	<div id="birthDateError" class="control-group">
                 		<input type="text" name="date" id="errorDate" class="span12" placeholder="dd/mm/aaaa" onkeypress="return PermiteSomenteNumeros(event);" onkeydown="formataData(event);" onKeyup="return autoTab(this, 10, event);">                                                                          
                   	</div>
                </div>
              	<div class="span3">
                	<div id="maritalStatusError" class="control-group">
                		<select class="combobox span12">
              				<option value="">Select</option>
  							<option value="Single">Single</option>
  							<option value="Married">Married</option>
  							<option value="Separate">Separate</option>
  							<option value="Divorced">Divorced</option>
  							<option value="Widower">Widower</option>
						</select>
                   	</div>                                                                    
               	</div>
         	</div>
         	<div class="row-fluid">
            	<div class="span4">
                	<div id="errorAddress" class="control-group">
                		<input type="text" name="address" id="errorAddressPeople" placeholder="Address" class="span12">
                    </div>
               	</div>
               	<div class="span2">
                	<div id="errorNumber" class="control-group">
                		<input type="text" name="number" id="errorNumberPeople" placeholder="Number" class="span12">
                	</div>
                </div>
              	<div class="span3">
                	<div id="errorCity" class="control-group">
                		<input type="text" name="cityPeople" id="errorCityPeople" placeholder="City" class="span12">
                   	</div>                                                                    
               	</div>
              	<div class="span3">
                	<div id="errorCountry" class="control-group">
                		<input type="text" name="countryPeople" id="errorCountryPeople" placeholder="Country" class="span12">
                   	</div>                                                                    
               	</div>
         	</div>
	  	</div>
	  </form>

  </div>

    <!-- Javascript
    ================================================== -->

    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/bootstrap.js"></script>
    <script src="assets/js/bootstrap-combobox.js"></script>
    <script src="assets/js/main.js"></script>
    <script src="assets/js/masks.js"></script>

  </body>
</html>

 

O que eu pensei em fazer é assim que a página fosse carregada eu obter através da jquery a largura do meu elemento select e depois extrair 14px que foi o que eu observei que a minha classe combobox atribui a um elemento span colocado a frente do meu elemento select, porém eu não estou conseguindo fazer isso, alguém poderia me ajudar? como eu faço para diminuir o tamanho do meu elemento?

 

 

Segue no link o projeto que eu criei para exemplificar... https://mega.co.nz/#!kJxUQJ6D!DXVrDD3aKuFF3Ir8beaLvVgyuHIB2H7NetXE6TEikB0

 

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

casipe    10

casipe
Postado

Não sei se entendi muito bem o que deseja, mas para mudar a lagura com jQuery, insira isso no seu js:

$('#campo').css('width', '400px');

 

Ou coloque assim para iniciar automaticamente:

$(function(){
	$('#campo').css('width', '400px');
});

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito