Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Matrix Desktop Ansicht auf Mobilen Devices

  • krosenda
  • krosenda's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
5 days 4 hours ago #271384 by krosenda
Bitte helfen Sie uns, Ihnen zu helfen und füllen Sie folgende Felder aus:
Ihre LimeSurvey-Version: Version 5.6.68+240625
Eigener Server oder LimeSurvey-Cloud: Server der Uni zu Köln
Genutzte Designvorlage: fruity
==================
Hallo zusammen! Ich möchte gerne eine Matrix in der Desktop Ansicht auf Mobilen Devices (Handy, Tablet) in der gleichen Darstellung wie beim Desktop anzeigen. Könnte mir jemand weiterhelfen?

Ich weiß, dass die mobile Ansicht durch das responsive Design so entwickelt wurde, aber sie ist für mein Fall leider suboptimal...
Eine Drop-Down-Darstellung ist leider auch keine Option, da ich eine bipolare Matrix brauche mit Teilfragen wie "gesund | ungesund" oder "ansprechend | nicht ansprechend" und entsprechende Antwortoptionen von 1-5. Teilnehmende verstehen sonst nicht, was beispielsweise mit 1 gemeint ist, wenn es als Dropdown dargestellt wird...
Ich werde auch entsprechend ein Hinweis auf der ersten Seite setzen, dass man sich an den Laptop/PC für eine höhere Benutzerfreundlichkeit setzen soll, dennoch möchte ich die Lösung der bipolaren Matrix auch auf Mobilen Devices. Ich bin über Hilfe sehr dankbar!!

Please Log in to join the conversation.

  • paul.borsdorf
  • paul.borsdorf's Avatar
  • Offline
  • Official LimeSurvey Partner
  • Official LimeSurvey Partner
More
4 days 10 hours ago #271389 by paul.borsdorf
Replied by paul.borsdorf on topic Matrix Desktop Ansicht auf Mobilen Devices
Schau Dir am besten mal diesen Thread an, dort findest Du CSS-Code, mit dem Du das Umbrechen der Matrix-Fragen auf kleinen Bildschirmen verhindern kannst:  forums.limesurvey.org/forum/design-issue...table-transformation

Brauchen Sie Unterstützung bei der Erstellung und Auswertung von Umfragen mit LimeSurvey?
Mein Angebot als autorisierter LimeSurvey-Partner finden Sie auf meiner Website www.paulborsdorf.de

Please Log in to join the conversation.

  • krosenda
  • krosenda's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
4 days 9 hours ago #271390 by krosenda
Replied by krosenda on topic Matrix Desktop Ansicht auf Mobilen Devices
Dankeschön! Ich habe leider durch meine Uni keinen Zugriff auf das "globale" CSS für die einzelnen Designvorlagen. Stattdessen muss ich es in den einzelnen Fragen als Code schreiben.

Ich habe nun das hier aus dem Forum kopiert und mit <style></style> umrahmt, es in meinen Fragetext eingefügt, aber es funktioniert noch nicht. Ich bin schon auf Fehlersuche... finde den Fehler leider momentan nicht.
Code:
<style type="text/css">type="text/css">@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
 
.custom-array table.ls-answers {
display: table;
}
 
.custom-array table.ls-answers thead {
display: table-header-group;
}
 
.custom-array table.ls-answers tbody {
display: table-row-group;
}
 
.custom-array table.ls-answers tr {
display: table-row;
}
 
.custom-array table.ls-answers tr.ls-hidden {
display: none;
}
 
.custom-array table.ls-answers th,
.custom-array table.ls-answers td {
display: table-cell;
}
 
.dir-ltr .custom-array table.ls-answers th,
.dir-ltr .custom-array table.ls-answers td {
text-align: center;
}
 
.dir-ltr .custom-array table.ls-answers tbody th.answertext {
text-align: right;
}
 
.custom-array table.ls-answers tbody td {
text-align:left;
}
 
 
.dir-ltr .custom-array .ls-answers td.radio-item,
.dir-ltr .custom-array .ls-answers td.checkbox-item {
padding: 8px 0;
}
 
.custom-array table.ls-answers tbody .control-label {
text-align:left
}
 
.custom-array table.ls-answers .ls-label-xs-visibility {
display: inline-block;
position: relative;
overflow: hidden;
width: 17px;
height: 17px;
line-height: 21px;
text-indent: 21px;
left: auto;
margin-left: -20px;
}
 
.dir-ltr .custom-array table.ls-answers .radio-item label.ls-label-xs-visibility::before,
.dir-ltr .custom-array table.ls-answers .checkbox-item label.ls-label-xs-visibility::before {
margin-left: 0px;
}
 
.dir-ltr .custom-array table.ls-answers .radio-item label.ls-label-xs-visibility::after,
.dir-ltr .custom-array table.ls-answers .checkbox-item label.ls-label-xs-visibility::after {
margin-left: 0px;
}
 
.custom-array table.ls-answers > tbody > tr:hover {
background-color: inherit;
}
}
</style>

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 days 7 hours ago - 4 days 7 hours ago #271395 by Joffm
Replied by Joffm on topic Matrix Desktop Ansicht auf Mobilen Devices
Hallo,
wenn Du es wirklich so eingetragen hast, wie es hier steht,<style type="text/css">type="text/css">
kann es nicht funktionieren - mit dem doppelten type=...

Hast Du auch die css-Klasse "custom-array" eingertagen?

Ich sehe nämlich kein Problem.
 
Bis auf die Tatsache, dass lange Texte nicht besonders aussehen, und das Handling auch etwas "fitzelig" ist.

Aber etwas anderes.
Du schreibst:

Teilnehmende verstehen sonst nicht, was beispielsweise mit 1 gemeint ist

Das würde ich auch nicht.
Denn einerseits willst Du ein Polaritätenprofil darstellen, andererseits scheinst Du eine einseitige Skala anzuzeigen (wie auch oben im screenshot).
Aber dieser Fragetyp soll ja irgenwie etwas wie eine Waage darstellen, die zur einen oder anderen Seite mehr oder weniger ausschlagen kann.
Dann hat man aber besser Darstellungen wie
 

Und hier sehe ich dann auch kein großes Hindernis, die normale responsive Anzeige zu benutzen.
Ob die beiden Items nun links und rechts oder oben und unten stehen ist doch ziemlich irrelevant.
Dies wird ja wohl im Fragetext erläutert.
Beispielsweise:
 

Allerdings muss ich sagen, dass mir der normale Breakpoint bei 1024px auch nicht gefällt. Ein Tablet mit , sagen wir 800px kann die Matrix noch ganz gut darstellen.
Daher wäre mein Vorschlag:
Unterhalb von 768px bleibt es bei der standardmäßigen senkrechten Darstellung, darüber bleibt die Matrix.
Dazu muss nur die media query geändert werden in
@media only screen and  (min-device-width: 768px) and (max-device-width: 1024px)  {

Joffm

P.S.

aber es funktioniert noch nicht.

In solchen Fällen ist es immer ratsam den lss Export dieser relevanten Frage zu schicken.
Dazu:
  • Umfrage kopieren,
  • alles andere löschen
  • lss Export des Restes schicken

.

Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 4 days 7 hours ago by Joffm.

Please Log in to join the conversation.

  • krosenda
  • krosenda's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
1 day 11 hours ago - 1 day 11 hours ago #271431 by krosenda
Replied by krosenda on topic Matrix Desktop Ansicht auf Mobilen Devices
Danke! Das war die Lösung.

Ich hatte custom-array nicht eingetragen, das doppelte type gelöscht und für meinen speziellen Fall @media only screen and (min-device-width: 350px) and (max-device-width: 1024px) gewählt. Das passt bei mir super.

Die konstruktive Kritik zu 1-5 vs. ++,+,0,+,++ habe ich auch angenommen :)
Last edit: 1 day 11 hours ago by krosenda.

Please Log in to join the conversation.

Moderators: holchJoffmtpartner

Lime-years ahead

Online-surveys for every purse and purpose