Discussion :

[chlock62]

Bonjour, je génère un formulaire de contact via symfony comme ci-dessous

Quand j'utilise la façon ci-dessous pour représenté mes champs j'ai un peut ecart de quelque pixel, je l'ai indiquer via une fléche rouge:



code de mon formualire dans ma vue

Code :

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

1
2
3
4
5
6
 
<div class="block_contact">
<p>{{ form_label(form.name, 'Nom :') }}
	{{ form_widget(form.name) }}
	</p>
</div>

mon css

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
.block_contact p label {
    display: inline-block;
    width: 100px;
    margin-right: 20px;
    vertical-align: top;
    text-align: right;
}
.block_contact p input,  textarea {
    /*déjà en inline-block*/
    width: 250px;
    padding: 4px;
    vertical-align: top;
}

et si j'utilise la mise en forme ci dessous

Code :

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

   {{ form_row( form_first.adrfacturation) }}

le html

Code :

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

1
2
3
4
5
6
 
<div class="bloc_fact bloc">
<div>
<label class="required" for="fos_user_profile_form_codeadrf">Code postal : </label>
<input id="fos_user_profile_form_codeadrf" type="text" required="required" name="fos_user_profile_form[codeadrf]">
</div>

et le css

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
.bloc div label {
    display: inline-block;
    width: 200px;
    margin-right: 20px;
    vertical-align: top;
    text-align: right;
}
.bloc div input,  textarea {
    /*déjà en inline-block*/
    width: 250px;
    padding: 4px;
    vertical-align: top;
}

aucune marge entre les deux élément label et input

Une idée les amis d'ou vien cette écart de pixel

merci

[dukoid]

peut être bien le padding: 4px de la ligne 12

fais joujou avec firebug, en mdifiant en live les paramètres.. tu va trouver

[chlock62]

non le padding de 4pxpour chaque coté, moi ausi je croyait et la marge intérieur du input, comme on le voit sur la premier photo

[chlock62]

Petite question concernant les input type submit, quand j'applique une taill a mon input type submit il me compte les padding gauche et droite dans la taille donné genre:

Code :

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

1
2
3
4
5
6
7
 
.block_contact input[type="submit"]{
 display:block;
 margin:auto;
 width:100px;
 
}

Voire les taille ci-dessous sur l'image


il me compte 15px de padding des deux coté plus 70pxde contenu que normalement 100 comme j'ai mis dans les css
Remarque pour mes autre input de type texte le contenu prend toujours les taille que je donne puis ajoute les paddings comme dans les régle normale

Une idée