- This topic has 14 replies, 4 voices, and was last updated 3 years, 2 months ago by Elvin.
-
AuthorPosts
-
July 29, 2020 at 11:52 am #1381004John MacKenzie
so ive used the code from here to create a css table in a contact form 7 form.
https://docs.generatepress.com/article/creating-columns/the problem is now that any spaces or br lines I try yo add after the grid doesnt seem to work.
Also the text i have below the grid will depending on browser width end up beside one of the columns if the screen is not wide enough… how can i solve these issues?Thanks!
John
July 29, 2020 at 2:34 pm #1381123TomLead DeveloperLead DeveloperHi there,
Your
<br/>
tags do exist (right-click + Inspect the page to see them). However, you’re better off using CSSmargin-bottom
to create gaps.The other issue is likely because that method of creating columns uses floats, which need to be clear. That article will likely be removed soon as GeneratePress moves towards using flexbox instead of floats.
Perhaps a plugin like this would be useful?: https://wordpress.org/plugins/cf7-grid-layout/
July 29, 2020 at 3:10 pm #1381148John MacKenziehi tom
i started with that but it takes over the whole form and it has be done in their silly layout way, and i found it very cumbersome to work with. can i simply clear the floats in my next div tag somehow? ill try margin bottom too
can i do it with flexbox instead?
thanks
July 30, 2020 at 12:53 am #1381450DavidStaffCustomer SupportHi there,
what is the layout you’re after ? Might be doable with flex.
July 30, 2020 at 7:20 am #1381770John MacKenziethanks i just need the 3 column box across and not have the text below it bump up against it if i resize the window down causing one column to be on another line if that makes sense? when that happens the text from below it prints off to the right of the column.
thanks!!
J
July 30, 2020 at 1:10 pm #1382283TomLead DeveloperLead DeveloperFlex is pretty easy:
<div class="flex-container"> <div class="inner-box"> ... </div> <div class="inner-box"> ... </div> <div class="inner-box"> ... </div> </div>
Then the CSS:
.flex-container { display: flex; } .inner-box { width: 33.333%; }
July 30, 2020 at 2:43 pm #1382369John MacKenziethanks! that worked awesome. appreciate it.
July 31, 2020 at 9:02 am #1383206TomLead DeveloperLead DeveloperYou’re welcome 🙂
January 14, 2021 at 3:42 pm #1619174John MacKenziejust wanted to open this up again as for some reason the contact form fields i have in the flex box do not appear anymore??
any ideas?
thanks!
January 14, 2021 at 4:25 pm #1619213John MacKenzieso actually it appears that the watermark or placeholder text of contact form 7 is causing the whole field to disappear! any ideas how to get a watermark in the fields and not have them disappear?
tried using watermark or placeholder in the CF7 settings. just in case you have come across this as i know its not your issue as i tried with twenty twenty and same thing.
January 14, 2021 at 5:02 pm #1619240ElvinStaffCustomer SupportHi,
I’m not exactly sure I understand what you mean.
Can you specify which part of the form field isn’t appearing? Nothing seems wrong on my end as shown here:
https://share.getcloudapp.com/qGulmZOotried using watermark or placeholder in the CF7 settings. just in case you have come across this as i know its not your issue as i tried with twenty twenty and same thing.
It’s always best to contact the plugin developer if you encounter issues with their plugins. 🙂
January 14, 2021 at 6:50 pm #1619329John MacKenzieSorry where you see the grid of 3 columns with one field under it there are actually 4 fields under each of those headings. They are set with watermark and don’t show up. The one that does show i removed the watermark. Thanks. J
January 14, 2021 at 8:01 pm #1619384ElvinStaffCustomer SupportSorry where you see the grid of 3 columns with one field under it there are actually 4 fields under each of those headings. They are set with watermark and don’t show up. The one that does show i removed the watermark. Thanks. J
This is definitely a plugin issue as there’s no element being rendered when I’ve checked the page source.
You’ll have to search for a plugin that can work with what you’re trying to do, unfortunately.
January 14, 2021 at 9:15 pm #1619419John MacKenzieok thanks ive posted on CF7 support will see
thanks
JohnJanuary 14, 2021 at 9:18 pm #1619422ElvinStaffCustomer Supportok thanks ive posted on CF7 support will see
No problem. 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.