[Résolu] Problème de CSS avec JQUERY par ajja17r - page 1

Bonjour,

J'ai créé un formulaire à l'aide de JQUERY. Tout fonctionne parfaitement !

Cependant, j'ai un soucis avec le côté visuel.

Avant modif ça donne ça :

Après modif, j'ai ça :

Quelqu'un peut m'aider à résoudre ce petit truc de rien du tout ?

CI après mon code HTML et CSS

[...]
<head>
<link href="style/jquery-ui.css" rel="stylesheet">
</head>

[...]

<h2 class="demoHeaders">Quantité de base finale souhaitée (en ml)</h2>
    <input id="base_finale" type="number" min="0" value="100">
    <label for="base_finale">ml de base finale</label>
  </p>

[...]

<script>
//Affichage ml base finale
$( "#base_finale" ).spinner();
</script>

Et pour CSS :

Spinner specific style fixes */
.ui-controlgroup-vertical .ui-spinner-input {

	/* Support: IE8 only, Android < 4.4 only */
	width: 75%;
	width: calc( 100% - 2.4em );
}
.ui-controlgroup-vertical .ui-spinner .ui-spinner-up {
	border-top-style: solid;

[...]

.ui-spinner {
	position: relative;
	display: inline-block;
	overflow: hidden;
	padding: 0;
	vertical-align: middle;
}
.ui-spinner-input {
	border: none;
	background: none;
	color: inherit;
	padding: .222em 0;
	margin: .2em 0;
	vertical-align: middle;
	margin-left: .4em;
	margin-right: 2em;
}
.ui-spinner-button {
	width: 1.6em;
	height: 50%;
	font-size: .5em;
	padding: 0;
	margin: 0;
	text-align: center;
	position: absolute;
	cursor: default;
	display: block;
	overflow: hidden;
	right: 0;
}
/* more specificity required here to override default borders */
.ui-spinner a.ui-spinner-button {
	border-top-style: none;
	border-bottom-style: none;
	border-right-style: none;
}
.ui-spinner-up {
	top: 0;
}
.ui-spinner-down {
	bottom: 0;

Le fichier CSS est le fichier au thème UI-DARKNESS de JQUERY. Autant dire que je n'y ai pas touché !

Merci d'avance pour l'aide apportée !

ajja17r

22 mai 2019 à 12:14:03

AliasDmc

22 mai 2019 à 18:25:34

Bonjour ajja17r,

Il te manques pas une balise <p> mettre type = text

   <p>
<label for="base_finale">ml de base finale</label>
<input id="base_finale" type="text" value="100">
    
  </p>

Découvrez les Css avec la zonecss.fr

24 mai 2019 à 7:01:46

Merci pour ton retour d'information ! En effet, ça fonctionne !! Tout simplement !

Comme j'en avais besoin pour des calculs, je me suis dis qu'il faut un type="number" mais ça passe avec type="text" donc c'est parfait, je le passe en résolu

Problème de CSS avec JQUERY

Supprimer

Modérer

Signaler le message aux modérateurs