Applying responsive CSS codes to another jotform

This css works exactly how I like on iOS. (form fields are padded on left and right in iOS & only scrollable vertically, not horizontally) and user can't pinch and zoom!

http://form.jotform.us/form/43206646769161

The problem is, if I inject this css into a different form & then use the Form Builder to make any
subtle changes, the form fields are no longer padded on iOS, they extend to the left & right edge.

My goal is to build responsive forms that are primarily viewed on mobile devices and display like above.

Is there a way to only use part of the above CSS to achieve this?

I'd like to be able to use Form Designer to customize different forms and then apply whatever CSS
from the above form to get the same responsiveness.

Thanks

Brian

Hi Brian,

Would you mind giving us the link of the jotform where the CSS was not applied to with success and the CSS code that you are applying to them?

I presume that this is the entire CSS?

.form-textarea, .form-textbox, .form-dropdown{
 width:100%;
 padding:8px;
 background-color: #ffffff;
 border: 1px solid #cccccc;
 -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
 -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
 -o-transition: border linear 0.2s, box-shadow linear 0.2s;
 transition: border linear 0.2s, box-shadow linear 0.2s;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
.form-textarea:focus, .form-textbox:focus, .form-dropdown:focus{
 border-color: rgba(82, 168, 236, 0.8);
 outline: 0  !important;
}
.form-line-error {
 background: none;
}
/*---------dropdown addon-------------*/
}
/*---------header blue-------------*/
.form-header-group {
 moz-box-shadow: inset 0px 1px 0px 0px #FAFCFD;
 -webkit-box-shadow: inset 0px 1px 0px 0px #FAFCFD;
 box-shadow: inset 0px 1px 0px 0px #FAFCFD;
 background-color: rgba(121, 187, 255, 0.59);
 background-color: #79BBFF9;
}
/*---------form border------------*/
.form-all{
 border: 1px solid #CCC;
 margin-top: 3px;
}
/*---------fix yellow active background overlapping-------------*/
.form-line {
 width:auto !important;
}
/*---------CUSTOM BUTTON-------------*/}
.form-input .form-error-message{
 box-shadow: none !important;
 border-radius: 0 !important;
 background:none !important;
}
.form-error-arrow{
 display:none;
}
.form-error-message img{
 margin-top: 1px;
}
.form-validation-error {
 box-shadow: none !important;
}
span.form-sub-label-container + span.form-sub-label-container {
 margin-right: 0;
}
.form-address-table select, .form-address-state, .form-address-table, .form-address-line, .form-address-table .form-sub-label-container {
 width: 100%;
}
.form-address-postal, .form-address-city{
 width: 99%;
}
.form-address-table {
 width: 100% !important;
}
.form-address-table td, .form-address-table th {
 padding-bottom: 10px;
 padding: 0 0 10px 0;
}
div span.form-sub-label-container + span.form-sub-label-container{
 width: 49%;
}
input[name$="[first]"], input[name$="[last]"]{
 width: 100%;
}
.form-sub-label-container {
 margin-right: 1px;
 width: 50%;
}
.form-label-left, .form-label-top {
 width: 100% !important;
}
.form-input{
 width: 100% !important;
 }
@media (max-width: 480px){
 .form-textarea, .form-textbox, .form-dropdown{
  width: 100% !important;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
 }
 .form-label-left, .form-label-right{
  width: auto;
 }
 .form-buttons-wrapper{
  margin-left:0 !important;
 }
 .form-all{
  width: 98%;
 }
 .form-sub-label-container{
  width: 100%;
  display:block;
 }
}
.jotform-form{
 padding-bottom:10px;
}

- If this is the CSS, there is an issue with it which might be the reason why it did not work when you had transferred it over.

I have made it bold with darker blue color.

Now when we take a look at the other jotform we could see what had happened, since I see that you have avoided IDs so it should work properly when pasted to another jotform.

Best Regards,
Ben

Hi Ben,

My objective here is to: (on a mobile device)

1) Horizontal padding between the fields and the edge of the screen.
2) Only vertically scrollable, no moving horizontally.

Something in the "WITH" CSS gets me what I like.
Ideally, going forward with new forms, I'd like to be able to customize fields first & then edit in Form Designer.  Then add the specific code to to achieve both objectives.

"WITHOUT" the CSS - (can be moved horizontally)

http://form.jotform.us/form/43296103486154

"WITH" the CSS - (CANNOT be moved horizontally)

http://form.jotform.us/form/43296662651158

Thanks

Brian

Hi Brian,

OK, I see the difference and inserting the code above, without the extra } in it seems to turn or fields into properly working ones.

Try injecting this into the one that can be moved horizontally:

.form-textarea, .form-textbox, .form-dropdown{
 width:100%;
 padding:8px;
 background-color: #ffffff;
 border: 1px solid #cccccc;
 -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
 -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
 -o-transition: border linear 0.2s, box-shadow linear 0.2s;
 transition: border linear 0.2s, box-shadow linear 0.2s;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
.form-textarea:focus, .form-textbox:focus, .form-dropdown:focus{
 border-color: rgba(82, 168, 236, 0.8);
 outline: 0  !important;
}
.form-line-error {
 background: none;
}
/*---------dropdown addon-------------*/
/*---------header blue-------------*/
.form-header-group {
 moz-box-shadow: inset 0px 1px 0px 0px #FAFCFD;
 -webkit-box-shadow: inset 0px 1px 0px 0px #FAFCFD;
 box-shadow: inset 0px 1px 0px 0px #FAFCFD;
 background-color: rgba(121, 187, 255, 0.59);
 background-color: #79BBFF9;
}
/*---------form border------------*/
.form-all{
 border: 1px solid #CCC;
 margin-top: 3px;
}
/*---------fix yellow active background overlapping-------------*/
.form-line {
 width:auto !important;
}
/*---------CUSTOM BUTTON-------------*/}
.form-input .form-error-message{
 box-shadow: none !important;
 border-radius: 0 !important;
 background:none !important;
}
.form-error-arrow{
 display:none;
}
.form-error-message img{
 margin-top: 1px;
}
.form-validation-error {
 box-shadow: none !important;
}
span.form-sub-label-container + span.form-sub-label-container {
 margin-right: 0;
}
.form-address-table select, .form-address-state, .form-address-table, .form-address-line, .form-address-table .form-sub-label-container {
 width: 100%;
}
.form-address-postal, .form-address-city{
 width: 99%;
}
.form-address-table {
 width: 100% !important;
}
.form-address-table td, .form-address-table th {
 padding-bottom: 10px;
 padding: 0 0 10px 0;
}
div span.form-sub-label-container + span.form-sub-label-container{
 width: 49%;
}
input[name$="[first]"], input[name$="[last]"]{
 width: 100%;
}
.form-sub-label-container {
 margin-right: 1px;
 width: 50%;
}
.form-label-left, .form-label-top {
 width: 100% !important;
}
.form-input{
 width: 100% !important;
 }
@media (max-width: 480px){
 .form-textarea, .form-textbox, .form-dropdown{
  width: 100% !important;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
 }
 .form-label-left, .form-label-right{
  width: auto;
 }
 .form-buttons-wrapper{
  margin-left:0 !important;
 }
 .form-all{
  width: 98%;
 }
 .form-sub-label-container{
  width: 100%;
  display:block;
 }
}
.jotform-form{
 padding-bottom:10px;
}

To test it I have cloned this http://form.jotform.us/form/43296103486154 jotform and injected the code above to it and it looks like this now: http://form.jotformpro.com/form/43296348893975

Do let us know how it goes.

Best Regards,
Ben

Hi Ben,

Yes, that injected CSS does the trick, but can you tell which portion of the code
results in the following:

1) Horizontal padding between the fields and the edge of the screen.
2) Only vertically scrollable, no moving horizontally.

Is there a workaround that would enable me to first modify the CSS in Form Designer and then still apply the portion of code to get the mobile result?

Thanks
Brian

Ben,

Actually there is an issue with "direct link" vs "embedded link".

Direct Link is centered properly in desktop FF v33 and is centered with no horizontal scrolling in mobile.

Embedded Link is centered in desktop FF v33 but does not display properly in mobile.

The link below has the injected CSS you sent me.  Could you please check for me

Thanks
Brian

"Embedded Link"
http://www.eforms.mobi/ben.html

"Direct Link"
http://form.jotform.us/form/43334174527151

Ben,

(Sorry, when you have time, can you please read the above to posts first, thanks)

Same issue when embedding "Dreamweaver" code.

Form does not center in desktop.

http://eforms.mobi/dreamweaver.html

Brian

Hi Brian,

Actually there is an issue with "direct link" vs "embedded link".

I took a look at the pages and there are 2 things that I have noticed. The embedded page has a bit of a margin applied to it because of the browser, so I had to cancel it first with margin:0 on body.

Once this was done the jotform took about the same space of the window. Now the next I noticed was that this CSS was applied in one jotform but not in another:

This bit of code, when added into the jotfowm shown the header change right away.

Now there are other issues such as the border radius and similar, which I can not right understand why it is like that. One thing comes to mind and that is to ask you to embed the jotform with iframe instead of JS embed just to see if the error happened while the js was working on creation of iframe.

Yes, that injected CSS does the trick, but can you tell which portion of the code
results in the following:

1) Horizontal padding between the fields and the edge of the screen.

I am glad that it works, but now the code:

 .form-all{
  width: 98%;
 }
.form-sub-label-container {
 margin-right: 1px;
 width: 50%;
}

- I believe these are the only ones that do this - do note that CSS always depends on the previous CSS code that you had in your code. What this means is that if your jotform has padding-left:10px and you apply this code on it, it will look in one manner. But if you have padding-left:20px the CSS would need to be slightly modified to keep the specific layout.

2) Only vertically scrollable, no moving horizontally.

 .form-all{
  width: 98%;
 }

- It will make it fall within this width, but you are doing it with all the other code as well, depending on the additional styles applied to form-all.

* To explain this with example. If you set overflow: hidden on the .form-all, the fields inside of it could be 3000px wide, they would not be shown and the scrollbar could be shown on .form-all, but we could also remove it by adding overflow-y: scroll; and overflow-x: none;

I hope that I am explaining it correctly, in few words, there is Browsers CSS and the CSS that we add, both impacting how something looks, which is why you could find some websites appear differently across the different browsers.

Now to try to answer the last question above under 2): That code in blue would do that, but you also need to set overflow-x: none; and set the fields on the jotform to fall in to this width. Usually this means that you set the fields inside (such as input) to 100% and set their parent elements to certain width.

I hope this helps, but do let us know if you have any further questions.

Best Regards,
Ben

Ben,

Regarding Direct Link vs Embedded Links issue - same code from Jotform, direct link works but without using an iframe, the embedded links seem to always have issues.  I'll just use Direct Links.

Back to my original issue:

This injected code displays perfectly in desktop and mobile (centered & no horizontal scrolling)
EltonCris' Responsive "Contact Us" Template.

http://form.jotform.us/form/43387469614163

Is it possible to extract only the portion of this code to achieve centering & no horizontal scrolling only?

Is it then possible to make edits edits in Forms Designer, color, insert image etc and then STILL have the above code be responsive, either before or after injecting EltonCris' code?

Thanks
Brian

Hi Brian,

You can do get the CSS codes on the template jotform http://form.jotform.us/form/43387469614163 by EltonCris.

Follow this steps

1. Clone the jotform http://form.jotform.us/form/43387469614163 (user guide: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL)

2. Open the cloned form in your Form Builder.

3. Check and copy the custom injected CSS code in that form. From what I see, it did not use the new Form Designer yet during the time the template form was created. So, it has a lot more custom CSS code on it

4. Once you got hold of the custom CSS codes, you can now make use of it on your own version of form.

Yes, you can still use the Form Designer to mix and match the codes to get the desired styles.

The Form Designer also have its CSS editor/designer. So you can use it to modify the existing CSS codes

Hope this help. Inform us if you need further assistance.

Thanks.

Yes, I understand.  I was hoping you could tell me WHICH portion of Elton's code will
display perfectly in desktop and mobile (centered & no horizontal scrolling)