Field size in Gantry

Hey,

When i change the field size of a text box, the input field isn't being changed.
Or at least, it isn't shown on the webpage.

I'm using the Gantry template in my website.
You can see a form on http://oniriabe.dyndns.org:1111/mag/index.php/2013-01-31-14-41-24/uw-voorstel
(this is a test server for the moment).

Any idea what i can/must change in order to have it working?

Hi brononius,

The width is set by this CSS

input, textarea, .uneditable-input {
    width: 206px;
}

it is probably in your template but as you have the RokZipper (or something similar) turned on I can't be sure.

Bob

I've got a plugin called "System - RokExtender".
Not sure if it's the same?

But disabling it doesn't seem to have any effect...

Hi brononius,

I've no idea what Rok Extender is. The CSS file name starts with Master- so that may give you a clue. You'll probably find is more reliable to over-write the CSS using a Load CSS action in your form rather than editing the template files.

Bob

more reliable to over-write the CSS using a Load CSS action in your form

Any suggestions/examples what I should use in the Load CSS?
The only 'problem' i'm having for the moment is the field size...

Simply adding following in it changes of course all my field... :$

input, textarea, .uneditable-input {
    width: 100%;
}

Hi brononius,

Well, yes. You need to add CSS Selectors to make the changes occur where you need them. The ChronoForms HTML has a pretty good set of classes added for you and you can (and should) add IDs to individual inputs.

Bob

Got it...!

In the text box itself, insert an ID and class (fe denktank_naam).


And in the 'load css':

.denktank_naam {
       width:200px;  
   }

.denktank_lid {
       width:100px;  
   }

.denktank_mail {
       width:300px;  
   }

.denktank_onderwerp {
       width:350px;  
   }

.denktank_tekst {
       width:350px;  
   }

Thanks!!!

Hi,
I've the same problem, I use a Roketthem template so Gantry framework, and I've put a form in a module.
So I can't change the field size or better I've changed they but they displayed the same way.

Can you explain idiot proof 🙂 how to do this? Because reading the post I don't understand
Many thanks in advance.

Hi babu65,

What have you tried? And what exactly don't you understand?

Bob

Hi Bob,
I said idiot proof because I'm not understand if I must put the code in my file CSS custom and what code I must put.
In practice nothing 😶

Hi babu65,

Please post a link to the form so I can take a quick look.

Bob

Thanks Bob the link is

http://alias.prova.com/Villacarmelita
I'm apologize but it is an an alias so for see it you must put on your host file as follow:
195.43.129.203 alias.prova.com

Hi babu65,

I made the entry but I'm only getting 404 errors :-(

Bob

Hi Bob,
at http://alias.prova.com/Villacarmelita/ I display regular as in attched file.
Have you put in your host file 195.43.129.203 alias.prova.com ?

Hi Bob,
I've solved my problems during the night.
The night brings counsel😀

I've understood carefully reading this post that I must use in my custom template ID and class for the field that I need a specific size.

For the pagination I've changed the frontforms.css files because I can't find a better solution, but I think the right solution should be an override that I tried but without success. Is right?

Thank you for your kind interest

I forgot a question.
I'm using Mootools data picker, so now the format date is Y M D, for have D M Y the right format is '%d/%m-%Y' right?
Where I must put it? I find but nothing😟

Hi babu,

CSS is **Cascading** style sheets, what then means in practice is that styles with more 'specific' selectors will over-ride less specific selectors. There are a couple of examples linked from this StackOverFlow answer. I'm afraid that they are quite complicated to read though :-(

Bob

The post and your answers in general are very clear and useful, it's me that I have problems both to understand English, but in particular I miss a lot of technical knowledge, so do not be sorry if I have problems with the understanding of the post🙂
Regarding the format of the dates you know tell me where to change it?

Hi babu65,

Please see this new FAQ.

Bob

Hi Bob,
I've read the FAQ and I've change my format date :o 😀
Many thanks again