Alignment/width of matrix widget.

Hi. Before I stuffed around with my theme, I liked how the matrix looked and how responsive it was when I altered the column widths etc.

Since changing themes, it doesn't appear so responsive. No matter what changes I make to the column or table width properties.

Can you help me (at least) get the 'My Chiropractic care..." row label text all on one line?

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

.form-matrix-row-headers {

    width: 300px;

}

.form-matrix-row-headers, .form-matrix-column-headers {

    word-break: break-word;

 

}

}

No, not really.
I actually want to be able to extend the width of the widget and make the
widget more readable, but if I go into properties and try to alter either
the column or the form width, nothing happens!
It was responsive when i first inserted these widgets, but this was before
I changed the theme. Now, it won't respond if I try to expand either of
these elements
*Regards,*
*Dr. Ben Phillips*
Chiropractor
B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
...

Thank you for the clarification. I did some tests on my clone and I can confirm that the columns remain the same even after changing the width in the properties. Perhaps we can instead inject the custom css below:

#cid_349 .form-matrix-row-headers, #cid_349 .form-matrix-column-headers {

    width: 300px;

 

}

 

 

Hi...I've just tried this, and it did change in preview but not in builder.
But it is painful that I can't make a change and see it's effect in the
builder.
Can you help me get all of the columns even - as you can see individual
columns have different widths based (i assume) on the text within them -
the most obvious being the 'did not help me' column.
I want to get clear on how to change this for multiple matrix widgets, as
there are a number throughout my form I need to change.
...

Hi,

If you want all the columns of all the matrix in your form to be 300px wide, please replace the CSS I have given above with the CSS below.

.form-matrix-row-headers, .form-matrix-column-headers {

    width: 300px;

}

 

Do let us know if you need further assistance.

I want to be able to look at each individual matrix and set accordingly
(and what will look best) for it's content...
The new code you've given me here, looks like it will create the same width
for every column in every matrix, AND that it is still the width you set in
your previous code.
When I use this, not all of the columns are equal, like they were when I
used to be able to manually set them from the standard properties window -
can we figure out what conflict is preventing me being able to do that?
Otherwise I have to contact you to change individual matrices and that must
be painful for both of us!
*Regards,*
*Dr. Ben Phillips*
Chiropractor
B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
...

What you need is to set a minimum width for the matrices' column headers and rows headers. 

Width the code below, you will be able to set the minimum width for the matrix under "Your experience with Chiropractic..."

#id_349 .form-matrix-row-headers, #id_349 .form-matrix-column-headers {

    min-width: 95px !important;

}

Above, #id_349, is the id of the matrix that needs to have a minimum width of 95px for its row and column headers.

So, if you want to adjust the width of the headers for other matrices, you just need to get the id of a particular matrix(field), as shown above, and change the id in the code above then add the code to your form. You can, of course, change the value of the min-width depending on the header of the matrix where you will apply it to.

If you want to have the column header and row header to have different widths, you can use the code below:

The code below is for your row header:

#id_349 .form-matrix-row-headers{

    min-width: 95px !important;

}

The code below is for your column header:

#id_349 .form-matrix-column-headers{

    min-width: 95px !important;

}

I hope this helps. Let us know if you need any further assistance. Thank you.

Thank you.
I've gone through the form and made changes to all of the matrices (I think)
For some reason, I could not chagne the row width for 369, 370 and
403...can you help me understand why?
*Regards,*
*Dr. Ben Phillips*
Chiropractor
B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
...

Please allow me some time to inspect the form and I will update you on this thread once I have found the solution to your new concern. 

Thank you.

It is possible that it is not working because you are trying to set a min-width which is already lower than the initial width of the row headers.

Here, you can try the codes below:

#id_403 .form-matrix-row-headers {

    width: 75px !important;

}

li#id_369 .form-matrix-row-headers {

    width: 156px !important;

 

}

#id_370 .form-matrix-row-headers {

    width: 126px !important;

 

}

I hope this helps. Let us know if you need any further assistance. Thank you.

Played around with this, thank you!
with 369 - I was able to reduce it up to a point, then increase it, but I
tried to increase it significantly to get the final row text on one line
(rather than wrap) and it wouldn't respond - is that because the overall
width of the matrix is set smaller than the total values I'm putting in for
all columns and row width maybe?
*Regards,*
*Dr. Ben Phillips*
Chiropractor
B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
...

That is partly correct. There is a CSS in the form, maybe part of the theme that is currently set the max width of the entire matrices in the form to 600px.

If you want to keep it at 100%, you can override it with the following:

.form-matrix-table {

    max-width: 100% !important;

}

If you just want to apply the 100% to the 369 matrix, you can add the following custom CSS codes:

#cid_369 > .form-matrix-table {

    max-width: 100%;

}

The result would be like this:

All i want here is to have the row label to just beyond the width of the
4th entry - "drink", not the whole width of the form necessarily.
If I put your change in, it won't let me manually alter the widths will it?
It will spread the whole matrix across the width of the form, correct?
*Regards,*
*Dr. Ben Phillips*
Chiropractor
B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
...

The CSS codes I have given above should achieve your requirement. 

I suggest you check the conditions on your form and remove the other CSS codes that affect the same element in the matrix.

With regards to your question, if you set the width of the .form-matrix-table to 100% and you did not set a max-width, yes, it will spread the matrix across the width of the form.

However, this, of course, will still allow you to change the widths of the headers and values of the matrix. 

I hope this helps. Please let us know if you need any further assistance. Thank you.

Right. I think I figured out how to delete that line from within the developer tools, and it appears to make the change as I wanted.

Scary! but thank you!