2010-11-22 8 views
1

J'utilise le plugin jquery jqtransform pour modifier l'apparence de mes éléments de formulaire. Cependant, je suis incapable de remplacer la largeur d'un élément de saisie de texte - peu importe comment je le style l'élément est remplacé. Existe-t-il un moyen connu pour remplacer cette propriété?jqtransform - Définit la largeur de la zone de texte

Merci à l'avance,

JP

Répondre

3

On dirait que les raisons sont les suivantes:

  1. Chaque élément de forme a son propre emballage div
  2. Le width est hardcoded (par js) dans style Attribut, donc surcharger cela en CSS ne fonctionne pas
  3. jqtransform ne fournit pas eleme nt ids, donc vous devez le mettre en quelque sorte manuellement ou fonctionner avec des classes

Ainsi, dans votre cas, je vous suggère d'utiliser une partie jquery:

var myW = 300; 
$("#elementId").css("width", myW); 
$("#elementId").parents(".jqTransformInputWrapper").css("width", myW); 
+0

A travaillé un régal, merci! –

5

Désolé de faire revivre une vieille question, mais la réponse actuelle le rend plus compliqué que nécessaire.

Le plus simple est de définir simplement l'attribut HTML 'size' sur votre élément d'entrée:

<%: Html.TextBoxFor(x=>x.SomeProperty, new{ size="4" }) 

Ensuite, lors de l'exécution jqTransform calcule la largeur de div (extrait du fichier source jqTransform):

var inputSize=$input.width(); 
if($input.attr('size')){ 
     inputSize = $input.attr('size')*10; 
     $input.css('width',inputSize); 
} 
+0

grande solution !!! – mrGott

+0

Cela ne semble pas fonctionner avec la dernière version ou ne fonctionne que lorsque le div est plus large que le contenu. J'ai une liste déroulante qui a un contenu très long et le réglage de la taille à une largeur plus petite n'affecte pas la façon dont elle est rendue même quand firebug montre que select a la valeur de l'attribut pour la taille. – Levitikon

+0

JQTransform n'utilise que le bloc de code ci-dessus pour les zones de texte. Pour que cela fonctionne pour les listes de sélection (et/ou d'autres types d'entrées), vous devrez répliquer le bloc de code dans les autres sections du code source de JQTransform :( – geoffreys

0

J'ai une solution facile, vous devez "configurer" l'attribut taille de l'entrée de texte juste avant la déclaration d'utilisation jqtransform, La citation de protektor est correcte, est l'attribut 20 de taille donné par jquery, il détecte la taille par défaut saisie de texte et multiplié par 10. Donc basiquement vous pouvez donner une taille standard si vous voulez sur ce chemin:

$("form input:text").attr("size", x); 
$("form").jqTransform(); 

où « x » est la taille, son numéro, n'est pas mesure de pixel, rappelez jquery calcule pixels multipliant ce nombre par Dix. Si vous voulez 400px sur le texte d'entrée, alors vous devez définir la taille à 40 et vous avez terminé.

Questions connexes