Dear madam/Sir,
Please have look at my (responsive) form page:
marcsusan.com/login.html
I tried about every trick I could find on the web to center my form, but so far no luck.
Please let me know if you have one that does work.
Regards
Marc
Marc Susan
Registered User
10 posts
paintbrush
Ambassador
3,816 posts
I don't have an answer for you, but thought you might also try asking about this in the forums for your sitebuilding product (just in case you don't find out anything here):
http://www.pviiforums.com/
Hopefully someone else will be able to make sense of it
Did you use a responsive form theme? It's not resizing with the browser window.
http://www.pviiforums.com/
Hopefully someone else will be able to make sense of it
Did you use a responsive form theme? It's not resizing with the browser window.
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
https://www.callendales.com
Prism
Ambassador
1,611 posts
It is not responsive. Maybe give it an absolute position. The form is in a I frame perhaps use a div and position that. I like placing things where I want them to go. I must admit grids are fun to play with though. I like using the form builder for the design take a screen shot and insert my own form elements. Ultimate form design, solved a multi form page request I had. I am a lousy designer but with VSD and WFB they can do the design for me, A fiddle with the web Image Studio and there I go. Horses for courses.
The Guy from OZ
Per
Senior Advisor
1,850 posts
The page is responsive and the form appears to be responsive - if 'on its own' - but the table that the form is placed in has a fixed size, which prevents the re-sizing of the form.
My suggestion would be to ditch the table entirely and wrap the form in a div that is centered in the 'main-content' div by (e.g.): margin: 2% auto;
The markup would look something like this:
<div class="main-content"> <!-- existing div -->
<div class="form-pos">
<!-- script and iframe for form here -->
</div>
</div>
And the CSS:
.form-pos {
width: 90%; /* select percentage as you wish the form to appear */
margin: 2% auto; /* pick your own top/bottom margin in lieu of the 2% */
}
Let us know how it works out, - and good luck!
My suggestion would be to ditch the table entirely and wrap the form in a div that is centered in the 'main-content' div by (e.g.): margin: 2% auto;
The markup would look something like this:
<div class="main-content"> <!-- existing div -->
<div class="form-pos">
<!-- script and iframe for form here -->
</div>
</div>
And the CSS:
.form-pos {
width: 90%; /* select percentage as you wish the form to appear */
margin: 2% auto; /* pick your own top/bottom margin in lieu of the 2% */
}
Let us know how it works out, - and good luck!
Per
www.mingas.com
www.mingas.com
Per
Senior Advisor
1,850 posts
Marc,
Just a clarification about the javascript and the iframe codes for the form:
The markup for the form on the HTML page looks schematically like this:
<script>
<!-- js instructions here -->
</script>
<noscript>
<!-- iframe representation of the form as an alternative if javascript is disabled in the visitor's browser -->
</noscript>
The iframe is only used as a fallback if the default (javascript) is disabled.
You should include both sets of code to avoid a blank space where the form should have been, in case the script does not work for whatever reason!
Just a clarification about the javascript and the iframe codes for the form:
The markup for the form on the HTML page looks schematically like this:
<script>
<!-- js instructions here -->
</script>
<noscript>
<!-- iframe representation of the form as an alternative if javascript is disabled in the visitor's browser -->
</noscript>
The iframe is only used as a fallback if the default (javascript) is disabled.
You should include both sets of code to avoid a blank space where the form should have been, in case the script does not work for whatever reason!
Per
www.mingas.com
www.mingas.com
Marc Susan
Registered User
10 posts
Thanks Per. At last something I can understand.
Regards,
Marc
Regards,
Marc
Marc Susan
Registered User
10 posts
P.S. I went back to the S-Drive version, which automatically centers the form.
Per
Senior Advisor
1,850 posts
Marc Susan wrote:
P.S. I went back to the S-Drive version, which automatically centers the form.
P.S. I went back to the S-Drive version, which automatically centers the form.
That's fine, but you should still place it in a flexible div, as I suggested earlier, to retain the 'responsiveness' of the form.
As you have it right now, the form is prevented from re-sizing for smaller viewports because of the fixed sized table.
EDIT: You could take a look at a simple example of mine here: http://www.mingas.com/contact.php
(drag the edge of your browser window between minimum and maximum widths to see the behavior of the form)
Per
www.mingas.com
www.mingas.com
Jo Rice
Senior Advisor
10,951 posts
Using S-Drive for it is fine, but you should try what Per suggests as it's better to have it native on your own site if you can so it's not in an iframe. Get it out of the table and put the script in as it's given to you, shouldn't really even need to put it in a div set, I've never had to so far. You're restricting the viewing area with the table that's why it won't center as it should.
Marc Susan
Registered User
10 posts
Again, thanks for the advice. It seems to get more simple to solve the problem all the time.
Regards,
Marc
Regards,
Marc
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
