Tailles des caractères avec jquery

Version imprimable

05/05/2013, 17h02
theo17

Tailles des caractères avec jquery

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.
06/05/2013, 09h07
theo17

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
06/05/2013, 11h33
paladice

Tu fais comment en jQuery ? Tu utilises :

Code:

$('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 ? ;)
06/05/2013, 11h47
theo17

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

Bon, voilà mon code :

Code:

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:

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

Complete_saisie.js :

Code:

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:

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.

06/05/2013, 21h15
danielhagnoul

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; }.
07/05/2013, 08h54
theo17

Merci