Width of Input table field is not displayed correctly.

  • Profile Image
    Pumba1987
    Asked on January 22, 2018 at 05:28 AM

    We have some problems with the size of the field "input table". We always set a default size for this field and then if you open the form, the size isn't the same. I attached some pictures for you.1516616894IMG_0085.PNG1516616867IMG_0084.PNG

  • Profile Image
    Ardian_L
    Answered on January 22, 2018 at 09:10 AM

    Can you please put this CSS Code in Custom CSS Area:

    .form-input, .form-matrix-table {

        width: 100% !important;

    }

    Please check the link below how to inject custom css on the form:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Let us know if you have any other question.

  • Profile Image
    Pumba1987
    Answered on January 23, 2018 at 02:10 AM

    Hi Ardian_L

    Thanks for your help, it worked with your code. After i insert your code, i saw that some other fields also changed. I attached some picture where you can see it. 
    It is not the worstest thing ever see but if there is a possibility tho have it like befor, that would be nice because it take more space on screen now and befor the overview was better.

    151669134623-01-2018 07-54-56.png

    151669136123-01-2018 07-59-06.png

    I already tried to change it with settings of the fields but i was not able to change it and i have no knowlegde about CSS.

    If something not clear please feel free to ask me.

  • Profile Image
    Ardian_L
    Answered on January 23, 2018 at 05:02 AM

    I apologize about that, I have removed that CSS Code and used another one:

    @media (min-width:1024px){

      table.form-matrix-table {

          min-width: 678px !important;

          max-width: 678px !important;

      }

    }

    I have already replaced for you. Please let us know if you have any other question.

  • Profile Image
    Pumba1987
    Answered on January 23, 2018 at 10:34 AM

    No problem, thanks that you looking into it. I checked it and now we are back to the first issue we had. I don't know if you have another solution or if we change back to first CSS-Code.

  • Profile Image
    ashwin_d
    Answered on January 23, 2018 at 12:06 PM

    I have fixed this issue by removing the existing custom css code and injected the following custom css code:

    .form-matrix-table {

        width: 100% !important;

    }

    I would suggest you to please test your form and get back to us if the issue persists.

    We will wait for your response.


  • Profile Image
    Pumba1987
    Answered on January 24, 2018 at 09:48 AM

    That's the solution, now it looks exactly like we like to have.

    Thanks a lot, you are great!

  • Profile Image
    Pumba1987
    Answered on April 09, 2018 at 05:34 AM

    Good Day Dear Jotform-Team

    We have this issue again, i tried to insert the last CSS-Code in another Form we have but now it doesent works. PLease, can you have a look if i do something wrong? I already tried the other codes you noted here, i tried to clear Form-Cache and also with Browser-Cache.

    PLease take following link as example:

    https://form.jotformeu.com/71243706381352

    Thanks for your help.

  • Profile Image
    Kiran
    Answered on April 09, 2018 at 10:23 AM

    Please try adding the following CSS code to your other JotForm to display the tables correctly.

    [data-type="control_matrix"] div {

      display: block !important;

    }

    Thank you!

  • Profile Image
    Pumba1987
    Answered on April 09, 2018 at 10:51 AM

    Not that bad, they are all same size now but all on the right and not over the whole form as they should

    152328546709-04-2018 16-49-19.jpg

  • Profile Image
    Mike_G
    Answered on April 09, 2018 at 01:39 PM

    I have checked your form from a clone version and I see that you haven't added the CSS codes provided by my colleague, Kiran, above.

    Since that is the case, I suggest that you do this instead.

    As part of the solution, I think it would be best if you set the Label Alignment of each Input Table field in your form to Top, but not set it as default so the other fields will not be affected by it.

    1523295067t13_28_40.png

    Then, just add the following CSS codes to your form.

    li[data-type="control_matrix"] table {

        width: 100% !important;

        max-width: initial;

    }

    th.form-matrix-column-headers {

        width: 72px !important;

    }

    Check your form after and it should look similar to the image below. The label on top of each table and each table extended across the form.

    1523295348t13_35_19.png

    Otherwise, please feel free to let us know.

  • Profile Image
    Pumba1987
    Answered on April 16, 2018 at 02:21 AM

    Hi

    Sorry for my late answer. I tested it on different forms i created and with this code, all of them looks as we like to have them.

    Thank you very much for your help :-)

  • Profile Image
    Kiran
    Answered on April 16, 2018 at 03:26 AM

    Great! Glad to see that the issue is now resolved for you and thank you for updating us. Please do not hesitate to get back to us if you need any further assistance. We will be happy to help. 

    Thank you for using JotForm!