I seem to be having some extra whitespace to the right. My page is set up as a table, and my form is inside the table, but the extra whitespace is outside my table to the right (?). I think it may have something to do with the 'save my progress and resume later' option? That seems to be centered, and on the free test form it seems to be centered, but making the page wider. I am guessing this is a setting somewhere in the css which is hosted on your site?
A lesser, but possibly related question, is that the heights between questions / rows seem to vary. For example, inline City, ST, Zip and inline Phone, Phone type (on my form) have very little space (padding? line-height?) above and below them, while reqular questions by themselves seem to have more space. I am also guessing that this is a function of the css you have hosted on your site?
So I started looking at your style sheets (I see that your code calls like 5 different style sheets...), I thought maybe I would DL them and host them on my site, which would also be faster, and make the changes as needed for my site, but I started going through all of them and there is just too much stuff in there. Plus maybe I am barking up the wrong tree altogether, so I thought I would just take a break and post here instead. :)
I searched the forums and found a couple close topics, but nothing that applied exactly. I have been playing around with the "width" settings and some others, without success. Also you will see that I set the background to red, and my table border width to "1" which were just for troubleshooting purposes so I could see what was going on.
My form is located here: www.green-experts.net/newsite/sales-inquiry-form.shtml
Yeah, it doesn't seem to have anything to do with the 'save my progress and resume later' option. I just disabled that and it is still doing the same thing.
In fact, if I look at my form in the free/test viewer, it does appear very wide. How can I change this setting?
Other, secondary issues that I think are related to the css: 1.difference in row height as mentioned above (I would like them to all be the same) 2.small extra white space at top and bottom of form inside table container (I would like to get rid of it)
If you could let me know how to change those too, that would be great. I will keep playing around with it and post back if I figure it out.
I believe part of the issue with the formatting for your form, is that you have many sections styled as 'inline'. While this section is useful, it can frequently cause unexpected rendering issues between different browsers. I'd recommend changing to one of the other section types for the moment.
Once that is done, you should try taking the publish code for your form, placing it inside a simple HTML page:
And see if that renders in the way you expect. If it does, you can then try adding your table, etc.
I'm not quite sure what you mean by 'if I look at my form in the free/test viewer, it does appear very wide. How can I change this setting?' You can change the form width by adding the style declaration to your custom code block, .wFormContainer { width: 550px; } , though I don't think that will help with the issues you mention above.
Actually, I had already tried to change the form width settings. If I put the width down to say 500px, it does make the width less, but I still had some white space outside the table to the right (although a lot less). However it caused some of the longer lines in the form to wrap. :( And they weren't wrapping because they were too long, but rather it seemed as if they had a lot of padding on the right or something. In other words, there was still a lot of whitespace to the right that I couldn't get rid of.
I wanted to try your suggestion however, so I put my form info onto a new, blank page without tables. And the same thing is happening (the same thing happens when I go to the free/test form also btw). I have set the .wFormContainer { width: 400px; } (I also tried tetting it to 100% to no avail) but as you can see, there is a bunch of whitespace to the right of the form. The form elements are wrapping, even though they are not overflowing the right side. As I said earlier, it appears as if there is some padding or something going on with the elements themselves, within the form container.
You can see the form here: http://www.green-experts.net/newsite/test-form.html
As far as the 'inline' grouping goes, I suppose I could do what you said and just not use it. I just thought there would be some css setting I could modify that would change the row height for that. Alternately, I suppose I could put all the other lines each within their own 'inline' group, and that would give everything the same vertical spacing, but I guess I was just hoping there was a more elegant solution.
I don't want to sound like a complainer, in fact I love this product especially the conditional logic! I just wish I could get the layout exactly how I wanted it. FWIW, my thoughts still run along the lines of this being some type of css issue, but I could be wrong.
I had the .wFormContainer { width: x; } property set to 400px, but that caused the inline sections (Phone + Phone Type) to wrap. I tweaked the .wFormContainer { width: x; } property in 50px increments until they didn't wrap any more, which happened at 600px. That is how my form sits right now. And you can see how much extra whitespace (padding?) there is to the right.
Sorry for triple posting, but I was just working on this but I have to go now. I will check back later, but just wanted to post where I was up to so far.
I thought the formatting issue may have to do with the 'inline' elements. So I removed all of them. But I am still getting the same thing. I made a new form that you can see here:
I did the same tweaking, setting the width up in 50px increments until nothing wrapped. I accomplished this at 550px. But as you can see, there is still a ton of whitespace / padding to the right.
The next thing I will try will be to put the field names above the fields, I think that may do the trick.