View Issue Details

Jump to NotesJump to History
This bug affects 1 person(s).
 4
IDProjectCategoryView StatusDate SubmittedLast Update
19627Bug reportsQuestion themepublic2024-06-25 15:432024-07-01 12:33
Reporterzahlenzauber Assigned To 
PrioritynoneSeverityminor 
Status newResolutionopen 
Product Version6.5.x 
Summary19627: Dual matrix scale headers missing
Description

I'm not sure if this is the old problem and a reason to reopen ID 18812:
With LimeSurvey Cloud version 6.5.14 and FruityTwentyThree, there is an issue with some widths. On some screens the scale headings are missing, as described here. On some screens they are duplicated (see picture).

Steps To Reproduce

Steps to reproduce

Make a question of type dual matrix
Give title/ header to two both scales
Preview question
Change width of browser window slowly

Expected result

For wide windows the left and right header of scales should be display in the header of the table only.
For narrow windows the headers should be displayed above the answer options only.

Actual result

For wide viewports it is as expected.
When narrowing the window what you see depends on the device and the width. On some devices the headers are missing (see bug report ID 18812). For some devices the headers are duplicated (see image). For some devices and width everything is as expected.

TagsNo tags attached.
Attached Files
MWEdualmatrix.PNG (46,744 bytes)   
MWEdualmatrix.PNG (46,744 bytes)   
MWEdualmatrix_217696.lss (101,257 bytes)
Bug heat4
Complete LimeSurvey version number (& build)LimeSurvey Cloud Version 6.5.14
I will donate to the project if issue is resolvedNo
BrowserFirefox 115.11.0esr (32-Bit)
Database type & versionmysqlnd 8.1.28 (Treiber) MariaDB 10.5.24
Server OS (if known)Linux db38d92de960 6.1.21-v8+#1642
Webserver software & version (if known)Apache/2.4.57 (Debian)
PHP Version8.1.28

Users monitoring this issue

There are no users monitoring this issue.

Activities

zahlenzauber

zahlenzauber

2024-06-28 10:56

reporter   ~80496

I'm not sure whether this helps for debugging: The following workaround added in the custiom.css gave good results.

@media only screen and (max-width: 1024px) {
table.ls-answers, table.ls-answers thead, table.ls-answers tbody, table.ls-answers th, table.ls-answers td, table.ls-answers tr {
display: block;
}
table.ls-answers, table.ls-answers thead, table.ls-answers tbody, table.ls-answers th, table.ls-answers td, table.ls-answers tr {
text-align: left;
}
table.ls-answers thead {
display: none;
}
/ We don't need it for accessibility : we already have the label /
table.ls-answers tbody td {
text-align: left;
}
table.ls-answers .information-item:empty {
display: none;
}
.ls-answers td.checkbox-item {
padding: 4px;
}
.ls-answers td.checkbox-item {
padding-left: 24px;
padding-right: 4px;
}
table.ls-answers tbody .control-label {
text-align: left;
}
table.ls-answers .answertextright {
text-align: right;
}
/ Show the label /
table.ls-answers .ls-label-xs-visibility {
display: block;
position: relative;
width: auto;
height: auto;
overflow: initial;
white-space: normal;
}
table.ls-answers .ls-label-xs-visibility {
left: auto;
}
table.ls-answers .checkbox-item .ls-label-xs-visibility {
line-height: initial;
text-indent: initial;
}
table.ls-answers .checkbox-item .ls-label-xs-visibility {
margin-left: 0;
}
table.ls-answers .ls-label-xs-visibility > {
position: relative;
top: auto;
width: auto;
height: auto;
overflow: auto;
}
table.ls-answers .ls-label-xs-visibility > {
left: auto;
}
table.ls-answers .checkbox-item label.ls-label-xs-visibility::before {
margin-left: -20px;
}
table.ls-answers .checkbox-item label.ls-label-xs-visibility::after {
margin-left: -20px;
}
table.ls-answers > tbody > tr:hover {
background-color: transparent;
}
/ bs fix /
table.ls-answers td.visible-xs, table.ls-answers th.visible-xs {
display: block !important;
}
/ Don't display repeating header on mobile devices'/
table.ls-answers tr.ls-heading-repeat {
display: none;
}
.d-md-none {
display: block !important;
}
}
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {

.d-md-none {
display: block !important;
}
}
DenisChenu

DenisChenu

2024-07-01 12:26

developer   ~80502

I can not really reproduce here (max-device-width dependant ?)
But maybe difference of media with d-none

The @media part
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
https://github.com/LimeSurvey/LimeSurvey/blob/9e7438bf2192126e3b161bf6a25033d9c05ce25b/themes/survey/fruity_twentythree/css/variations/theme_apple.css#L11977C1-L11977C102
zahlenzauber

zahlenzauber

2024-07-01 12:33

reporter   ~80503

Thanks for trying it out and for the tip concerning the workaround. I had already feared that the constellation was very specific and could not be easily reproduced.

Issue History

Date Modified Username Field Change
2024-06-25 15:43 zahlenzauber New Issue
2024-06-25 15:43 zahlenzauber File Added: MWEdualmatrix.PNG
2024-06-25 15:43 zahlenzauber File Added: MWEdualmatrix_217696.lss
2024-06-28 10:56 zahlenzauber Note Added: 80496
2024-06-28 10:56 zahlenzauber Bug heat 0 => 2
2024-07-01 12:26 DenisChenu Note Added: 80502
2024-07-01 12:26 DenisChenu Bug heat 2 => 4
2024-07-01 12:33 zahlenzauber Note Added: 80503