✔ Wegen jQuery Layout kann ich größe von Formularen und Buttons nicht ändern.

[AlanHorman]

Hi,

normalerweise ist es einfach die Länge von einem Formular oder Button zu ändern.
Da ich aber dieses CSS-Layout für meine Seite eingebunden habe

<link rel="stylesheet" type="text/css" href="styles/jquery.mobile-1.4.2.css">

passt sich die Seite nach dem Aussehen meiner Seite an.
Der gewünschte Effekt ist nur zur Hälfte vorhanden:
Die Formulare und die Buttons sind so breit wie mein Bildschirm.
Wenn ich mit JavaScript die Länge vom Formular des Benutzernamens ändern möchte,
kommt keine Reaktion.

Mein Code für das Benutzernamen-Formular sieht so aus:

  <form id="registerform" name="formular">
  <fieldset>
  <p>
  <label id="f1" for="username">
  Benutzername: <div id="d1"> </div>
  </label>
  <input type="text" maxlength="50" size="20" name="username">
  </p>
...
  </fieldset>

und in meinem <script>-tag habe ich diese Zeile stehen, mit der ich vergeblich versuchte die Länge vom Benutzernamen-Formular zu ändern:

document.formular.username.style.width = 30px;

Wie gesagt, das kann nur an dieser CSS-Verlinkung von diesem jQuery-Mobil-Layout liegen.

Ein Screenshot meiner HTML-Seite findet ihr im Anhang.

 

[SpiceLab]

Entferne mal das size-Attribut im <input>-Tag. Dann sollte es mit der gewünschten Breitenformatierung funktionieren.

Falls du dies per CSS vornehmen willst, das Stylesheet nach dem jQuery-CSS aufrufen, und ggfs. die !important-Regel anwenden.

#registerform #username {width:30px !important}

<input type="text" maxlength="50" name="username" id="username">

 

[AlanHorman]

Hat leider nicht geklappt.

Danach ist das Formular für den Benutzernamen wie deaktiviert.
Es hat seine Länge behalten, aber man kann nicht mehr eingeben.

 

[SpiceLab]

Ist die Seite für Dritte zugänglich, um mal einen Blick d'rauf werfen zu können?

 

[AlanHorman]

Ich habe dir einen Link von der Datei geschickt.

 

[SpiceLab]

Hat leider nicht geklappt.

Danach ist das Formular für den Benutzernamen wie deaktiviert.
Es hat seine Länge behalten, aber man kann nicht mehr eingeben.

Die empfohlene CSS-Regel greift hier schon

Deshalb muß jetzt bei der geringen Breite auch weit links-außen ins Feld geklickt werden, um eine Eingabe vornehmen zu können.

Nur besitzt das auto-generierte umschließende <div> weitere Formatierungen bzgl. Rahmen usw., die das Eingabefeld augenscheinlich breiter erscheinen lassen. Diese müßten gleichermaßen im zweiten Stylesheet überschrieben / zurückgesetzt werden.

Zur Orientierung, welche Klassen dieses Element besitzt, hier der HTML-Auszug mittels Firebug:

<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
  <input maxlength="50" name="username" id="username" type="text">
</div>

 

[SpiceLab]

Hatte eben eine ruhige Minute...

Mit der aktuell vorliegenden HTML-Struktur würde das erweiterte CSS wie folgt lauten, um das angesprochene <div>-Element aus den übrigen existierenden innerhalb des Formularbereichs für die gewünschte Umgestaltung zu selektieren - hierfür ist uns die Pseudo-Klasse :nth-child() behilflich:

#username, #registerform fieldset .ui-input-text:nth-child(3) {width:30px !important}

 

[AlanHorman]

Danke SpiceLab, du bist mein persönlicher HTML-Schutzengel!

Mir ist aufgefallen, dass du mir schon sehr viel geholfen hast.

Auch 1000 mal Dank, dass du dir extra die Zeit für den Quellcode genommen hast!

 

[SpiceLab]

Einfach auch mal Danke sagt

Immer wieder gerne

 

[AlanHorman]

Sorry, ich muss schon wieder stören (es wird aber nochmals ein Danke von mir geben ).

Ich wollte, dass die anderen Formulare genauso lang werden wie mein erstes und habe folgendes geschrieben:

#username, #givenname, #name, #email,
#password, #samePassword, #btnSubmitForm, #btnResetForm, #registerform fieldset .ui-input-text:nth-child(3) {width: 455px !important}

leider verändert sich nur das erste Formulat, die anderen bleiben unverändert.
Ich höre mich vielleicht an, wie ein Noob, aber hat es damit was zu tun, dass die Pseudoklasse sich nicht auf mehrere Elemente beziehen kann
oder weil ich die 3 durch eine neue Zahl ersetzen muss?

Apropos: Wieso steht in den Klammern eine 3?