Résolu

Problème taille input

Bonjour, Bonsoir,

Les champs de texte (inputs) de mon site dépassent toujours la taille maximale ( voir img )

Et cela fait au total 4h que je cherche la solution....

Code HTML :

<div class="container">
	<form class="form fakeform">
		<h1 class="title" text="size-lg center">Log in</h1>
		<div class="separator"></div>
		<div class="form fakeform">
			<input type="text" text="size-md" w="4/4">
		</div>
	</form>
</div>

Code CSS :

.form {
	background-color: rgba(255, 255, 255, 0.45);
	border-radius: 5px;
	margin: 20px;
	padding: 10px 0px 10px 0px;
}


.form input {
	padding: 10px;
	border: 1px solid black;
	border-radius: 0px;
}


.form input[type="text"] {
	border-radius: 5px;
}


.form input[type="submit"] {
	cursor: pointer;
}

/***********************/

*[w="4/4"] {
    width: 100%;
}

Merci d'avance de l'aide que vous m'apporterez ^^

Voir moins Voir plus

998 vues

30 novembre 2021 à 16:50

Cette pub permet au site de vivre ...

Compte-supprimé

Le 29 Décembre 2021 à 20:56 (Édité)

Re @Space001,

Au final j'ai utilisé bootstrap pour regarder le code source et non l'utiliser.

Et je me suis rendue compte de border-sizing: border-box; avec un width: 100%; est ça a résolu mon problème ^^.

Bonne continuation. 😁

Cette pub permet au site de vivre ...

14 commentaires

Space001

Le 30 décembre 2021 à 14:28

Re @CrafterHide,

Content que tu ais pu résoudre ton problème 😁

Bonne continuation à toi également 😉

Compte-supprimé

Le 29 décembre 2021 à 20:56 (Édité)

Re @Space001,

Au final j'ai utilisé bootstrap pour regarder le code source et non l'utiliser.

Et je me suis rendue compte de border-sizing: border-box; avec un width: 100%; est ça a résolu mon problème ^^.

Bonne continuation. 😁

Space001

Le 29 décembre 2021 à 18:48

Re @CrafterHide 😁

Pas de soucis 👌

Compte-supprimé

Le 29 décembre 2021 à 17:55

Re @Space001,

Désolé pour le temps, j'ai un problème de connexion chez moi et donc un retard des mails et je ne pensais plus à çà...

Ce que tu m'as proposé n'a toujours pas l'air de fonctionner...

Merci de l'aide que tu m'as proposée, mais du coup, j'ai de multiples problèmes à cause de mon css, donc je vais réutiliser le framework bootstrap..

Space001

Le 25 décembre 2021 à 16:10

Re @CrafterHide,

Nous n'avons pas eu de retour de ta part...

La solution que je t'ai proposé a-t-elle pu t'aider ? 🤔

Bonne journée à toi et bonnes fêtes 😎

Space001

Le 17 décembre 2021 à 14:19

Re @CrafterHide,

Je pense avoir trouvé la solution 👌

Modifie la propriété .form-input de ta feuille de style comme ceci :

.form input {
    margin-inline: -3px;
    border: 1px solid black;
    border-radius: 5px;
}

Dans l'attente de ton retour,

A très vite 😉

Compte-supprimé

Le 16 décembre 2021 à 9:10

Re @Space001,

À part FontAwesome pour les icons, je n'utilise aucun framework.

Merci encore pour ton aide.

Space001

Le 14 décembre 2021 à 15:00

Re @CrafterHide,

J'espère que le temps que j'ai mise pour répondre ne dérange pas beaucoup..

Non ne t'inquiète pas, aucun soucis 😉

Cela ne règle pas mon problème...

C'est étrange, j'ai pourtant tester sur codepen et ça avait l'air d'être good... 😕

Utilises-tu un framework qui pourrait éventuellement faire conflit (bootstrap ou autre...) ? 🤔

Compte-supprimé

Le 14 décembre 2021 à 14:53

Re @Space001,

Dans le css j'ai modifié la ligne dont tu me parlais et voici le résultat :

Cela ne règle pas mon problème...

J'espère que le temps que j'ai mise pour répondre ne dérange pas beaucoup.. 😅

Merci pour l'aide que tu me portes.

Space001

Le 02 décembre 2021 à 8:05

Re @CrafterHide,

Dans ta propriété CSS .form-input, modifie la ligne suivante :

.form input {
   padding: 0px;

Dis-moi si c'est good de ton coté 😉

Cette pub permet au site de vivre ...

Ce site utilise des cookies pour améliorer uniquement votre expérience utilisateur.

Vous pouvez lire à tout moment comment nous utilisons les cookies sur le site.

Utilisation des cookies

Accepter