jquery - icon - input-group-addon con bootstrap-select
input icon bootstrap (3)
Traté de usar Label 2 con bootstrap-select , pero se ve diferente al bootstrap ( Label 1 ) uno. ¿Cómo es posible que las dos etiquetas en el código siguiente se vean igual?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" >
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css">
<link href="http://getbootstrap.com/examples/non-responsive/non-responsive.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">Labe 1</span>
<input type="text" class="form-control" name="snpid" placeholder="Test">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">GO!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div>
<BR/>
<HR>
<div class="container">
<form class="form-inline">
<div class="form-group">
<span class="input-group-addon">Label 2</span>
</div>
<div class="form-group">
<select id="lunch" class="selectpicker" data-live-search="true" title="Please select a lunch ...">
<option>Hot Dog, Fries and a Soda</option>
<option>Burger, Shake and a Smile</option>
<option>Sugar, Spice and all things nice</option>
<option>Baby Back Ribs</option>
<option>A really really long option made to illustrate an issue with the live search in an inline form</option>
</select>
</div>
</form>
<div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script>
<script>
$(''.selectpicker'').selectpicker();
</script>
</body>
</html>
Acabo de encontrar una manera fácil de incluir complementos con select (sin bootstrap-select). Esta respuesta puede no estar estrictamente relacionada con la pregunta de selección del programa de arranque, pero podría ser útil para alguien que aterrice aquí buscando esta respuesta (como lo hice yo). Simplemente muevo la selección debajo del complemento, con margen: -4px, y agrego 4 píxeles al ancho como este
.input-group select.form-control {
margin-left: -4px;
width: calc(100% + 4px);
}
y luego establezco una posición relativa e índice z para el complemento, así:
.input-group .input-group-addon {
z-index: 5;
position: relative;
}
espero que esto ayude
De los getbootstrap.com/components/#input-groups Bootstrap:
Extienda los controles de formulario al agregar texto o botones antes, después o en ambos lados de cualquier
<input>basada en texto. Utilice.input-groupcon.input-group-addono.input-group-btnpara anteponer o anexar elementos a un solo.form-control.
.input-group-addon envolver el select y .input-group-addon en un .input-group :
<div class="input-group">
<span class="input-group-addon">Label 2</span>
<select id="lunch" class="selectpicker form-control" data-live-search="true" title="Please select a lunch ...">
<option>Hot Dog, Fries and a Soda</option>
<option>Burger, Shake and a Smile</option>
<option>Sugar, Spice and all things nice</option>
<option>Baby Back Ribs</option>
<option>A really really long option made to illustrate an issue with the live search in an inline form</option>
</select>
</div>
Echale un vistazo:
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="container">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">Labe 1</span>
<input type="text" class="form-control" name="snpid" placeholder="Test">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">GO!</button>
</span>
</div>
</div>
<br>
<hr>
<div class="container">
<form class="form-inline">
<div class="input-group">
<span class="input-group-addon">Label 2</span>
<select id="lunch" class="selectpicker form-control" data-live-search="true" title="Please select a lunch ...">
<option>Hot Dog, Fries and a Soda</option>
<option>Burger, Shake and a Smile</option>
<option>Sugar, Spice and all things nice</option>
<option>Baby Back Ribs</option>
<option>A really really long option made to illustrate an issue with the live search in an inline form</option>
</select>
</div>
</form>
</div>
</div>
He modificado la solución de Caeth con CSS adicional para garantizar que el botón de selección se redondee en sus respectivas esquinas.
HTML
<form class="form-inline">
<div class="input-group">
<span class="input-group-addon">Label</span>
<select id="lunch" class="selectpicker form-control" data-live-search="true" title="Please select a lunch ...">
<option>Hot Dog, Fries, and a Soda</option>
<option>Burger, Shake, and a Smile</option>
<option>Sugar, Spice, and all things nice</option>
<option>Baby Back Ribs</option>
<option>A really really long option made to illustrate an issue with the live search in an inline form</option>
</select>
</div>
</form>
CSS
.input-group > .input-group-btn:last-child > .selectpicker {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.input-group > .input-group-btn:first-child > .selectpicker {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
Véalo aquí: http://jsfiddle.net/xr4uofje/130/