Hello,
I am looking for a way to set the width of the matrix columns.
I tried with Survey({ model: survey, css: myCss }) but it did not work.
I added width to the JSON file like this:
"columns": [
{
"value": "0",
"text": "Not at all (0)",
"width": "150px"
}
…
]
then in my CSS (but I do not want other tables to be affected):
.sv_q_matrix tr td:first-child {
width: 200px;
}
Where in the document or examples is it explained how to do this? I searched everywhere.
Thanks,
Geoffrey
Hello,
Sorry, plunker was disappeared or wasn't saved somehow. Here is the new one - https://plnkr.co/edit/e2oK21eVLMTFTXqF
The is the CSS:
CSStable.my-table {
table-layout: fixed;
width: 800px;
}
.my-table th.sv-table__cell:nth-child(2), .my-table td.sv-table__cell:nth-child(2) {
width: 100px;
background-color: lightblue;
}
.my-table th.sv-table__cell:nth-child(3), .my-table td.sv-table__cell:nth-child(3) {
width: 200px;
background-color: lightcyan;
}
Here is the code that adds marker class:
JavaScriptsurvey
.onAfterRenderQuestion
.add(function (sender, options) {
if(options.question.name = "Quality") {
var table = options.htmlElement.getElementsByTagName("table")[0];
table.className += " my-table";
}
});
Thanks, Serge
SurveyJS Team
Hello,
The width property work for columns in matrixdropdown and matrixdynamic questions. See this issue https://github.com/surveyjs/survey-library/issues/1834 for more details.
For simple matrix question you can achieve it via CSS. Here is the working sample - https://plnkr.co/edit/nlnJIzPYVAsI0t77.
If you want to distinguish certain question you can mark it with special CSS class in the https://surveyjs.io/Documentation/Library?id=surveymodel#onAfterRenderQuestion event handler
Thanks, Serge
SurveyJS Team
Thanks Serge T for the help. It is appreciated.
The link for the CSS does not do anything except shows: "Hello Plunker" in the running example.
I wish there was a way to add an ID to each element or a class name to each element. I think you did that with distinguishing certain question with a special CSS class name.