- This topic is empty.
December 24, 2015 at 11:10 pm #236136
I’m adding CSS to a gravity form alternating between 1, 2, and 3 fields per row.
I’ve been able to center the form header with the form container. However the the text fields will not line up evenly.
I’m using the Gravity forms short code gf_left_half and gf_left_third etc for the rows containing 2 and 3 fields. However they will not properly populate the form as specified.
Here is the CSS that I’m using
[MOD EDIT – Codedump removed]December 25, 2015 at 12:43 am #236137
Please a CSS codedump is no use to anyone especially without the associated HTML.
A Codepen.io demo is much more valuable.December 25, 2015 at 1:59 am #236138
Thank you for the advice, made things 10x easier!
I’ve created a codepen which can be viewed under my codepen user name, “artlessink”.
I’m aiming to accomplish a form rendered with 2 fields on the first row, 2 fields on the second row, 1 fields on the third row, 3 fields on the fourth row, 1 fields on the fifth row.
zip city state
evenly spaced rows from the form body border
evenly space vertically
evenly spaced horizontally
responsive text input field
40% of the page width and responsive to the screen size.December 25, 2015 at 6:29 am #236141
Can you link the Codepen here?December 25, 2015 at 12:22 pm #236153December 26, 2015 at 3:19 am #236154
Whoa…not the whole page…
Frankly a single list doesn’t make a lot of sense here…especially if you want rows of fields….in fact a list isn’t really the optimal structure at all.
A table would be better…or at least a table like structure using divs in rows etc.
Is the HTML changeable at all?December 26, 2015 at 5:14 pm #236169
“The form HTML is generated dynamically by the plugin, there’s no place to edit it.”December 26, 2015 at 5:57 pm #236170
I can however give the form element a custom css name and target that name for both elements.December 27, 2015 at 3:30 am #236173
Then probably not without a shipload of specific widths etc. and some very specific CSS.
You’d have to float the
li, set widths to get the spacing you want etc…it’ll be finicky work and probably not very responsive although you could mitigate that by using % widths & margins as much as possible.December 27, 2015 at 4:49 am #236181
I’ve tried that and so far I can’t seem to get the the right text areas on the right row. What do you suggest?December 27, 2015 at 5:20 am #236184
Remove everything from the Codepen that isn’t related to the issue and show us where you are right now.
We don’t need the menu, background etc.
Try taking a tree trimmer to all the linked stuff that isn’t related. Having to wade hip deep through extraneous code is a PITA to be honest.December 27, 2015 at 5:43 am #236190December 28, 2015 at 11:09 am #236219mhodges44Participant
Paulie_D is right. unless you can change the code structure to use some type of grid layout, you’re just going to have to go through the painful process of setting specific floats, clears, media queries, and % widths/margins/padding. What you are wanting is very doable, it will just take an hour or so of your time to sit down and set the style parameters and selectors for everything. I would suggest working within the codepen that you linked and using your browser’s developer tools to tweak the layout to figure out exactly what properties you will need.
- The forum ‘CSS’ is closed to new topics and replies.