How to optimize the look of my Matrix Dynamique widget?

Hi,

I know it is something to do with the CSS and the form looks not great and I could not make it work and the button seems to always overlap and I tried my best to read through the help but still could not make it work.

https://form.jotform.com/232274259637059

Any help Appreciated!!

--Mahesh.

Hi Mahesh,

Thanks for reaching out to Jotform Support. Instead of using the Matrix Dynamique widget, consider using the Configurable List widget. This will allow your users to add rows as needed as well. Let me walk you through it:

1. In Form Builder, click on the Add Element button on the left and under the Widgets tab, select the Configurable List.
2. Next, click on its Wand icon and use the codes below in the Fields configuration.
   

Product : text
Description : text
Qty : text
Manufacaturer : text
Notes : text

Now, we can apply a few CSS codes to it so that the sub-fields fit better. Let's do it.

1.First, copy the codes below:

/* adjust CL fields width - 17247911*/

.configurable-list-field-row {

display: grid !important;

grid-template-columns: 20% 15% 15% 15% 35%; /* adjust width as needed */

}

.configurable-list-field-wrapper {

max-width: none !important;

}

/* Ends here */

2.Click on the Wand icon next to the widget.

3.Under the Custom CSS tab, paste the codes and click Update widget.

That's it. We also have guides on How to Set Up the Configurable List Widget that you can check out.

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

Thanks. Really appreciate your help!! Will try and let you know how it goes.

Configurable list worked great. Thanks for the help. By any chance can I validate one field inside the configurable list? For e.g., I want the quantity field to be only numeric.

Hi Mahesh,

You can set the quantity as a number instead of text, then you can increase the width of the field to make more space. Let me help you do it:

First copy this piece of code:

.configurable-list-field-row {

display: grid !important;

grid-template-columns: 15% 25% 12% 18% 30%;

}

.configurable-list-field-wrapper {

max-width: none !important;

}

1. Open your form in From Builder and scroll down to the Configurable List.
2. Click on the Configurable List then click on the Wand icon to open Widget Settings.
3. Under Fields Configuration next to Qty replace the text with the number.
4. Click on Custom CSS and replace the code with the one provided above.

That's it. Let us know if you have any other questions.

Thanks and that worked great!!

Unfortunately the form was not responsive. Anyway to make it responsive.

As of now I have embedded that in an iFrame. Ideal situation will be natively responsive. Any help will be appreciated.

https://form.jotform.com/232274259637059

Thanks and Regards,

Mahesh.

Hi Mahesh,

Can you share the website URL with us so that we can get a better idea of what is going on?

Once we hear back from you, we'll be able to move forward with a solution.

Hi,

Thanks. Currently it is under development.

https://coxtool.mybigcommerce.com/

Thanks and Regards,

Mahesh.

Also if you want me to remove the iframe and pass it on as a normal html code, please let me know.

Hi Mahesh,

I tested the form on your website to see if I could replicate the issue, but everything was working properly. Check out the screencast below to see my results:

Can go ahead and clear your browser cache then try it again and see how it goes? If you run into the same issue again, let us know, and we'll do some more testing to see what's going on.

Hi,

Sorry for confusing you. From the beginning it was working fine on the Desktop, it was only not working correctly on my mobile.

That is what I meant by not responsive, sorry for the confusion. Picture shown below. Iframe is removed and embedded as standard HTML.

Hi Mahesh,

Please try to Inject this Custom CSS Code.

@media only screen and (max-width: 600px) {

.configurable-list-field-wrapper.col1.text-field-selector {

  max-width: 50%!important;

}

.configurable-list-field-wrapper.col2.text-field-selector {

  max-width: 55%!important;

}

.configurable-list-field-wrapper.col3.number-field-selector {

  max-width: 50%!important;

}

.configurable-list-field-wrapper.col4.text-field-selector {

  max-width: 68%!important;

}

.configurable-list-field-wrapper.col5.text-field-selector {

  max-width: 50%!important;

}

}

Check out the screenshot of the result below:

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

Unfortunately it did not work. Sorry.

Hi Mahesh,

You can add these CSS to your Configurable list widget to make it responsive.

/* Make the configurable list responsive - 17247911 */

iframe#customFieldFrame_13 {

    height: 600px !important;

}

.configurable-list-field-row {

  display: flex !important;

}



/*End of code*/

See the screencast below:

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

Hi,

That worked like a charm. Really really appreciate the help. Without Jotform support I would have taken quite some time to figure this out. Kudos to the entire team for their support.

--Mahesh.