I have a form that enables me to enter a number in each box but it looks silly on mobile

  • Profile Image
    mhowe479
    Asked on July 17, 2018 at 11:43 PM

    I have created a field called BSB which is the first field. It works well on desktop but the field input view on mobile is too small. There is some css that you guys sent me in the form but I don't know enough about css to change it to appear better.

  • Profile Image
    EltonCris
    Answered on July 18, 2018 at 03:08 AM

    It's indeed terrible on mobile. :)

    Inject this CSS codes to your form. This should correct it.

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

    table.form-matrix-table {

        width: 100% !important;

    }

    td.form-matrix-values {

        padding: 1px;

    }

    [data-type="control_matrix"] .form-number-input {

        width: 36px !important;

    }}

    Result: 

  • Profile Image
    mhowe479
    Answered on July 22, 2018 at 07:31 PM

    Thank you for this, this has indeed fixed the mobile result. I have added a few more input tables in the same form, some with more than 6 inputs up to 10 11 inputs, and while they still look fine on mobile, the result in normal PC view doesn't look nearly as good. Do you have any css suggestion to improve this? 

  • Profile Image
    EltonCris
    Answered on July 22, 2018 at 10:43 PM

    You need to expand the width of those 2 tables too. Use the following CSS codes.

    #cid_165 .form-matrix-table,

    #cid_166 .form-matrix-table {

        width: 352px !important;

    }

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

    #cid_165 .form-matrix-table,

    #cid_166 .form-matrix-table {

        width: 100% !important;

    }

    .form-description {

        top: 64px;

    }    

    .form-line-error {

        overflow: visible;

    }    


    .form-description-arrow {

        border-color: transparent transparent #cccccc transparent;

        left: 62px;

        top: -21px;

    }    

    .form-description-arrow-small {

        border-color: transparent transparent #F5F5F5 transparent;

        left: 65px;

        top: -13px;

    }    

    }

    Result:

    Mobile:

    Desktop:

  • Profile Image
    mhowe479
    Answered on July 22, 2018 at 10:52 PM

    Thank you. I have a few more input tables in the form. Do I just add them to both to the first and second part of css you gave for them to be included? Like below:

    #cid_165 .form-matrix-table,

    #cid_166 .form-matrix-table

    #cid_167 .form-matrix-table

    #cid_168 .form-matrix-table

    #cid_169 .form-matrix-table

    #cid_170 .form-matrix-table

    #cid_171 .form-matrix-table {

        width: 352px !important;

    }

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

    #cid_165 .form-matrix-table,

    #cid_166 .form-matrix-table

    #cid_167 .form-matrix-table

    #cid_168 .form-matrix-table

    #cid_169 .form-matrix-table

    #cid_170 .form-matrix-table

    #cid_171 .form-matrix-table {

        width: 100% !important;

    }

    .form-description {

        top: 64px;

    }    

    .form-line-error {

        overflow: visible;

    }    


    .form-description-arrow {

        border-color: transparent transparent #cccccc transparent;

        left: 62px;

        top: -21px;

    }    

    .form-description-arrow-small {

        border-color: transparent transparent #F5F5F5 transparent;

        left: 65px;

        top: -13px;

    }    

    }

  • Profile Image
    EltonCris
    Answered on July 22, 2018 at 11:09 PM

    Yes, that's correct.

    And if a certain table needs more width, you can separate it from others like the following.

    #cid_172 .form-matrix-table {

        width: 400px !important;

    }

    By the way, the following part is optional. This moves the field description slightly at the bottom since it covers the field. If it creates issues for some fields, you can remove it.

    .form-description {

        top: 64px;

    }    

    .form-line-error {

        overflow: visible;

    }    

    .form-description-arrow {

        border-color: transparent transparent #cccccc transparent;

        left: 62px;

        top: -21px;

    }    

    .form-description-arrow-small {

        border-color: transparent transparent #F5F5F5 transparent;

        left: 65px;

        top: -13px;

    }  


  • Profile Image
    mhowe479
    Answered on July 23, 2018 at 12:54 AM

    Hi,

    It still doesn't look quite right on some of the fields on PC. The box for each individual number input doesn't fit nicely in the centre of the view so they seem to slightly overlap. Is this something to do with the other css in the form or do I just have to make each different input a different size depending ont eh number of inputs (boxes) I need for each one. It looks perfect on mobile.

    The only problem with the mobile is I have the preview before submit widget included but the text boxes that I have included in the form do not show properly and I can't scroll to the right to see the full text.

  • Profile Image
    ashwin_d
    Answered on July 23, 2018 at 07:15 AM

    I am sorry for the trouble caused to you. 

    I would suggest you to please share a screenshot of the questions which does not appear correctly in your form and we will take a look.

    The following guide should help you how to upload image in forum post:   https://www.jotform.com/help/438-How-to-Post-Screenshots-to-Our-Support-Forum

    We will wait for your response.

  • Profile Image
    mhowe479
    Answered on July 23, 2018 at 11:18 PM

    Here are the screenshots. I have labelled them to include the input number they belong to. In the build screen they look perfect but then on the actual entry link they appear like this. Only BSB which is inputs 164 and 170 appears how I would like them all to appear.1532401909AC Number input 165.JPG1532401921TFN input 166.JPG1532401933TFN input 167.JPG1532401944FUND ABN input 168.JPG1532401954Fund ABN input 169.JPG1532401965AC Number input 171.JPG 

    Here is what the preview before submit looks like on a mobile:

    1532402263Preview Before Submit overflow1532402277Preview Before Submit overflow

  • Profile Image
    Nik_C
    Answered on July 24, 2018 at 02:52 AM

    Maybe a padding CSS could help with that issue, and you can do that by inserting this CSS:

    .form-matrix-values {

        padding-right: 10px;

    }

    That should increase the box so it doesn't overlap:

    1532415104Screen Shot 2018-07-24 at 8.49

    Or:

    1532415117Screen Shot 2018-07-24 at 8.50

    Would that work for you?

    Thank you!

  • Profile Image
    mhowe479
    Answered on July 24, 2018 at 08:52 PM

    Hi, doesn't seem to have made a difference. The second 2 pictures I opened in Mircrosoft Edge to see if it was any different but in fact it looks worse.

    1532479811AC number input 165 capture 2.1532479821AC number input 165 capture 31532479831AC number input 165 capture 3

    Here is all my current css in the form. Maybe I have made an error adding each time you've responded and I need to take some out?

    .mask-phone-number.form-textbox {

        width : 180px!important;

    }

    .form-number-input{

      width: 90% !important;

    }

    table.form-matrix-table tbody tr:first-child{

        display: none !important;

    }

    table.form-matrix-table {

        width: 200px !important;

    }

    [data-type="control_matrix"] .form-number-input {

        width: 70% !important;

    }

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

    table.form-matrix-table {

        width: 100% !important;

    }

    td.form-matrix-values {

        padding: 1px;

    }

    [data-type="control_matrix"] .form-number-input {

        width: 18px !important;

    }

    #cid_165 .form-matrix-table,


    #cid_166 .form-matrix-table


    #cid_167 .form-matrix-table


    #cid_168 .form-matrix-table


    #cid_169 .form-matrix-table


    #cid_170 .form-matrix-table


    #cid_171 .form-matrix-table {


        width: 352px !important;


    }


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


    #cid_165 .form-matrix-table,


    #cid_166 .form-matrix-table


    #cid_167 .form-matrix-table


    #cid_168 .form-matrix-table


    #cid_169 .form-matrix-table


    #cid_170 .form-matrix-table


    #cid_171 .form-matrix-table {


        width: 100% !important;


    }


    .form-description {


        top: 64px;


    }    


    .form-line-error {


        overflow: visible;


    }    



    .form-description-arrow {


        border-color: transparent transparent #cccccc transparent;


        left: 62px;


        top: -21px;


    }    


    .form-description-arrow-small {


        border-color: transparent transparent #F5F5F5 transparent;


        left: 65px;


        top: -13px;


    }    

    .form-matrix-values {

        padding-right: 10px;

    }


    }

    }

  • Profile Image
    Jed_C
    Answered on July 24, 2018 at 10:20 PM

    I'm unable to replicate the view you see on other device. Here's what I see when I view your form https://www.jotformpro.com/form/81627759205968.

    Chrome mobile screen size view:

    15324851372018_19 Employment Forms - Goo

    MS Edge mobile screen size view:

    1532485166Microsoft Edge 2018-07-25 10.1

    May I know what device and browser are you using? Looking forward for your response. 

  • Profile Image
    mhowe479
    Answered on July 24, 2018 at 10:42 PM

    Hi,

    The view seems fine on mobile. It is on PC in Google Chrome and MS Edge that the view is as per the images I posted.

  • Profile Image
    mhowe479
    Answered on July 24, 2018 at 10:44 PM

    The mobile view issue is with the preview before submit widget which makes all of the heading and text box and some responses wider that the screen view.

  • Profile Image
    EltonCris
    Answered on July 25, 2018 at 03:09 AM

    Replace the CSS codes I've provided before with the CSS codes here https://pastebin.com/raw/tRT1AaBA

    Here's a demo on the cloned version: https://form.jotform.com/82051355991964

    This should work fine on any browser.

    If you see any problem, let us know.


  • Profile Image
    mhowe479
    Answered on July 25, 2018 at 07:43 PM

    Thank you, I am happy enough with the result. The A/C field on mobile goes across the screen and requires a little bit of scrolling but that is ok. Maybe it is because that field is set to require at least one box filled, not every box, as they don't have to be 10 digits long?

    I have build a condition that if the TFN is entered above that it automatically copies it into the same required field further on in the form but this doesn't work. Is this because1532562197TFN Condition.JPG it is an input table?

  • Profile Image
    luisvcsilva
    Answered on July 25, 2018 at 10:40 PM

    You can disable the scrolling in the A/C Field by adding the underlined instruction to the following CSS fragments:

    Fragment 1:

    /*matrix with more than 6 inputs*/

    #id_169 .form-matrix-table,

    #id_165 .form-matrix-table,

    #id_166 .form-matrix-table,

    #id_167 .form-matrix-table,

    #id_168 .form-matrix-table,

    #id_169 .form-matrix-table,

    #id_171 .form-matrix-table{

    width: 370px !important;

            overflow: hidden;

    }


    Fragment 2:

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

    /*matrix with more than 6 inputs*/

    #id_169 .form-matrix-table,

    #id_165 .form-matrix-table,

    #id_166 .form-matrix-table,

    #id_167 .form-matrix-table,

    #id_168 .form-matrix-table,

    #id_169 .form-matrix-table,

    #id_171 .form-matrix-table{

    width: 100% !important;

            overflow: hidden;


    }

    Or by changing the width of the input table, as shown by the image below:

    1532571203tablewidth.png

    Regarding your question about the conditions, you won't be able to access and/or manipulate the values within an Input Table using Conditional Rules, what you can do in order to copy the value from the field #49 (an input table) to the field #80, is to replace both of them by short text entry, and use an Input Mask in order to restrict the input to match with a valid TFN. 


    Contact us if you need any assistance,

    Thanks.