Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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.
/applications/core/interface/imageproxy/imageproxy.php?img=http://4image.kgngames.com/img/81384955458.jpg&key=5997d8daf31b758f26f9e58644f9f93ef762842f5b5467f300e3ff9b6d8aebb5" alt="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
Carregando comentários...