Discussion :

[DjSadwell]

Bonjour,

Je voudrai décaller un peu les champs à remplir (inputs, selects, ...) à droite pour laisser place à des labels de colonne plus grande (et aligner les labels à gauche aussi), et coller les warning-signs à côté des champs (comme décrit sur l'image). J'ai essayé pas mal de configurations, mais rien ne fonctionne.

Très cordialement et merci beaucoup d'avance.

Image :

Fichier cshtml :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<div ng-app="SupportDemandeApp" ng-controller="SupportDemandeCtrl">
    <form class="form-horizontal" id="supportDemandeForm" name="supportDemandeForm" method="post" ng-submit="validationSupportDemande(supportDemandeForm.$valid)" novalidate>
	<fieldset>
		<legend><b>Données de la revue</b></legend>
 
		<div class="form-group" ng-class="{ 'has-error': supportDemandeForm.inputMontantGlobalAffaire.$touched && supportDemandeForm.inputMontantGlobalAffaire.$invalid }">
			<label for="inputMontantGlobalAffaire" class="col-lg-2 control-label">Montant global prévu de l'affaire (en K€)<span style="color:red"> *</span></label>
			<div class="col-lg-10">
				<input type="number" class="form-control" id="inputMontantGlobalAffaire" name="inputMontantGlobalAffaire" ng-model="inputMontantGlobalAffaire" ng-change="montantAnnuel()" pattern="[0-9]+(\\.[0-9][0-9]?)?" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Build + RUN + Infrastructure" required>
				<div class="help-block" ng-messages="supportDemandeForm.inputMontantGlobalAffaire.$error" ng-if="supportDemandeForm.inputMontantGlobalAffaire.$touched"><div ng-message="required">Champ requis</div></div>
			</div>
		</div>
 
		<div class="form-group" ng-class="{ 'has-error': supportDemandeForm.selectTypeContrat.$touched && supportDemandeForm.selectTypeContrat.$invalid }">
			<label for="selectTypeContrat" class="col-lg-2 control-label">Type de contrat (IS/OS)<span style="color:red"> *</span></label>
			<div class="col-lg-10">
				<select class="form-control" id="selectTypeContrat" name="selectTypeContrat" ng-model="selectedTypeContrat.type" ng-init="typeContrat()" ng-change="montantAnnuel()" ng-options="type for type in types" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Voir définitions dans l'onglet Type de contrat" required></select>
				<div class="help-block" ng-messages="supportDemandeForm.selectTypeContrat.$error" ng-if="supportDemandeForm.selectTypeContrat.$touched"><div ng-message="required">Champ requis</div></div>
			</div>
		</div>
 
 
		<div class="form-group has-warning has-feedback" ng-class="{ 'has-warning': !supportDemandeForm.selectTypeFacturation.$touched }">
			<label for="selectTypeFacturation" class="col-lg-2 control-label">Type de facturation</label>
			<div class="col-lg-10">
				<select class="form-control" id="selectTypeFacturation" name="selectTypeFacturation" ng-model="selectTypeFacturation">
					<option></option>
					<option>Régie</option>
					<option>Forfait</option>
					<option>Régie & Forfait</option>
				</select>
				<i class="glyphicon glyphicon-warning-sign form-control-feedback" ng-class="{ 'has-warning': !supportDemandeForm.selectTypeFacturation.$touched }" ng-if="!supportDemandeForm.selectTypeFacturation.$touched"></i>
			</div>
		</div>
 
		</fieldset>
 
	</form>
</div>

[NoSmoking]

Bonjour,
augmente la largeur de tes <label> et diminue celle des <input>.