- tdiintlAsked on February 07, 2014 at 12:16 PM
I'm wanting my whole form to adjust width depending on the size of monitor or browser window a customer has open. So for instance on my regualar web pages I set the width at 100% so that the table/layout will fill 100% of the screen size no matter what size the screen.
With jotforms, I tried this and only the form itself expands to 100%, the individual fields do not. I have tried taking the width value out of the individual fields (they get tiny). I tried putting 100% as the field width (tiny again).
Is there any way to do this? I'd like the entire form and the fields within it to be the same width. Secondarily I would like them to expand and shrink based on the size of the viewing window (responsive design). If they cannot shrink and expand, I'll settle for them all being the same width so the form looks more professional.
I have included a screenshot so that you may see what I'm talking about.
- JotForm SupportTitusNAnswered on February 07, 2014 at 01:39 PM
Thank you for contacting us.
You would have to apply individual rules for each of the fields in order for them to respond that way:
I'll style the first field for you just to demostrate. You can add the rules by Injecting them into your form.
/*This make your whole form responsive to the browser width*/
/*this is the div id that wraps the first text input field (qiantity)*/
/*This is the text input part of the field- 99% makes it a little smaller than its container (#cid_3)*/
You need to do this with all of the rest of the fields.
To get the correstponding field div ID's and apply the same width rules, please use this linked guide.
If you hit any bumps, or need assistance, please let us know.
- tdiintlAnswered on February 07, 2014 at 01:47 PM
My gosh that's going to take forever! :) Thank you though, this will fix my problem. I appreciate the quick response!
- JotForm SupportTitusNAnswered on February 07, 2014 at 01:50 PM
I know, its a bit of a process - but let us know how we can assist to make this easier -
- tdiintlAnswered on February 07, 2014 at 03:09 PM
It happens! If there was a way to specify all fields like a * as a wildcard:
That would be cool. We just have a ton of forms. Either way, for the price we pay to use jotforms, I'm surely not complaining! I just thought maybe there was a secret way to do it that I couldn't find. I think I'm going to do them in chunks by category until they are all done.
- JotForm SupportTitusNAnswered on February 07, 2014 at 03:13 PM
You can actually download the form's source code and apply a class to all the contaner's you want to style.
That would take a shorter time - wouldn't it?
Let us know.
- tdiintlAnswered on February 07, 2014 at 03:28 PM
That just might do the trick! I will be working on these next week (I'm going to be out of my office this afternoon and monday) so I will report back if this solution works for me.
- JotForm SupportTitusNAnswered on February 07, 2014 at 03:32 PM
We will look forward to providing further assistance.
Thank you for sticking through this.
- tdiintlAnswered on February 12, 2014 at 10:36 AM
Hi again. Sorry I didn't get back to you sooner. I'm unable to make the changes by downloading the forms source code. Changes I make are doing nothing. I am just shrinking the entire form to get all the fields as close to the same width as possible. I can't do the one at a time thing because I've been given other projects that have priority over this.
Thank you for taking the time to try to help me! :)
- EliezerNAnswered on February 12, 2014 at 11:35 AM
Please try injecting this CSS code to your form:
max-width: 99% !important;
width: 99% !important;
That will make your form looks in this way:
I hope this is what you are looking for. Please inform us if you need further assistance with this inquiry.