What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How to align textboxes to each row of a Matrix?

    Asked by darny1811 on June 30, 2015 at 11:40 AM

    hi everyone. 

    is there a way to add textboxes (topics) beside the matrix survey tool,

    and make the textboxes should be aligned for each of the row-items (subjects)? 

    thanks.

    Page URL:
    http://www.jotform.me/form/51803965943464

    Screenshot
    survey tool textboxes Survey Tool custom CSS CSS form layout
  • Profile Image

    Answered by Ben on June 30, 2015 at 01:31 PM

    You can do that with a bit of custom CSS code.

    Now the only issue here is that the text box field takes up a lot of space, but just enough to match the size of the matrix row.

    If we however add the sub-label as you have, it is much higher than the matrix row itself and as such the fields can not align properly.

    So this is the code to align the fields if there was no sub label:

    #id_5, #id_8, #id_7, #id_6 {
        display: block;
        margin: 0;
        padding: 0;
        position: relative;
    }
    #id_5 {
        top: 45px;
    }
    #id_8 {
        top: -97px;
    }
    #id_7 {
        top: -112px;
    }
    #id_6 {
        top: -127px;
    }

    This code will show the sub label on the left of the field

    #id_5 .form-sub-label, #id_8 .form-sub-label, #id_7 .form-sub-label, #id_6 .form-sub-label {
        float: left;
        left: -30px;
        position: relative;
        top: -22px;
    }

    This one will show it on the right

    #id_5 .form-sub-label, #id_8 .form-sub-label, #id_7 .form-sub-label, #id_6 .form-sub-label {
        float: right;
        position: relative;
        right: -5px;
        top: -22px;
    }

    and this one will show it in the left corner, over the field

    #id_5 .form-sub-label, #id_8 .form-sub-label, #id_7 .form-sub-label, #id_6 .form-sub-label {
        float: left;
        position: relative;
        top: -17px;
    }

    and you can hide them by using this CSS:

    #id_5 .form-sub-label, #id_8 .form-sub-label, #id_7 .form-sub-label, #id_6 .form-sub-label {
        visibility: hidden;
    }

    You must add the first CSS code, but the last 4 are optional - to add the one that you prefer the most.

    You can see how to do that here: Inject Custom CSS Codes

    Do let us know however if you have any issues adding the CSS or if you have any additional questions and we would be happy to answer them.

  • Profile Image

    Answered by darny1811 on July 01, 2015 at 02:06 AM

    thank you so much, Ben ! :-)

  • Profile Image
    JotForm Support

    Answered by Boris on July 01, 2015 at 03:00 AM

    On behalf of my colleague, Ben, you are kindly welcome. :)

    Please don't hesitate to contact us again should you need further assistance with your forms, we will be happy to help.