0
Je construis un formulaire horizontal simple pour les informations de contact qui comprend une zone de texte pour les notes. Il y a une quantité importante d'espace vide à gauche de ma zone de texte dans laquelle je veux déplacer le bloc d'adresse. Je n'arrive pas à comprendre comment faire se chevaucher les groupes de formulaires, ou si c'est possible. J'ai essayé de mettre tous les champs et les champs d'adresse du téléphone 2 dans la même colonne et en utilisant <br> pour séparer les lignes, mais cela ne ressort pas vraiment. Voici le code et les captures d'écran appropriés de la façon dont les groupes de formulaires apparaissent. Tous les conseils seraient grandement appréciés.Comment faire pour que les groupes de formulaires se chevauchent?
<html>
<body>
<?php require_once ("includes/php/header.php"); ?>
<div class="container-fluid">
<form id="newContact" action="newContact.php" method="POST" class="form-horizontal">
<div class="form-group">
<div class="col-md-1 col-md-offset-1">
<label class="control-label">
Vendor
</label>
</div>
<div class="col-md-2">
<select name="vendID" class="form-control">
<option disabled selected value=""> - select a vendor - </option>
<?php
$result = vendorDB::getInstance()->vendorList();
while ($row= mysqli_fetch_array($result)):
?>
<option value="<?php echo $row["VEND_ID"];?>"><?php echo $row["VEND_NAME"];?></option>
<?php
endwhile;
mysqli_free_result($result);
?>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-1 col-md-offset-1">
<label class="control-label twoline-label">
First Name
</label>
</div>
<div class="col-md-2">
<input type="text" name="contFirst" class="form-control" />
</div>
<div class="col-md-1">
<label class="control-label twoline-label">
Last<br/>Name
</label>
</div>
<div class="col-md-2">
<input type="text" name="contLast" class="form-control" />
</div>
<div class="col-md-1">
<label class="control-label twoline-label">
E-mail Address
</label>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="email" name="contEmail" class="form-control" />
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-1 col-md-offset-1">
<label class="control-label" style="padding-top: 7px">
Phone 1
</label>
</div>
<div class="col-md-2">
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-phone-alt"></span>
<input type="text" name="contPhone1" class="form-control" placeholder="555-555-5555" />
</div>
</div>
<div class="col-md-1">
<select name="contPhone1Type" class="form-control">
</select>
</div>
<div class="col-md-1">
<label class="control-label">
Notes
</label>
</div>
</div>
<div class="form-group">
<div class="col-md-1 col-md-offset-1">
<label class="control-label" style="padding-top: 7px">
Phone 2
</label>
</div>
<div class="col-md-2">
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-phone-alt"></span>
<input type="text" name="contPhone2" class="form-control" placeholder="555-555-5555" />
</div>
</div>
<div class="col-md-1" >
<select name="contPhone2Type" class="form-control">
</select>
</div>
<div class="col-md-6">
<textarea form="newContact" name="contNote" class="form-control"
rows="11" style="resize: none" placeholder="(optional)"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-4 col-md-offset-1">
<label class="control-label">
Address
</label>
</div>
</div>
<div class="form-group">
<div class="col-md-4 col-md-offset-1">
<input type="text" name="contAddr1" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-md-4 col-md-offset-1">
<input type="text" name="contAddr2" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-1">
<label class="control-label">
City
</label>
</div>
<div class="col-md-1">
<label class="control-label">
State
</label>
</div>
<div class="col-md-2">
<label class="control-label">
ZIP
</label>
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-1">
<input type="text" name="contAddrCity" class="form-control" />
</div>
<div class="col-md-1">
<select name="contAddrState" class="form-control">
</select>
</div>
<div class="col-md-1">
<input type="text" name="contAddrZip" class="form-control" />
</div>
</div>
<div class="form-group">
</div>
<div class="form-group">
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-3">
<span class="icon-input-btn">
<span class="glyphicon glyphicon-ok"></span>
<input type="submit" class="form-control btn btn-primary" value="Save New Contact"/>
</span>
</div>
<div class="col-md-2 col-md-offset-3">
<span class="input-group-btn">
<span class="icon-input-btn">
<span class="glyphicon glyphicon-repeat"></span>
<input type="reset" class="form-control btn btn-default" value="Reset" />
</span>
</span>
</div>
</div>
</form>
</div>
</body>
First form-group of address block
CSS
td,
th{
text-align: left;
}
.nav-tabs{
margin-bottom: 20px;
}
.nav-tabs > li {
float: left;
margin-bottom: -1px;
}
.nav-tabs > li > a{
color: black;
border-top-color: #ccc;
border-right-color: #ccc;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
border-color: #ccc;
border-bottom-color: transparent;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year{
color: white;
background-color: black;
}
.navbar-inverse .navbar-nav > li > a {
color: #fff;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
color: #fff;
background-color: #6a6a6a;
}
.error{
color: #c00;
font-size: 125%;
}
.icon-input-btn{
display: inline-block;
position: relative;
}
.icon-input-btn input[type="submit"]{
padding-left: 2em;
}
.icon-input-btn input[type="reset"]{
padding-left: 2em;
}
.icon-input-btn .glyphicon{
display: inline-block;
position: absolute;
left: 0.65em;
top: 30%;
}
.tableheader{
border-color: black;
border-style: solid;
border-width: 0 1px 0 1px;
background-color: #D8D8D8;
font-weight: bold
}
.glyphicon{
top: 0px;
}
.form-horizontal .control-label{
display: inline-block;
vertical-align: middle;
float: none;
text-align: left;
padding-top: 0px;
}
.form-horizontal .controls {
display: inline-block;
margin-left: 20px;
}
Ajouter votre CSS. J'ai copié ton code et ça ne ressemble pas à l'image. – makshh
Oups! Désolé ... Ajouter maintenant. – Hleumas
Rien n'a changé. Je ne vois pas la classe 'form-horizontal' dans votre HTML. – makshh