Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#6682 Multiple-Choice Matrix Layout is not adjusted on smaller screens when it has a colummn with Show in Multiple Columns = true #6718

Merged
merged 1 commit into from
Aug 15, 2023
Merged

#6682 Multiple-Choice Matrix Layout is not adjusted on smaller screens when it has a colummn with Show in Multiple Columns = true #6718

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions src/question_matrixdropdownbase.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1408,6 +1408,11 @@ export class QuestionMatrixDropdownModelBase extends QuestionMatrixBaseModel<Mat
newValues["totalRow"] = totalRow;
return newValues;
}

public IsMultiplyColumn(column: MatrixDropdownColumn): boolean {
return column.isShowInMultipleColumns && !this.isMobile;
}

public locStrsChanged() {
super.locStrsChanged();
var columns = this.columns;
Expand Down
15 changes: 9 additions & 6 deletions src/question_matrixdropdownrendered.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ export class QuestionMatrixDropdownRenderedCell {
if(!!this.cell.column.cellHint) {
return this.cell.column.locCellHint.renderedHtml;
}
if(this.cell.column.isShowInMultipleColumns) {
if (this.matrix.IsMultiplyColumn(this.cell.column)) {
if(!!this.item) {
return this.item.locText.renderedHtml;
} else {
Expand Down Expand Up @@ -404,7 +404,7 @@ export class QuestionMatrixDropdownRenderedTable extends Base {
for (var i = 0; i < this.matrix.visibleColumns.length; i++) {
var column = this.matrix.visibleColumns[i];
if (!column.hasVisibleCell) continue;
if (column.isShowInMultipleColumns) {
if (this.matrix.IsMultiplyColumn(column)) {
this.createMutlipleColumnsHeader(column);
} else {
this.headerRow.cells.push(this.createHeaderCell(column));
Expand Down Expand Up @@ -446,7 +446,7 @@ export class QuestionMatrixDropdownRenderedTable extends Base {
for (var i = 0; i < cells.length; i++) {
var cell = cells[i];
if (!cell.column.hasVisibleCell) continue;
if (cell.column.isShowInMultipleColumns) {
if (this.matrix.IsMultiplyColumn(cell.column)) {
this.createMutlipleColumnsFooter(this.footerRow, cell);
} else {
var editCell = this.createEditCell(cell);
Expand Down Expand Up @@ -639,7 +639,7 @@ export class QuestionMatrixDropdownRenderedTable extends Base {
if(!cell.hasQuestion) {
res.cells.push(this.createEmptyCell());
}
else if(cell.cell.column.isShowInMultipleColumns) {
else if (this.matrix.IsMultiplyColumn(cell.cell.column)) {
if(cell.isFirstChoice) {
res.cells.push(this.createErrorCell(cell.cell));
} else {
Expand Down Expand Up @@ -679,9 +679,12 @@ export class QuestionMatrixDropdownRenderedTable extends Base {
for (var i = 0; i < row.cells.length; i++) {
let cell = row.cells[i];
if (!cell.column.hasVisibleCell) continue;
if (cell.column.isShowInMultipleColumns) {
if (this.matrix.IsMultiplyColumn(cell.column)) {
this.createMutlipleEditCells(res, cell);
} else {
if (cell.column.isShowInMultipleColumns) {
cell.question.visibleChoices.map((c: ItemValue) => c.hideCaption = false);
}
var renderedCell = this.createEditCell(cell);
res.cells.push(renderedCell);
if (useAsHeader) {
Expand Down Expand Up @@ -752,7 +755,7 @@ export class QuestionMatrixDropdownRenderedTable extends Base {
for (var i = 0; i < columns.length; i++) {
var col = columns[i];
if (col.isVisible && col.hasVisibleCell) {
if (col.isShowInMultipleColumns) {
if (this.matrix.IsMultiplyColumn(col)) {
this.createMutlipleVerticalRows(renderedRows, col, i);
} else {
const renderedRow = this.createVerticalRow(col, i);
Expand Down
42 changes: 41 additions & 1 deletion tests/markup/etalon_matrixdropdown.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,46 @@ registerMarkupTests(
after: () => StylesManager.applyTheme("default"),
snapshot: "matrixdynamic-show-in-multiple-columns"
},
{
name: "Test matrixdropdown with showInMultipleColumns - mobile",
json: {
elements: [
{
titleLocation: "hidden",
type: "matrixdropdown",
name: "matrix",
rows: ["row1"],
columns: [
{
"name": "col1",
"cellType": "radiogroup",
"showInMultipleColumns": true,
"isRequired": true,
"choices": [
"Item 1",
]
},
{
"name": "col2",
"cellType": "checkbox",
"showInMultipleColumns": true,
"isRequired": true,
"choices": [
"Item 1",
"Item 2",
]
}
]
},
],
},
before: () => StylesManager.applyTheme("defaultV2"),
initSurvey(survey) {
survey.setIsMobile(true);
},
after: () => StylesManager.applyTheme("default"),
snapshot: "matrixdynamic-show-in-multiple-columns-mobile"
},
{
name: "Test matrixdropdown errors top",
json: {
Expand Down Expand Up @@ -92,7 +132,7 @@ registerMarkupTests(
},
after: () => StylesManager.applyTheme("default"),
snapshot: "matrixdropdown-cell-errors-bottom"
}
},
]
);

83 changes: 83 additions & 0 deletions tests/markup/snapshots/matrixdynamic-show-in-multiple-columns-mobile.snap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<div class="sd-table-wrapper">
<table class="sd-matrixdropdown sd-table sd-table--align-middle">
<thead>
<tr>
<td class="sd-table__cell sd-table__cell--dropdown sd-table__cell--empty sd-table__cell--header">
</td>
<th class="sd-table__cell sd-table__cell--header sd-table__cell--radiogroup">
<span class="sv-string-viewer">col1</span>
<span>&nbsp;</span>
<span class="sd-question__required-text">*</span>
</th>
<th class="sd-table__cell sd-table__cell--checkbox sd-table__cell--header">
<span class="sv-string-viewer">col2</span>
<span>&nbsp;</span>
<span class="sd-question__required-text">*</span>
</th>
</tr>
</thead>
<tbody>
<tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row1">
<td class="sd-table__cell sd-table__cell--row-text" colspan="1" data-responsive-title="row1" title="">
<span class="sv-string-viewer">row1</span>
</td>
<td class="sd-table__cell sd-table__cell--error sd-table__cell--error-top" colspan="1" data-responsive-title="" title="">
</td>
<td class="sd-table__cell" colspan="1" data-responsive-title="col1" title="col1">
<div class="sd-table__question-wrapper">
<fieldset class="sd-selectbase sd-selectbase--row" role="presentation">
<div class="sd-item sd-item--allowhover sd-radio sd-radio--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
<label aria-label="Item 1" class="sd-selectbase__label">
<input class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0row1cell1i_0" name="col1_testid0row1cell1" type="radio" value="Item 1">
<span class="sd-item__decorator sd-radio__decorator">
</span>
<span class="sd-item__control-label">
<span class="sv-string-viewer">Item 1</span>
</span>
</label>
</div>
</fieldset>
</div>
</td>
<td class="sd-table__cell sd-table__cell--error sd-table__cell--error-top" colspan="1" data-responsive-title="" title="">
</td>
<td class="sd-table__cell" colspan="1" data-responsive-title="col2" title="col2">
<div class="sd-table__question-wrapper">
<fieldset class="sd-selectbase sd-selectbase--row" role="presentation">
<legend class="sv-hidden" role="presentation">
</legend>
<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
<label aria-label="Item 1" class="sd-selectbase__label">
<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0row1cell3i_0" name="col2" role="option" type="checkbox" value="Item 1">
<span class="sd-checkbox__decorator sd-item__decorator">
<svg class="sd-checkbox__svg sd-item__svg">
<use xlink:href="#icon-v2check" class="">
</use>
</svg>
</span>
<span class="sd-item__control-label">
<span class="sv-string-viewer">Item 1</span>
</span>
</label>
</div>
<div class="sd-checkbox sd-checkbox--allowhover sd-item sd-item--allowhover sd-selectbase__item sd-selectbase__item--inline" role="presentation">
<label aria-label="Item 2" class="sd-selectbase__label">
<input class="sd-checkbox__control sd-item__control sd-visuallyhidden" id="testid0row1cell3i_1" name="col2" role="option" type="checkbox" value="Item 2">
<span class="sd-checkbox__decorator sd-item__decorator">
<svg class="sd-checkbox__svg sd-item__svg">
<use xlink:href="#icon-v2check" class="">
</use>
</svg>
</span>
<span class="sd-item__control-label">
<span class="sv-string-viewer">Item 2</span>
</span>
</label>
</div>
</fieldset>
</div>
</td>
</tr>
</tbody>
</table>
</div>