Adjust Size of Form Fields
What do I have to do for the field size to work in forms? It’s always big although there are four options. Valid values are large, x-small, medium, long, small. None of them work. Do I have to configure something?
They work for admin forms. Do you ask it for frontend forms?
Yeah for the frontend forms. For instance, the contact page in the deliver skeleton: http://demo.getgrav.org/deliver-skeleton/contact. The textarea of name and email has been resized. I want to do the same. How can I achieve that? It always takes all the wide of the page. I was checking the code but can’t figure it out. It looks like there are some cached classes … I don’t get it.
In that particular case, the size is set via CSS using
.contact input {
width: 50%;
}
.contact textarea {
width: 80%;
}
You can do the same by adding a class in the form field definition
form:
name: ...
fields:
- name: name
....
classes: large
and then adding some styling in your own theme or using https://github.com/getgrav/grav-plugin-custom-css
Where is located the code of these classes? In the deliver skeleton we have for example: form-control form-control-lg. I searched the whole project to find these classes. I just saw some code inside cache sub directories: “/cache/twig/1a/(long number).php”. If I should add these classes in my own customized theme, where should I put them?
You define them. For the frontend, there is nothing “predefined” and the theme might implement a particular class, or not.
Just add the class to the form definition, and it will create the form field HTML markup with that class.
Then add some CSS via the plugin I linked, to make it smaller or longer.
OK I did it. It works. Thank you flaviocopes. I added the class and customize it in a new file: “/user/themes/antimatter/css/custom.css”. The antimatter theme was already pulling the css configuration from that file. It just needed to be created. I’m new to twig and templating engines. That’s why I got confused.