Submit button is not spaced properly under the CAPTCHA on a few themes
Very recently, there used to be a line break <br /> just before the submit div, that works for most until one guy wanted to modify css to make the button to the right of the captcha input field so I took out the line break at his request. But then that causes the problem you have only on a few sites, I don’t know why.
I can either put the line break back in or add clear:both; to the submit div, what do you suggest. will adding clear:both; to the submit div cause any other type of problems for any other people?
When putting more than two fields on the same line the alignment messes up.
Can you tell me is there any way I can handle this automatic?
“fscf-field-follow-again”
I could not figure out what to do. Do you have any suggestions?
I am no css wizard.
Mike
Thread Starter
jockoe
(@jockoe)
“So my request is for the fields with the class “fscf-field-follow” to also have a field ID so CSS can be applied to individual fields.”
I mean a unique ID for CSS.
Thread Starter
jockoe
(@jockoe)
Hi Mike,
If you’re asking… I would think the “line break” and “clear” would both give the desired result. I’d go with “clear” just to keep things uniform.
I’m not following you on the second part. I’ve never created a plugin before and have not programmed hardly anything in years. (besides HTML and CSS) Would an IF statement that looks at the previous field to see if it’s a “fscf-field-align-left” or “fscf-field-follow” work?
I was just asking you about the CSS not the programming.like if there is a way to handle the third follow field properly in my HTML and CSS, I tried but could not figure out.
Yea I could ad a unique ID, but you still have to do your own css formatting to make it work. I guess I am asking for someone to help me figure out an automatic css solution to make continuous follow fields work
Thread Starter
jockoe
(@jockoe)
If you look at the link in my original post you will see that I have a row with 3 fields on it. I can tell you what I did to get all 3 fields in the same row, to see if that’ll help you any.
Field1, Field2, Field3
I checkmarked “Follow Previous Field” for fields 2 & 3. I then set the Attributes for all 3 fields to “size=xx”. (so that all 3 input boxes would fit on the row). Lastly, I added this CSS to my custom CSS file.
.fscf-field-follow {
width: 225px;
margin-right: 10px;
float: left;
}
(the width of my content is 980px. The width of all 3 fields needs to be less than that.)
Hope you find something useful in there.
EDIT – It works fine without “margin-right: 10px;”. I think the key components are using the size Attributes and ‘width’ CSS to allow for all 3 fields to fit in the row. (Which all depends on the page width)
I think that just having ID’s to allow people the ability to customize it this way is the way to go. This is a great plugin!
Thanks for the reply. I will look into this in my spare time.
I have one thing you can try for me, since I cannot duplicate the submit alignment issue.
I know I can add clear:both; to the submit div to fix it for ‘labels on top’. But can you add a new form, change the style to ‘labels on left’ and tell me if the submit button is aligned properly or do I need to fix that also?
and if I need to fix that, will adding clear:both; to the submit div to fix it?
Thread Starter
jockoe
(@jockoe)
Here’s this form… http://blogsite.niftywebdesigns.com/contact-2-2/
All I did to the new form was put a checkmark in the box, “Reset the alignment styles to labels on left (sometimes less compatible)”. Nothing else. The submit button lines up correctly. If you need me do anything else just ask.
Thank you for testing for me. I now see that the ‘labels on left’ does not need an adjustment for the submit DIV, but I did correct the issue for ‘labels on top’ setting.
Also I tested your method of making three inline fields
and I updated the included style so the class “fscf-field-follow” has float:left;
The beta was updated last night with both these changes.
When the Beta is near complete, I am going to add more FAQ pages for how to do this and also screen cast some “How to” videos.
This is the proposed instructions for two text fields on the same line:
When adding the 2nd field, check the setting “Follow previous field”,
This setting makes the field display on the form following the previous field on the same line. For example, you could put fields for State, and Zip on one line.
This feature seems to be limited to two fields by default, and it is mostly only compatible with the “labels on top” style because of limited horizontal form width. If the 2nd field is wrapping to the next line you will have to adjust the “Form DIV” setting on the ‘Styles’ tab. Try adding width:99%; or width:650px;
Click “Save Changes” and preview your form.
You may have to experiment with different width values to determine what works best for your form page.
If you want to experiment with three fields on one line, it requires some additional settings, like so:
When adding the 2nd and 3rd field, check the setting “Follow previous field”. Click “Show details” for all three fields. Add this to the 1st, 2nd, and 3rd fields “Input CSS” setting:
text-align:left; float:left; padding:2px; margin:0;
Add this to the 1st, 2nd, and 3rd fields “Attributes” setting:
size="25" (adjust size units later as needed).
Click “Save Changes” and preview your form. If the 3rd field is wrapping to the next line you will have to adjust the “Form DIV” setting on the ‘Styles’ tab. Try adding width:99%; or width:850px;
Click “Save Changes” and preview your form.
You may have to experiment with different width values to determine what works best for your form page.
Note: for compatibility with mobile devices like phones and tablets, it is recommended to use the ‘labels on top’ default setting on the ‘Style’ tab and avoid putting multiple fields on the same line.
Thread Starter
jockoe
(@jockoe)
With the changes, will 3 fields now be the max? For my own needs, I can see where I might want to place 4 small text boxes in one row? (for 4 telephone numbers, so I’m sure they’d fit) …or for something like that would the CSS ID be needed to make that work?
You might squeeze 4 if the size attribute is small and the form is wide enough
Thread Starter
jockoe
(@jockoe)
Thanks Mike. Can’t wait to try the new BETA.
