Fluid-Template: Breite von Eingabefeldern: Extension sjr_offers

Ich benutze die Extension sjr_offers von Jochen Rau und möchte die Breite der Eingabefelder im Fluid Template (z.B. in ext/sjr_offers/Resources/Private/Templates/Offer/index.html) ändern.

Wie ist dies möglich bzw. ist dies hier überhaupt die richtige Stelle? Der vorliegende Code ist:

<f:form class="tx-sjroffers-form" method="post" action="index" name="demand" object="{demand}">
<tr>
<td valign="top" ><noscript><f:form.submit value="Jetzt Filtern ->"/></noscript></td>
<td valign="top" ><f:form.textbox id="searchWord" property="searchWord" style="width: 20%;" additionalAttributes="{onChange : 'document.demand.submit();'}" /></td>
<td valign="top" ><f:form.textbox id="age" property="age" size="4" additionalAttributes="{onChange : 'document.demand.submit();'}" /></td>
<td valign="top" >
<f:form.select id="categories" property="category" options="{categories}" optionValueField="uid" style="width: 20%;" additionalAttributes="{onChange : 'document.demand.submit();'}"><select><option>###dummy###</option></select></f:form.select><br />
<f:form.select id="regions" property="region" options="{regions}" style="width: 70%;" additionalAttributes="{onChange : 'document.demand.submit();'}"><select><option>###dummy###</option></select></f:form.select>
</td>
<td valign="top" ><f:form.select id="organizations" property="organization" options="{organizations}" optionLabelField="name" style="width: 30%;" additionalAttributes="{onChange : 'document.demand.submit();'}"><select><option>###dummy###</option></select></f:form.select></td>
</tr>
</f:form>

Vielen Dank

entweder mit table width="400"

oder die bessere variante in divs packen....

Die Breite der Eingabefelder kann (wie in Deinem Beispielcode angegeben) über das size- oder style-Argument der f:form.textbox geändert werden. Natürlich funktioniert das auch global über CSS-Klassen.

Oder verstehe ich Deine Frage falsch?

Ziehe testweise das gewünschte Formularfeld aus der Tabelle und lege es z.B. in ein DIV, denn der Prozentwert bezieht sich auf die Breite des umschließenden Elements.

Beispiel:

<div>
<label for="tx-efempty-lastname">Last Name:</label><br/>
<f:form.textbox style="width:20%" property="lastname" id="tx-efempty-lastname"></f:form.textbox>
</div>

mach es am besten so:

gib deinem formular ne class z.b. form

also

<f:form class="formular" action="" object="">
<div>
<div>
<label for="tx-efempty-lastname">Last Name:</label>
</div
<f:form.textbox class="individual" property="lastname" id="tx-efempty-lastname"></f:form.textbox>
</div>

</f:form>

dann kannst du in deinen css mit
form .formular div div input deine größe mit z.b. width:200px; angeben
wenn du nur das input feld ändern willst, dann gibst du dem input ne class wie individual und setzt es an deinem css aufruf hinten dran.