Alignment issues with form fields on the form

Hello,

I am creating a form in Hebrew and have some challenges with the Mobile version.

see Loom attached.

Thank you

Nimrod

Hello Nimrod,

Thanks for reaching out to Jotform Support. I’m sorry you're having issues with your form. Let me look into it and get back to you with a solution.

We appreciate your patience and understanding.

Hello Nimrod,

Thanks for your patience, we appreciate it. Upon checking your form, it looks like there's a lot of existing CSS already. Can you please try to clone your form and replace the existing CSS with the ones below:

/* set the form direction rtl */



.form-all {

  direction : rtl !important;

  float : none!important;

  text-align : right !important;

}



/* to align inputs & dropdown */



.form-line-column, .form-label, .form-label-top,

.form-label-left, .form-label-right, .form-html,

.form-checkbox-item label, .form-radio-item label,

.form-radio-other-input, .form-textbox, .form-dropdown,

.form-textarea, .custom-hint-group, .form-custom-hint {

  text-align : right !important;

}



.form-line-column .form-label {

  text-align : right !important;

}



.form-matrix-table {

  direction : rtl !important;

  text-align : right !important;

}



/* to align single & multipl choice */

.form-multiple-column .form-checkbox-item,

.form-multiple-column .form-radio-item,

.form-single-column .form-checkbox-item,

.form-single-column .form-radio-item {



  float : none !important;

  direction : rtl !important;

  text-align : right !important;

  padding-right : 5px !important;

  display : block;

}





/* to align single & multipl choice */

.form-sub-label {

  direction : rtl;

  text-align : right !important;

}





/* to align single & multipl choice */

.form-checkbox-item input:checked + label:after {

  position : absolute;

  direction : rtl !important;

  right : 5px !important;

  float : right;

}





/* to align single & multipl choice */

.form-checkbox-item label:before {

  position : relative;

  direction : rtl !important;

  display : inline-flex;

}





/* to align single & multipl choice */

.form-radio-item input:checked + label:after {

  position : absolute;

  direction : rtl !important;

  right : 7px !important;

  float : right;

}





/* to align single & multipl choice */

.form-radio-item label:before {

  position : relative;

  direction : rtl !important;

  display : inline-flex;

}





/* to align buttons */

.form-pagebreak {

  float : right;

}



.custom-field-frame,.custom-field-frame-rendered,.frame-xd-ready,.frame-ready {

  max-width : 100% !important;

  width : 100% !important;

}



@media screen and (max-width: 480px) {

label.form-label.form-label-auto, label.form-label:not(.form-label-top) {

    justify-content: flex-start;

    width: 100% !important;

    text-align: right !important;

}

}

I've tested it on my mobile device and it worked fine. Check out the screenshot below:

Alternatively, you can also clone this form so you don't need to start again. This guide will help you how to clone a form from a different account.

Give it a try and let us know if you have any other questions.

Hello,

Thanks for your suggestions.

I cloned the form and used the css you suggested. This works thank you!

However a few issues were created and some issues were not resolved.

So here are the Desktop version issues:

https://www.loom.com/share/d3d78ea6bdac43959e56353f9f41dd52

Here are the Mobile version ( iPhone 12 pro was used here ) issues:

https://www.loom.com/share/9d3fca79b2b6474e886d4fdc16074222

Another mobile issue I noticed after creating this recording is that the first 2 text fields appear "out of frame" .

Awaiting your suggestions.

Thank you,

Nimrod

Hi Nimrod,

Thanks for sharing the recording explaining the issues. I’m sorry you're having issues with your form. I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

Thanks for your patience and understanding.

Hi Nimrod,

Thanks for patiently waiting. To fix the alignment issues in your form, please add the below CSS code to the Inject Custom CSS section of your A DAY IN A LIFE form:

/* set the form direction rtl */

.form-all {

    direction : rtl !important;

    float : none!important;

    text-align : right !important;

}





/* to align inputs & dropdown */

.form-line-column, .form-label, .form-label-top,

.form-label-left, .form-label-right, .form-html,

.form-checkbox-item label, .form-radio-item label,

.form-radio-other-input, .form-textbox, .form-dropdown,

.form-textarea, .custom-hint-group, .form-custom-hint {

    text-align : right !important;

}





.form-line-column .form-label {

    text-align : right !important;

}





.form-matrix-table {

    direction : rtl !important;

    text-align : right !important;

}





/* to align single & multipl choice */

.form-multiple-column .form-checkbox-item,

.form-multiple-column .form-radio-item,

.form-single-column .form-checkbox-item,

.form-single-column .form-radio-item {

    float : none !important;

    direction : rtl !important;

    text-align : right !important;

    padding-right : 5px !important;

    display : block;

}





/* to align single & multipl choice */

.form-sub-label {

    direction : rtl;

    text-align : right !important;

}





/* to align single & multipl choice */

.form-checkbox-item input:checked + label:after {

    position : absolute;

    direction : rtl !important;

    right : 5px !important;

    float : right;

}





/* to align single & multipl choice */

.form-checkbox-item label:before {

    position : relative;

    direction : rtl !important;

    display : inline-flex;

}





/* to align single & multipl choice */

.form-radio-item input:checked + label:after {

    position : absolute;

    direction : rtl !important;

    right : 7px !important;

    float : right;

}





/* to align single & multipl choice */

.form-radio-item label:before {

    position : relative;

    direction : rtl !important;

    display : inline-flex;

}





.custom-field-frame,.custom-field-frame-rendered,.frame-xd-ready,.frame-ready {

    max-width : 100% !important;

    width : 100% !important;

}





@media screen and (max-width: 480px){

    label.form-label.form-label-auto, label.form-label:not(.form-label-top) {

        justify-content : flex-start;

        width : 100% !important;

        text-align : right !important;

    }





}





ul#tabs-list > li.current {

    text-decoration : underline;

    text-decoration-thickness : 2px;

    text-decoration-color : #fd8772;

    text-underline-offset : 5px;

}





#first_3.form-textbox {

    width : 289px!important;

    height : 39px!important;

    margin : 0 0 4px 20px!important;

    border : solid 1px #e9e9e9!important;

}





#last_3.form-textbox {

    width : 289px!important;

    height : 39px!important;

    margin : 0 30px 4px 0!important;

    border : solid 1px #e9e9e9!important;

}





.progressBar-newDefaultTheme .progressjs-progress {

    background : #fcd1ca!important;

}





li[data-type="control_phone"] * {

    direction : ltr !important;

}





.formLogoWrapper.Center {

    top : -108px!important;

}





label#sublabel_3_last {

margin-right: 30px;

}





#input_31 {

    background-color: #fd8772;

    border-radius: 25px;

    border-color: #fd8772;

}





.form-submit-button.submit-button.jf-form-buttons.jsTest-submitField {

    font-size : 18px!important;

    font-family : Arimo!important;

    font-weight : bold;

}





.form-pagebreak {

    border-top: 0px solid;

}

You might also want to check out this guide about How to Inject Custom CSS Codes

Also, add below code to the Custom CSS section of the Forms Tab widget:

.tabs-list li {

font-size: 18px!important;

  font-weight: bold!important;

border-bottom:2px,color:#000000;

}

:current(p, span) {

  background-color: yellow;

}

@media only screen and (max-width: 480px) {

li#form-tab-4{

    width: 46%;

}

}

Additionally, you could clone my test form (https://form.jotform.com/222150772576962) into your account to see the settings and to do more test on it.

Give it a try and let us know how it goes.

Hello,

Thank you.

However I still encounter some issues on mobile as you can see here -

https://www.loom.com/share/0681f755d2494587b032d4691d9e53ea

1. logo margin from top
2. name fields go out of body
3. bottom tab not aligned to the right
4. send button is green with wrong font and no radius at all and located wrong.

the form I am referring to is:

clone of Day In A Life-

https://form.jotform.com/222147365008148

Thank you

Nimrod

Hello Nimrod,

I'm sorry if you're still having issues with your form. We'll need a bit of time to look into this and we'll let you know on this thread as soon as we have an update.

We appreciate your patience and understanding.

Hello Nimrod,

Thanks for your patience, we appreciate it. To fix the form layout on a Mobile view, can you please remove the existing code below on the CSS box? The code breaks the Full name on being responsive in Mobile view:

#last_3.form-textbox {

width: 289px!important;

height: 39px!important;

margin: 0 30px 4px 0!important;

border: solid 1px #e9e9e9!important;

}

Then, add the code below:

@media screen and (max-width:480px){.formLogoWrapper.Center {top: -92px!important; } ul#tabs-list {margin-left: 0 !important; margin-right: 0 !important; } .tabs-list.upcoming li {margin-right: 0 !important; padding-right: 0 !important; } a.jf-branding {position: absolute; bottom: 0; text-align: center; right: 4px; width: fit-content !important; } .form-pagebreak {width: 100%  !important; display: flex; align-content: stretch; align-items: center; flex-wrap: nowrap; justify-content: space-between; } .jf-form-buttons:not(.form-pagebreak-back) {margin: 0 !important; } .form-pagebreak {justify-content: space-between; } .form-pagebreak-back-container {margin-right: unset !important; } .form-submit-button, .jf-form-buttons{font-weight: normal !important; font-size: 12pt !important; border:1px solid #e5e7f2 !important; border-radius:6px !important; } } .form-input-wide{max-width:unset !important; } /*responsive full name rtl mode*/ [data-type="control_fullname"] .form-dropdown {width: 100% !important; } [data-type="control_fullname"] .form-sub-label-container {margin:0 !important; float:left; box-sizing: border-box; } [data-type="control_fullname"] span.form-sub-label-container:first-child:nth-last-child(2), [data-type="control_fullname"] span.form-sub-label-container:first-child:nth-last-child(2) ~ span {width: 50%; } [data-type="control_fullname"] span.form-sub-label-container:first-child:nth-last-child(3), [data-type="control_fullname"] span.form-sub-label-container:first-child:nth-last-child(3) ~ span {width: 33.3%; padding:4px; } [data-type="control_fullname"] span.form-sub-label-container:first-child:nth-last-child(4), [data-type="control_fullname"] span.form-sub-label-container:first-child:nth-last-child(4) ~ span {width: 25%; padding:4px; } [data-type="control_fullname"] span.form-sub-label-container:first-child:nth-last-child(5), [data-type="control_fullname"] span.form-sub-label-container:first-child:nth-last-child(5) ~ span {width: 50%; } [data-type="control_fullname"] span.form-sub-label-container:nth-child(odd){padding-left:4px !important; } [data-type="control_fullname"] span.form-sub-label-container:nth-child(even){padding-right:4px !important; } [data-type="control_fullname"] span.form-sub-label-container:first-child{padding-right:0 !important; } [data-type="control_fullname"] span.form-sub-label-container:last-child{padding-left:0 !important; } [data-type="control_fullname"] span.form-sub-label-container:nth-child(5){padding-right:4px !important; }

Result:

Let us know if there's anything else we can help you with.

ok, this improves the situation with the mobile.

However 3 things I had before and are gone now and they are still needed in the mobile version:

1. The next / back/ send buttons need to have a radius like in the desktop version.
   border-radius: 100px;
2. Send button background needs to be the same color as the next/ back buttons : #fd8772.
3. The tabs are now aligned horizontally and I need them vertical.
4. The logo needs to have a 40px margin on top and bottom.

For the desktop version:

1. Next button needs to be aligned to the left.
2. Send button background needs to be the same color as the next/ back buttons : #fd8772.
3. send buttons need to have a radius like in the desktop version. border-radius: 100px;

Thank you very much for your amazing support.

Nimrod

Hello Nimrod,

Please allow me some time to work on the CSS codes, I will get back to you as soon as I have an update.

I have moved your other inquiry to a new thread and will help you with that here.

Thank you for your patience.

Hello,

The translation issue is resolved. thank you

I solved some of the other issues I mentioned earlier.

However I still need a solution for these issues:

Mobile version:

1. the 2nd tabs is now aligned horizontally and I need them vertical.

Desktop version:

1. Next button needs to be aligned to the left, while back button need to be aligned to the right.

Also how can I get the Save button text to change to Hebrew?

Thank you,

Nimrod

Hello,

The translation issue is resolved. thank you

I solved some of the other issues I mentioned earlier.

However I still need a solution for these issues:

Mobile version:

1. the 2nd tabs is now aligned horizontally and I need them vertical.

Desktop version:

1. Next button needs to be aligned to the left.
2. Approval widget does not align to the right. although set in the widget settings.

Thank you,

Nimrod

Hello Nimrod,

Thanks for getting back to us. Kindly inject the codes below directly on your Terms and Conditions widget to align them to the right.

#main{

    direction: rtl !important;

}

To confirm, do you want to move only the Next button to the left and leave the Back and Save button to the right?

Regarding the mobile view, I wasn't able to understand the remaining issue. Can you take a screenshot and show it to us? This guide will show you how to do that.

Hello,

thanks for the explanation this solves the issue here.

as for your question:

yes, I need the next button to be on the left and back button on the right. save can be in the center.

as for the issue with the mobile-

1. logo at the top is "cut".
2. one of the tabs at the top is misaligned.
3. next button needs to be aligned to the left.
4. send button is misaligned. needs to be to the left.

see here:

https://www.loom.com/share/8c497f127255414094fc677ef2db4ccf

Thank you

Nimrod

Hello Nimrod,

Thanks for reaching out to Jotform Support. Kindly allow me some time to investigate this inquiry further. We will notify you through this ticket soon.

We appreciated your patience and understanding.

Hello Nimrod,

Thank you for being patient with us as we look further into this. Kindly add the following code to your form:

/* For mobile view */

@media only screen and (max-width: 600px) { 



/* To adjust the logo */

.formLogoWrapper.Center { 

margin-top: 0px 

}



/* To adjust the tab*/

ul#tabs-list { 

padding-right: 0 !important; 

position: relative; 

right: -10px !important; 

}



/* To adjust the width of Save button */ 

button#input_scl_8, 

button#input_scl_15, 

button#input_scl_19, 

button#input_scl_42, 

button#input_scl_31 { 

width: 90px; 

} 



/* To add the Hebrew translation to Save button */

.form-pagebreak-next-container.form-pagebreak-save-container:after { 

content: "לשמור"; 

font-size: 1.2em; 

position: relative; 

margin-left: -50px; 

left: 80px !important; 

top: 18px; 

}      



/* To add the Hebrew translation to Save button on Submit tab*/

button#form-pagebreak-back_8:after { 

content: "לשמור"; 

font-size: 1.0em; 

position: relative; 

margin-left: -50px; 

left: 270px; 

}



/* To adjust the spacing between Next Previous Save button */

.form-pagebreak-next-container.form-pagebreak-save-container, 

.form-pagebreak-next-container { 

margin-right: -8px !important; 

}



container.form-pagebreak-save-container { 

margin-right: -1px !important; 

}



.form-pagebreak { 

padding-right: 12px !important; 

}



}



/* To adjust the tab */

.tabs-list { 

margin: 0 !important; 

padding: 0 25px !important;

}



/* To change Next to left order */

.form-pagebreak>div.form-pagebreak-next-container { 

-ms-flex-order: 1; 

order: 1; 

}



/* To change Back to right order */

.form-pagebreak, 

.form-pagebreak>div { 

display: -ms-flexbox; 

display: flex; 

order: 3; 

}



/* To hide English text of Save */

button#input_scl_8, 

button#input_scl_15, 

button#input_scl_19, 

button#input_scl_42, 

button#input_scl_31 {

color: white !important;

}



/* To add the Hebrew translation to Save button */

.form-pagebreak-next-container.form-pagebreak-save-container:after { 

content: "לשמור"; 

font-size: 1.2em; 

position: relative; 

margin-left: -45px; 

left: 85px; 

top: 18px; } 



/* To add the Hebrew translation to Save button on Submit tab*/

button#form-pagebreak-back_8:after { 

content: "לשמור"; 

font-size: 1.0em; 

position: relative; 

margin-left: -45px; 

left: 355px; 

}



/* To hide English text of Save on hover */

.form-sacl-button:hover { 

background: white; 

color: white; }

Let us know if you need further help.

Hello,

Thanks we are almost there-

• now back button is on the left and forward button is on the right. I need it exactly the opposite-
  Back button on the right
  Forward button on the left.
• Nothing changed with the logo it is still cut in half in mobile view...even if I add 20px margin from top.
• the issue with the tabs is not resolved in mobile yet

Thank you

Nimrod

Hello,

On top of previous message I just noticed this as well:

https://www.loom.com/share/d5c7d8deeec94aa38272393cfa45d099

Thank you

Nimrod

Hello again,

I think I solved the logo issue. so no need for help here.

Other issues mentioned in last to replies still need your attention.

Thank you

Nimrod

Hello Nimrod,

Thanks for getting back to us. We're working on the codes to fix the alignment of your form in Mobile view. I'll let get back to you as soon as I can.

We appreciate your patience.

hello,

Any news?

thx,

Nimrod

Hello Nimrod,

We apologize to keep you waiting.

We are still working on the CSS codes to completely fix your concerns. Rest assured that we will get back to you as soon as we have it completed.

We appreciate your patience and understanding.

If you have additional questions, feel free to contact us.

Hello Nimrod,

Thanks for your patience, we appreciate it. Can you please add the codes below to your existing CSS? This should align the Form Tabs widget, and correct the Next/Back button:

li[data-type="control_pagebreak"] > div {

    flex-direction: row-reverse;

}



@media only screen and (max-width: 420px) {

  li[data-type="control_pagebreak"] > div {

    width: 100% !important;

}



  .form-pagebreak-back-container > button, .form-pagebreak-next-container > button, .form-pagebreak-save-container > button {

    min-width: 80px !important;

}



.tabs-list.upcoming li 

{margin-right: 0 !important; 

padding-right: 0 !important; 

  

}

}

Give it a try and let us know how it goes.

Hello,

thank you for your reply.

Unfortunately issues are not resolved.

Please watch the loom here for explanation of all issues.

https://www.loom.com/share/c904237a8fe148b0a5117259e1a60a5e

Issues that are not resolved yet

Mobile:

1. Tabs at the top after your last suggestion they are suddenly set up in horizontal in 2 lines...They need to be aligned vertically= one above the other.
2. Buttons at the bottom: Forward (orange) needs to be aligned to the left, Save (white) needs to be aligned to the center, Back (gray) needs to be aligned to the right.
3. Buttons on the last page: Send (orange) needs to be aligned to the left, Save (white) center, Back (gray) aligned to the right.

Desktop:

1. Logo needs to be aligned 20 px above form and 20 px from top of page.
2. Buttons at the bottom are misaligned. they need to be: Forward (orange) needs to be aligned to the left, Save (white) needs to be aligned to the center, Back (gray) needs to be aligned to the right.
3. Buttons on the last page: Send (orange) needs to be aligned to the left, Save (white) center, Back (gray) aligned to the right. also text inside the buttons need to be centered.

Thank you

Nimrod

Hi Nimrod,

Thanks for your reply and sharing the additional details. I'll need some more time to look into this and will get back to you as soon as I can. Thanks for your patience and understanding.

Hello Nimrod,

I'm working on this. I'll fix the existing CSS code that you already have in the form and also add any new code to fulfill your requirement as per your instructions in the video. I'll give you an update here as soon as it is done.

Hello Nimrod,

Thanks for patiently waiting. I've added all the necessary CSS code in your form to achieve the results exactly as you've explained in your video. Here is a screencast of your form.

Please check your form now. Here is also a clone of your form.

Please do not make any changes to the existing CSS code. Let us know if you need any help with the code again and we will be happy to assist.

Hello, great this is excellent.

Most of this works.

There are however 3 issues:

• This widget is missing on desktop. it does show correctly on mobile though.

• The logo is cut on Mobile.

• and I believe there is a bug within the css editor.

https://www.loom.com/share/ca12d21ae55e400a88bcb5566ebd5a7b

Thank you

Nimrod

Hello Nimrod,

Thanks for getting back to us. The widget text on the last page is visible on both desktop and mobile. Please check it in a different browser. It could be due to browser cache. You can check the screencast I shared in my last reply. You'll see that the text is visible. Here is a screenshot I've taken just now.

I've fixed the logo in the mobile view. Please check now.

The bug in the CSS editor that you are referring to is actually not a bug. There is some CSS code in your form that was not necessary. It appears that this media query is controlling CSS code for some elements. So I would recommend leaving this as it is. Please let us know if you need any other help.

Hello,

Yes all seems to be in order now.

Thank you for your reply.

Nimrod