Weil in den Antwortoptionen von "image select" nicht das Bild mittels <img src=".../> angezeigt wird, sondern es wird nur der Pfad zum Bild eingegeben.
[url]
forums.limesurvey.org/forum/design-issue...ltiple-choice#251338
[/url]
So, jetzt etwas Generelles; und warum ich zweimal erwähnte, 6 sei angenehmer gewesen.
Du weißt ja, dass LimeSurvey die bootstrap-Blbliothek für das Layout benutzt.
Diese basiert auf einem Gitter, das jeden Container in bis zu 12 Spalten unterteilt, von denen dann jede wieder in 12 Spalten unterteilt werden können.
Daher siehst Du auch (wenn Du "bootstrap-buttons" als Fragevorlage benutzt), dass Du zwischen 1,2,3,4,6,12 Buttons/pro Zeile wählen kannst.
Eben die Teiler von 12.
Langer Rede kutzer Sinn.
Um 7 Bildchen nebeneinander darzustellen, musst Du "12 Spalten " angeben; dann bleibt rechts eben ziemlich viel frei.
Und der Rahmen ist überdimensioniert.
Gut ein bisschen css hilft
Code:
<style type="text/css">li.imageselect-listitem .imageselect-container .imageselect-label
{
border: 3px solid hsla(0,0%,60%,0.9);
}
li.imageselect-listitem .imageselect-container input.imageselect-checkbox:checked+label {
border: 3px solid rgb(255,0,0,0.9);
}
.radio-item input[type="radio"]:checked + label::after {
display:none;
}
</style>
Du siehst, ich habe die Farbe des Rahmens einmal in hsl-Syntax, einmal in rgb-Syntax angegeben.
Nimm, was Dir besser gefällt!
Und, wenn Du keinen Wert auf Durchsichtigkeit legst, eben einfach hex.
Findest Du bei "W3Schools"
[url]
www.w3schools.com/html/html_colors.asp
[/url]
Wie Du siehst ist es etwas fitzelig
Der Vergleich (nur 6 Bilder).
Aus diesem Grund würde ich diesen Fragetyp nicht nehmen, sondern doch eher eine Matrix.
So wie diese hier
Einfach mit css die Rähmchen entfernt.
Code:
<style type="text/css">
.fruity .table-bordered>tbody>tr>th,
.fruity .table-bordered>tbody>tr>td,
.fruity .table-bordered>thead>tr>th,
.fruity .table-bordered>thead>tr>td,
.fruity .table-bordered {
border: 0;
}
</style>
Joffm