2010-11-22 13 views
1

Ich benutze das jqtransform jquery Plugin, um das Aussehen meiner Formularelemente zu ändern. Ich bin jedoch nicht in der Lage, die Breite eines Texteingabeelements zu überschreiben - egal, wie ich das Element, das überschrieben wird, style. Gibt es eine bekannte Möglichkeit, diese Eigenschaft zu überschreiben?jqtransform - set textbox width

Vielen Dank im Voraus,

JP

Antwort

3

wie die Gründe Scheinen ist:

  1. Jedes Formularelement hat es div
  2. Die width ist fest einprogrammierte own Verhüllung (js) in style Attribut, so überschreiben dies in CSS funktioniert nicht
  3. jqtransform bietet keine eleme nt-IDs, so haben Sie es manuell einstellen irgendwie oder arbeiten mit Klassen

Also, in Ihrem Fall würde ich Ihnen vorschlagen, einige Jquery zu verwenden:

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

Arbeitete ein Vergnügen, danke! –

5

Leider eine alte Frage wieder zu beleben, aber Die aktuelle Antwort macht es komplizierter als nötig.

Der einfachste Weg ist, einfach setzen Sie die ‚Größe‘ HTML-Attribut auf dem Eingangselement:

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

Dann zur Laufzeit jqTransform die div Breite berechnet (extrahiert aus jqTransform Quelldatei):

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

große Lösung !!! – mrGott

+0

Das scheint nicht mit der neuesten Version zu funktionieren oder funktioniert nur, wenn div breiter als der Inhalt ist. Ich habe eine Dropdown-Liste, die sehr lange Inhalte hat, und die Größe auf eine kleinere Breite einzustellen wirkt sich nicht darauf aus, wie es gerendert wird, selbst wenn Firebug zeigt, dass die Auswahl den Attributwert für die Größe hat. – Levitikon

+0

JQTransform verwendet nur den obigen Codeblock für Textfelder. Damit es für Auswahllisten (und/oder andere Eingabetypen) funktioniert, müssen Sie den Codeblock in die anderen Abschnitte des Quellcodes von JQTransform replizieren :( – geoffreys

0

Ich habe eine einfache Lösung, müssen Sie das Größenattribut der Texteingabe kurz vor der jqtransform Nutzungsdeklaration "konfigurieren", Das Zitat von Protektor ist richtig, ist 20 Größe Attribut von jquery gegeben, es erkennt die Standardgröße von a Texteingabe und multipliziert von 10. Also im Grunde können Sie eine Standardgröße geben, wenn Sie auf diese Weise wollen:

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

wobei „x“ ist die Größe, es ist eine Zahl, nicht Pixel Maßnahme ist, denken Sie daran jquery berechnet diese Zahl Pixel multipliziert mit zehn. Wenn Sie 400px für den Eingabetext benötigen, müssen Sie die Größe auf 40 festlegen und fertig.

Verwandte Themen