Chronoform, riduzione dimensione dei campi

[bassman82]

Buongiorno a tutti, ho iniziato a creare un form per i miei clienti in modo che possano inviare all'azienda le richieste di preventivo in modo "standard". Purtroppo però non riesco a ridurre alcuni campi che sono decisamente troppo grandi (per esempio il campo "Pezzi"). Ho provato a ridurre le dimensioni dal campo "field size" ma non cambia niente. Ho provato a cercare il css del componente ma non riesco a trovare quale possa essere il foglio adatto da modificare. Mi servirebbe di mettere 6/7 campi per riga (tutti campi da 3o4 lettere, non di più)


http://www.sombradosol.com/index.php?option=com_chronoforms&tmpl=component&chronoform=modulo_preventivi


Grazie


Matteo

[giusebos]

aggiungi questa regola in fondo al file css principale del tuo template

Codice: [Seleziona]

textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
  width: 50px !important;
}
naturalmente variando 50px amplierai/diminiirai lo spazio della finestra.

[bassman82]

Innanzitutto grazie per la risposta. Ma se volessi dare una regola per ogni campo (includendo anche i menu a tendina, che così non si sono modificati) devo modificare quella regola o aggiungerne altre?


Grazie
Matteo

[giusebos]

dipende da cosa vuoi fargli fare, prova a spiegarti.

[bassman82]

Ciao, in pratica vorrei che ogni campo del mio form, compresi i menu a tendina, possano avere una dimensione definita da me, in modo da poter gestire al meglio l'impaginazione.
Proprio come potrei fare se funzionassero i controller già impostati dal compnente. Se può servire uso Gantry come template.

Grazie Matteo

[giusebos]

analizza la zona usando firebug per firefox, qui un videotutorial, così potrai apportare tutte le modifiche che vorrai.

[bassman82]

Grazie per le risposte, sto controllando il codice, ma quando cambio il campo che governa le dimensioni della text area me le cambia tutte.

Questa la parte html di uno dei campi che vorrei cambiare

<label>Azienda*</label><input class=" validate['required']" type="text" name="Azienda" value="" title="" size="10" maxlength="100">

e il corrispondente css

textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {    width: 100px !important;}

dove è specificata la dimensione. Se però cambio i 100px mi modifica sia la dimensione del campo "azienda", sia tutte le altre dimensioni dei campi di testo.

In che punto trovo come assegnare ad ogni campo una dimensione?

grazie ancora
Matteo

[giusebos]

questi:

Codice: [Seleziona]

textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input
si chiamano selettori, se li separo con una virgola quando applicherò uno stile (la dichiarazione)

Codice: [Seleziona]

{    width: 100px !important;}
tutti avranno la stessa forma/colore/comportamento

quindi prendi tutto quel codice e separalo uno per uno, ottenendo:

Codice: [Seleziona]

textarea, input[type="text"] {}
input[type="password"] {}
input[type="datetime"] {}
etc etc {}
etc etc {}
adesso con firebug dovresti vedere meglio dove mettere le mani.
Io mi sono limitato a separare i primi tre selettori, tu fallo su tutti e vedrai che capirai meglio dove intervenire.

Non mi metto a fare qui un corso di CSS, ma sta a te cercare in rete uno dei tantissimi corsi dove apprendere ciò che ti serve per le tue modifiche.