Can you style a Matrix Dynamique widget?

  • Profile Image
    Asked on March 03, 2014 at 02:01 PM

    I originally had 4 seperate fields for the scholarship applicant filling out this form, but I had to chose an arbitrary pre-determined number of lines (the applicant needs to provide the name of the sport he/she played, honors, positions, etc. but since each applicant has a different number of sports they were involved with, I wanted to make the form a bit more dynamic). I've created a matrix dynamique to help because the applicant can add as many lines as they need depending on how many sports/activities/etc. they are involved with. The widget, however, has a completely different style than the rest of the form. I am looking for a way to make the font the same as the rest, make the answer box width equal to the other boxes already on the form, and get rid of the purple line. Is there a way to do this?


  • Profile Image
    Answered on March 03, 2014 at 03:38 PM

    Unfortunately, this is not currently possible to style that Matrix Dynamique widget since it is being loaded in iFrame, and we have no access to that iFrame.

    You can only change pre-defined styles for Header/Line/Row text color, and set the width for text boxes.

    I have attached a feature request ticket to this thread in order to be able to manage the CSS styles within widget's iFrame.

    I can not provide any ETA at this time, but we will update this thread once we get any news.

  • Profile Image
    Answered on March 15, 2014 at 08:44 PM

    This was very helpful, many thanks.

  • Profile Image
    Answered on March 26, 2014 at 01:01 PM

    It has just become possible to inject custom CSS into Matrix dynamique widget using simple table element selectors.

    For example:

    thead>tr th { padding: 10px; }

    tfoot>tr th input { width: 90px; font-size:10px }