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

    What Is CSS to Target a Matrix Column BY ID (not class)?

    Asked by earthdaysf on April 04, 2013 at 06:17 PM

    hi

    The css you offer in other threads is awkward and verbose.

    ... .form-matrix-values + .form-matrix-values  + .form-matrix-values  + ... etc 

    Using ID's is preferable. is it possible to use CSS similar to the example below? This is much easier, because it's only necessary to change a single character (the column number) to target a different column. Thanks.

    #cid_1 #form-matrix-column_1  .form-textbox {

    width:200px;

    }

    target textbox CSS matrix column ID matrix column
  • Profile Image
    JotForm Support

    Answered by abajan on April 04, 2013 at 06:51 PM

    Unfortunately, that's not currently possible, thus the necessity for the verbose solutions. However, it would certainly be useful if each column had an ID and as such, I'll submit a ticket.

  • Profile Image

    Answered by earthdaysf on April 04, 2013 at 07:04 PM

    but, each column does have an ID. This is your auto-generated ID. JotForm automatically assigns an ID to each column. Why can't I target those columns by ID?

    #form-matrix-column_1 

  • Profile Image
    JotForm Support

    Answered by abajan on April 04, 2013 at 08:59 PM

    Actually, those are classes and not IDs that you see in the source. The thing is, upon examining the HTML generated by the form builder, I realized that even if an ID were to be auto-generated, no declarations in any rule using just such an ID as a seletor, would affect the text boxes. Only their containers would be styled (see screenshot). As such, the use of adjacent sibling selectors would still be necessary.

  • Profile Image

    Answered by earthdaysf on April 04, 2013 at 10:39 PM

    you're right, that's a class. So this should work, but it doesn't what's wrong with it?

    #cid_1 .form-matrix-column_1  .form-textbox {

    width:200px;

    }

  • Profile Image
    JotForm Support

    Answered by abajan on April 04, 2013 at 11:10 PM

    That wouldn't work because that rule targets all elements classed as .form-textbox which are descendants of elements classed as .form-matrix-column_1 which is in turn descended from the element bearing the ID cid_1. But there are no text boxes descending from the element with that class (.form-matrix-column_1). Likewise, in your form's case, there are no text boxes descending from the table header (th) classed as .form-matrix-column_2. It's only descendant is the string (text) "Description". Perhaps this page better explains what I'm trying to state.

  • Profile Image

    Answered by earthdaysf on April 04, 2013 at 11:21 PM

    ok, wouldn't that be considered a next adjacent sibling, or something similar?

    these do not seem to work, but it seems this could be done, somehow.

    #id_1 .form-matrix-column_1 +  .form-textbox 

    #cid_1 .form-matrix-column_1 +  .form-textbox 

    or could it be easier if jotform used the html col or colGroup tag? Why not do that?

    what's the css for your screenshot?

    this didn't work:

    #id_1 .form-matrix-column_1 ~  .form-textbox

    maybe this would work?

    table tr > nth-child > textbox

    but i guess nth-child is css3. here's a css2 solution i found, which is less typing than yours:

    table.foo > tbody > tr > td + td + td + td 

    which maybe could be modified to work with jotform:

    #id_1 td + td + td + td .form-textbox 

    that does not seem to work, but it seems there must be a simpler method (with less typing) than yours.

    thx

  • Profile Image
    JotForm Support

    Answered by EltonCris on April 05, 2013 at 04:41 AM

    @earthdasf

    My colleague is using this code but as he explained you can't trigger textboxes with this unless the text boxes fields are under this class.

    .form-matrix-column_1 {

    width: 200px !important;

    }

    I can see here that your matrix field is already showing the styles you wanted on specific column. Is there any more problem with it? Unfortunately the only best option you can do for now is to use the + sign to target the specific element that is preceded by the former selectors.

    #id_33 .form-matrix-row-headers + .form-matrix-values + .form-matrix-values + .form-matrix-values .form-textbox {

    width: 350px;

    }

    Thanks!

  • Profile Image

    Answered by earthdaysf on April 06, 2013 at 12:24 PM

    We use a form builder like JotForm so that we do not have to write html, css, and javascript. We want a simple, quick, easy solution for building forms. That's why we use JotForm. 

    But, since JotForm does not provide width-control for matrix columns, we are forced to write custom css. So, if we have to write css, then at least it should be simple, quick, easy css. 

    Yes, your css works, but it is not simple, quick, or easy. That's the problem. 

    I will modify this matrix. I will add columns and remove columns. I will build more matrices in the future. So it's not just a matter of making this particular matrix look right-- it's a matter of finding a solution that's simple, quick, easy, for the future. 

  • Profile Image
    JotForm Support

    Answered by jonathan on April 06, 2013 at 03:08 PM

    Hi,

    I am sorry if you find it not easier on your end. But a lot, do find JotForm still the easiest form builder around.

    It is easy also to apply the CSS code to control the width of your column, our colleages have even provided the solution already. You can also use the form's source code for more extreme customization you may need to do.

    Feel free to contact us again anytime should you have more inputs/ideas to share.

    Thanks.

  • Profile Image

    Answered by earthdaysf on April 06, 2013 at 04:49 PM

    "a lot, do find JotForm still the easiest form builder around."

    Me too! JotForm is great-- because of your easy, pre-made widgets, and easy-to-use editor. This is not a criticism of everything in JotForm. JotForm is my favorite! It's the best! 

    But, you do not provide easy editing of matrix column widths. I believe the CSS for matrix column widths could be simpler than the one you provide, using the .form-matrix-column_1 class. But maybe not. 

    You should not take a criticism of one thing as a criticim of the entire service. 

  • Profile Image
    JotForm Support

    Answered by jonathan on April 06, 2013 at 05:32 PM

    I completely agree with you. I maybe new here, but base on the knowledge I got just reading the threads on this forum, criticism of anything is not anything taken for granted. It is always considered in positive direction.

    If you read back on the very first response by Abajan , he already mentioned a ticket to be submitted base on the inputs you had provided on your inquiry. The ticket means, our dev team will be made aware of the not too easy means of modifying the matrix column widths (as you described). The dev can then consider this to check and review the matrix features.

    You will be notified also via email or thru this thread, when new updates about this are available.

    Thanks.

  • Profile Image

    Answered by earthdaysf on April 06, 2013 at 06:32 PM

    "criticism of anything is not anything taken for granted. It is always considered in positive direction."

    -your previous answer above shows that you took my criticism about this specific feature in a negative direction. You said:

    "I am sorry if you find it not easier on your end. But a lot, do find JotForm still the easiest form builder around."

    Your implication is that i'm criticising all of JotForm, and that I should not suggest improvements. 

    "Abajan ...mentioned aticket to be submitted.... The ticket means, our dev team will be made aware"

    -Yes, I read that Abajan will submit a ticket (Thank you very much, Abajan!). I know what a "ticket" means. The rest of this thread is about seeking an alternate solution in the meantime. 

    "It is easy also to apply the CSS code to control the width of your column, our colleages have even provided the solution already."

    -Yes, i have already used the dev's solution on a form. I find this solution to be awkward, and i seek an alternate CSS, based on the .form-matrix-column_1 class. If you can offer a solution based on the .form-matrix-column_1 class, fantastic! If not, no worries, and no need to send me the dev's solution again, I have it. 

    Thanks again for the best form service!

  • Profile Image
    JotForm Support

    Answered by jonathan on April 06, 2013 at 06:49 PM

    I apologize if I am misunderstood on my previous response. I am not trying to implicate anything, and certainly, suggestions for positive improvement of JotForm is not I will personally disagree about.

    Thank you for your explanations. We will update you again on the status of the submitted ticket.

    regards,

  • Profile Image

    Answered by earthdaysf on April 06, 2013 at 07:18 PM

    ok, thanks again for your attention. 

    JotForm keeps getting better every day!