Tailles des caractères avec jquery

**theo17** · 05/05/2013, 17h02

Bonjour,
Je fais un formulaire avec plusieurs onglets et j'utilise jsquery avec autocomplete pour certaines zones input et tabs pour les onglets.
Tout marche bien à part la taille des caractères qui sont gros et que je n'arrive pas à modifier.
J'ai commencé par préparer mes formulaires avec chaque zone bien positionnée et tout est ok dans l'écran avec des caractères "normaux"
Mais quand je rajoute l'autocomplete, les caractères de la boîte qui liste les compléments sous l'input de saisie sont gros.
Et quand je place mes formulaires dans chaque onglet en déclarant tabs, je retrouve ces même gros caractères sur tous mes textes, ce qui bien sûr me décalent toutes mes zones de formulaires.
Je pense que c'est dans le css de jquery que sont initialisés ces caractères, mais où ??
Où dois je faire la modification de ceux ci pour retrouver la taille "normale" de mes caractères ??
Merci de vos réponses.

**theo17** · 06/05/2013, 09h07

Bonjour,

Une précision, mes textes sont dans des "label" avant les "input" et j'ai donc fait diverses modifs dans mon css où j'ai attribué à label diverses tailles de font-size pour voir, et cela ne donne rien.
Sans l'appel à tabs, ou autocomplete, j'ai mes caractères "normaux", mais dès que j'emploie ces 2 plugins, la taille de mes caractères augmente et je n'ai rien trouvé dans jquery-ui.css qui détermine la taille des caractères.

Alors help, où et comment déterminer la taille pour qu'elle soit constante ???

Merci de vos réponses

**paladice** · 06/05/2013, 11h33

Tu fais comment en jQuery ? Tu utilises :

Code :

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

$('monControl').css("attributCSS","valeur");

Ou tu utilises une autre solutions?

Tu n'aurais pas un bout de code à montrer pour qu'on en sache un peu plus ?

**theo17** · 06/05/2013, 11h47

Jquery ne me sert uniquement pour autocomplete et tabs, et dans celui ci je ne me sers pas du tout de css.

Dans mon css, j'ai rajouté, pour voir, "label" avec un font-size, et je déclare ce css après la déclaration de celui de jquety-ui.

Et c'est le seul endroit où je défini une taille.

Quand j'affiche mes formulaires directement sans mon tabs, la taille est "normale", mais quand je les mets dans des tabs de jquery, la taille est augmentée, pourtant sans avoir nulle part redéfini une taille.

Merci

**theo17** · 06/05/2013, 12h53

Bon, voilà mon code :

Code php :

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
html
<!DOCTYPE html> 
<html lang="fr">
<head>
   <title>Saisie BMS</title>
   <meta charset="iso-8859-15" />       <!-- ou charset="utf-8" -->
	<link rel="stylesheet" href="/JsQuery/jquery_dev/css/jquery-ui.css" />
   <link rel="stylesheet" href="Saisie_BMS.css" />
</head>
 
<body>
<?php
 
print("<div id='tabs'>");
   print("<ul>");
      print("<li><a href='#naissance'><span>Naissance</span></a></li>");
      print("<li><a href='#mariage'><span>Mariage (époux)</span></a></li>");
      print("<li><a href='#deces'><span>Décés</span></a></li>");
   print("</ul>");
   print("<div id='naissance'>");
      require_once ("Grille_saisie_naissance.php");
   print("</div>");
   print("<div id='mariage'>");
      require_once ("Grille_saisie_epoux.php");
   print("</div>");
   print("<div id='deces'>");
      require_once ("Grille_saisie_deces.php");
   print("</div>");
print("</div>");
?>	
 
<script type="text/javascript" src="/JsQuery/jquery_dev/jquery-v1.9.1.js"></script>
<script type="text/javascript" src="/JsQuery/jquery_dev/jquery-ui.js"></script>
<script type="text/javascript" src="Complete_saisie.js"></script>
</body></html>

Et l'appel à l'autocomplete dans mes require_once ("Grille_saisie_...php) :

Code php :

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

1
2
print("<label for='commune'>Commune : </label>");
print("<input id='commune' size=25 name='commune'>");

Complete_saisie.js :

Code :

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
$(function() {
 
	$("#tabs").tabs();
 
	$('#commune').autocomplete({
	   source: function(request, response) {
	      $.getJSON('Complete_commune.php', { term: request.term },
	      function(result) {
	         response($.map(result, function(item) {
	            return item.nom_commune;
	         }));
	      });
	   },
	   minLength: 2
	});
});

css :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
body { 
   background-color: #ecf7f9
   font-size: 1em;
}
 
input, textarea { border-radius: 5px; box-shadow: 3px 3px 3px #4c6ec8;}
 
input:hover, textarea:hover, input:focus, textarea:focus {
   background-color:#daff90;
}
 
label { font_size: 1em; }

Le reste du css est particulier aux différents div, mais sans jamais faire appel à un quelconque font-size.

Merci.

**danielhagnoul** · 06/05/2013, 21h15

Bonsoir

Pour modifier la taille des caractères dans tous les widgets il faut modifier la classe "ui-widget". Exemple : .ui-widget { font-size: 12 px; }.

Tailles des caractères avec jquery

jQuery

Vue hybride

Discussions similaires

Partager

Partager