Matrix Dynamique Widget Help

Hello,

I am hoping there is a way to make the text boxes within this widget taller. I tried a CSS code from Google, but it did not work. I would like to make the form look nice, and right now the boxes are too small. Any help is appreciated!

Thank you.

Hi Grace,

Thanks for reaching out to Jotform Support. I'm an AI assistant. I'll do my best to help you until someone from the support team is available.

To make the text boxes in the Matrix Dynamique widget taller, you can try adding custom CSS to your form. Here’s how to do it:

1. Open your form in the Form Builder.
2. Go to the Form Designer by clicking the paint roller icon.
3. Select the CSS tab.
4. Add the following CSS code to increase the height of the text boxes inside the Matrix Dynamique widget:
   .form-matrix-dynamique input[type='text'] { height: 50px !important; }
5. Save your changes and preview the form to see the effect.

If this CSS does not work, please double-check that you are targeting the correct widget and that no other CSS is overriding it.

Give it a try and let us know how it goes.

It was unsuccessful unfortunately.

Hi Grace,

Since the basic CSS didn't work, try adding the custom CSS directly inside the Matrix Dynamique widget settings:

1. Select the Matrix Dynamique widget in your form.
2. Click the wand icon to open widget settings.
3. Go to the Custom CSS tab.
4. Paste this CSS code to increase the height of the text boxes:
   input[type='text'] { height: 50px !important; }
5. Click Update to save changes.

This method applies CSS inside the widget iframe, which is necessary for it to take effect.

That worked! How can I make the font within those boxes bigger as well?

Hi Grace,

To make the font bigger inside the text boxes of the Matrix Dynamique widget, add this CSS code in the widget's Custom CSS tab:

input[type='text'] { font-size: 16px !important; }

Adjust the 16px value to your preferred size, then click Update to save.

Hi Grace,

You can inject a custom CSS Code into your form widget to adjust its font size. Let me show you how:

1. First, copy this code:

#contentHeader th {

 font-size: 20px;

}

2. Open your form in Form Builder, scroll down, and select the Matrix Dynamique widget.

3. Click on the Wand icon on the right side of the widget to open Widget Settings.

4. Under the Custom CSS tab, paste the code into the CSS Code box.

5. Click on Update button to save the changes.

Take a look at the screenshot below to see my results:

Give it a try and let us know if you need any help.