Je veux aligner tous les champs verticalement, exactement l'un en dessous de l'autre. Actuellement, tous les champs sont alignés au hasard.J'utilise bootstrap css La mise en page devrait ressembler à ceci:

Label1: Textbox1
Label2: Textbox2

Voici l'extrait de code: Quelle classe puis-je utiliser pour corriger l'alignement de la zone de texte? De l'aide?

<div ng-controller="headerCtrl">
    <div class="container" style="background-color:white">

        <h2 style="color:black; text-align:center" ><b>Timesheet Information</b></h2>


        <div class="panel-group" id="accordion">
            <div class="panel panel-default">
                <!--<div class="panel-heading">
                    <h4 class="panel-title" style="text-align: center">


                        <a>Add the Headers </a>
                    </h4>
                </div>-->

                <div class="panel-body">

                    <section>
                        <div class="row">
                            <div class="col-md-4 col-md-offset-4">
                                <form class="form-inline" style="">
                                    <div class="form-group" style="margin-left:-125px;">
                                        <label for="currentmonth">Total Work days in Current Month:</label>
                                    </div>
                                    <div class="form-group">
                                        <input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <br />

                        <div class="row">
                            <div class="col-md-4 col-md-offset-4">
                                <form class="form-inline" style="">
                                    <div class="form-group">
                                        <label for="annualeave" style="position:relative;left:-122px;">Annual Leave :</label>
                                    </div>
                                    <div class="form-group">
                                        &nbsp;<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <br />

                        <div class="row">
                            <div class="col-md-4 col-md-offset-4">
                                <form class="form-inline" style="">
                                    <div class="form-group">
                                        <label for="annualeave" style="position:relative;left:-140px;">Sick / Emergency Leave :</label>
                                    </div>
                                    <div class="form-group">
                                        <input type="text" class="form-control" id="sickleave" name="sickleave" ng-model="sickleave" placeholder="Enter the details" required>
                                    </div>
                                </form>
                            </div>
                        </div>


                        <br />

                        <div class="row">
                            <div class="col-md-4 col-md-offset-4">
                                <form class="form-inline" style="">
                                    <div class="form-group">
                                        <label for="annualeave" style="position:relative;left:-122px;">Total Leave in current month (Annual Leave + Sick / Emergency Leave) :</label>
                                    </div>
                                    <div class="form-group">
                                        &nbsp;<input type="text" class="form-control" id="leave" name="leave" ng-model="leave" placeholder="Enter the details" required>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <br />

                        <div class="row">
                            <div class="col-md-4 col-md-offset-4">
                                <form class="form-inline" style="">
                                    <div class="form-group">
                                        <label for="annualeave" style="position:relative;left:-122px;">Total leaves from joining in FG until Previous Month 2016 (excluding Current Month 2016 ) :</label>
                                    </div>
                                    <div class="form-group">
                                        &nbsp;<input type="text" class="form-control" id="leave1" name="leave1" ng-model="leave1" placeholder="Enter the details" required>
                                    </div>
                                </form>
                            </div>
                        </div>


                        <br />

                        <div class="row">
                            <div class="col-md-4 col-md-offset-4">
                                <form class="form-inline" style="">
                                    <div class="form-group">
                                        <label for="annualeave" style="position:relative;left:-122px;">Month your name was added in Field Glass :</label>
                                    </div>
                                    <div class="form-group">
                                        &nbsp;<input type="text" class="form-control" id="field" name="field" ng-model="field" placeholder="Enter the details" required>
                                    </div>
                                </form>
                            </div>
                        </div>

                    </section>



                        <div class="pull-right">

                            <button type="submit" class="btn btn-primary" ng-click="Save()">Submit</button>

                            <button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>

                        </div>






                    </div>
            </div>

        </div>
        <div>

        </div>
    </div>

</div>
3
beginner 25 janv. 2017 à 08:06

4 réponses

Meilleure réponse

Utilisez ce code, tous les champs sont alignés. J'ai supprimé tous vos styles en ligne, il n'y a pas besoin de chaque style de champ, vous pouvez le faire avec des classes bootstrap, pas précipiter le code.

<div ng-controller="headerCtrl">
<div class="container" style="background-color:white">
    <h2 style="color:black; text-align:center"><b>Timesheet Information</b></h2>
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-body">
                <section>
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2">
                            <div class="form-horizontal">
                                <div class="form-group">
                                    <label class="col-sm-6 control-label" for="currentmonth">Total Work days in Current Month:</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required/> </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-6 control-label" for="annualeave">Annual Leave :</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required> </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-6 control-label" for="annualeave">Sick / Emergency Leave :</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="sickleave" name="sickleave" ng-model="sickleave" placeholder="Enter the details" required/> </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-6 control-label" for="annualeave">Total Leave in current month (Annual Leave + Sick / Emergency Leave) :</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="leave" name="leave" ng-model="leave" placeholder="Enter the details" required/> </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-6 control-label" for="annualeave">Total leaves from joining in FG until Previous Month 2016 (excluding Current Month 2016):</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="leave1" name="leave1" ng-model="leave1" placeholder="Enter the details" required/> </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-6 control-label" for="annualeave">Month your name was added in Field Glass :</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="field" name="field" ng-model="field" placeholder="Enter the details" required/> </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-6 control-label"></label>
                                    <div class="col-sm-6 text-right">
                                        <button type="submit" class="btn btn-primary" ng-click="Save()">Submit</button>
                                        <button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
</div>
2
Aiyoub Amini 7 juin 2017 à 04:41

Ajouter la classe form-inline à l'élément form exemple:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Vertical (basic) form</h2>
  <form class="form-inline">
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
    <div class="checkbox">
      <label><input type="checkbox"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>

</body>
</html>

Référence: http://www.w3schools.com/bootstrap/bootstrap_forms.asp

0
Aiyoub Amini 25 janv. 2017 à 05:25

Vos étiquettes sont trop longues, je viens de changer la structure avec alignement au centre, est-ce ce dont vous avez besoin?

.form-group {
	width:50%;
	float:left;
	padding:0 15px;
}
.form-group input {
	float:left;
}
.form-group label {
	float:right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div ng-controller="headerCtrl">
  <div class="container" style="background-color:white">
    <h2 style="color:black; text-align:center" ><b>Timesheet Information</b></h2>
    <div class="panel-group" id="accordion">
      <div class="panel panel-default"> 
        <!--<div class="panel-heading">
                    <h4 class="panel-title" style="text-align: center">


                        <a>Add the Headers </a>
                    </h4>
                </div>-->
        
        <div class="panel-body">
          <section>
            <div class="row">
              <div class="col-xs-12">
                <form class="form-inline" style="">
                  <div class="form-group" >
                    <label for="currentmonth">Total Work days in Current Month:</label>
                  </div>
                  <div class="form-group">
                    <input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
                  </div>
                </form>
              </div>
            </div>
            <br />
            <div class="row">
              <div class="col-xs-12">
                <form class="form-inline" style="">
                  <div class="form-group">
                    <label for="annualeave" >Annual Leave :</label>
                  </div>
                  <div class="form-group"> &nbsp;
                    <input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
                  </div>
                </form>
              </div>
            </div>
            <br />
            <div class="row">
              <div class="col-xs-12">
                <form class="form-inline" style="">
                  <div class="form-group">
                    <label for="annualeave">Sick / Emergency Leave :</label>
                  </div>
                  <div class="form-group">
                    <input type="text" class="form-control" id="sickleave" name="sickleave" ng-model="sickleave" placeholder="Enter the details" required>
                  </div>
                </form>
              </div>
            </div>
            <br />
            <div class="row">
              <div class="col-xs-12">
                <form class="form-inline" style="">
                  <div class="form-group">
                    <label for="annualeave" >Total Leave in current month (Annual Leave + Sick / Emergency Leave) :</label>
                  </div>
                  <div class="form-group"> &nbsp;
                    <input type="text" class="form-control" id="leave" name="leave" ng-model="leave" placeholder="Enter the details" required>
                  </div>
                </form>
              </div>
            </div>
            <br />
            <div class="row">
              <div class="col-xs-12">
                <form class="form-inline" style="">
                  <div class="form-group">
                    <label for="annualeave" >Total leaves from joining in FG until Previous Month 2016 (excluding Current Month 2016 ) :</label>
                  </div>
                  <div class="form-group"> &nbsp;
                    <input type="text" class="form-control" id="leave1" name="leave1" ng-model="leave1" placeholder="Enter the details" required>
                  </div>
                </form>
              </div>
            </div>
            <br />
            <div class="row">
              <div class="col-xs-12">
                <form class="form-inline" style="">
                  <div class="form-group">
                    <label for="annualeave" >Month your name was added in Field Glass :</label>
                  </div>
                  <div class="form-group"> &nbsp;
                    <input type="text" class="form-control" id="field" name="field" ng-model="field" placeholder="Enter the details" required>
                  </div>
                </form>
              </div>
            </div>
          </section>
          <div class="pull-right">
            <button type="submit" class="btn btn-primary" ng-click="Save()">Submit</button>
            <button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
          </div>
        </div>
      </div>
    </div>
    <div> </div>
  </div>
</div>
4
Jishnu V S 25 janv. 2017 à 05:22

Retirer le

Form-inline

Classe de

Formulaire

Étiquette.

0
Kaleem 25 janv. 2017 à 05:11