-
CSS Problem
Hallo,
ich habe ein CSS-Verständnisproblem.
Ich habe bei der Survey Extension dien Radiobutton mit CSS nach meinen Vorstellungen angepasst.
Erstelle ich jedoch z.B. eine Matrix-Frage wird eine Tabelle generiert und die Radiobutton werde nicht mehr dargestellt.
Wie muss ich die CSS anpassen, um Checkboxen und Radiobutton auch in Tabellen anzeigen zu lassen?
Code:
/* Buttons */
/* remove standard-styles */
input[type=radio],
input[type=checkbox] {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
desweiteren:
Code:
/* Buttons */
input[type='checkbox']:checked + label::before,
input[type='checkbox']:not(:checked) + label::before,
input[type='radio']:checked + label::before,
input[type='radio']:not(:checked) + label::before {
content: ' ';
display: inline-block;
width: 24px;
height: 24px;
position: relative;
top: 4px;
border: 1px solid #bbb;
background: white;
margin-right: 1em;
box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, .1);
}
input[type=radio]:checked + label::before,
input[type=radio]:not(:checked) + label::before {
border-radius: 24px;
}
input[type='checkbox']:hover + label::before,
input[type='radio']:hover + label::before {
background:#ededed;
box-shadow: inset 0 0 0 2px white;
}
input[type='checkbox']:checked + label::before,
input[type='radio']:checked + label::before {
background:#0daaa6;
box-shadow: inset 0 0 0 2px white;
}
Damit sieht alles Prima aus... nur leider nicht in Tabellen...
-
Dein CSS sagt im Grunde- gib native Radiobuttons und Checkboxen nicht aus (Dein erster CSS-Code-Block)
- gib stattdessen mittels :before und :after des Labels einen hübsch gestylten Radiobutton oder eine Checkbox aus (Dein zweiter Code-Block)
In Tabellen hast Du wahrscheinlich kein Label (zumindest nicht da, wo es bei einfachen Fragen wäre). Und wegen des ersten Codeblocks sind die nativen Radiobuttons und Checkboxen weg.
Eine Lösung könnte sein, die CSS-Regeln spezifischer zu schreiben, damit sie für Tabellen (Matrixfragen?) nicht gelten.
Genau kann ich Dir das nicht sagen, da ich die survey extension nicht kenne.
-
Vielen Dank. Dass macht Sinn - werde weiter nachdenken...
-
Ahoi,
was @fiedsch schon sagte trifft es ziemlich exakt. Ich hatte kürzlich das identische Problem. Meine Lösung war dann an den entsprechenden Stellen(*) in der survey_question_matrix.html5 einfach ein
HTML-Code:
<label></label>
einzufügen (insgesamt vier mal)
(*) kann Dir leider keine exakte Zeilennummer nennen, da an dem Template schon einmal jemand herumdoktorte, aber nach den inputs.
Hier mal der entsprechende Codeblock von mir:
HTML-Code:
<?php foreach ($this->rows as $row): ?>
<tr class="<?php echo ($rowcounter %2 == 0) ? 'even' : 'odd'; ?><?php echo ($rowcounter == 1) ? ' first' : ''; ?><?php echo ($rowcounter == count($this->rows)) ? ' last' : ''; ?>">
<?php $colcounter = 1; ?>
<?php foreach ($this->columns as $column): ?>
<td class="c-<?php echo $this->col_classes[$colcounter]; ?>">
<?php if ($this->singleResponse): ?>
<input type="radio" name="<?php echo $this->ctrl_name; ?>[<?php echo $rowcounter; ?>]" id="ctrl_<?php echo $this->ctrl_id; ?>_<?php echo $rowcounter; ?>_<?php echo $colcounter; ?>" class="radio<?php echo $this->ctrl_class; ?>" value="<?php echo $colcounter; ?>"<?php if ($this->values[$rowcounter] == $colcounter): ?> checked="checked"<?php endif; ?> />
<label></label>
<?php else: ?>
<?php $foundvalues = is_array($this->values[$rowcounter]) ? $this->values[$rowcounter] : array(); ?>
<input type="checkbox" name="<?php echo $this->ctrl_name; ?>[<?php echo $rowcounter; ?>][<?php echo $colcounter; ?>]" id="ctrl_<?php echo $this->ctrl_id; ?>_<?php echo $rowcounter; ?>_<?php echo $colcounter; ?>" class="checkbox<?php echo $this->ctrl_class; ?>" value="<?php echo $colcounter; ?>"<?php if (in_array($colcounter, $foundvalues)): ?> checked="checked"<?php endif; ?> />
<label></label>
<?php endif; ?>
</td>
<?php $colcounter++; ?>
<?php endforeach; ?>
<?php if ($this->hasNeutralColumn): ?>
<td class="neutralcolumn n-<?php echo $this->col_classes['neutral']; ?>">
<?php if ($this->singleResponse): ?>
<input type="radio" name="<?php echo $this->ctrl_name; ?>[<?php echo $rowcounter; ?>]" id="ctrl_<?php echo $this->ctrl_id; ?>_<?php echo $rowcounter; ?>_<?php echo $colcounter; ?>" class="radio<?php echo $this->ctrl_class; ?>" value="<?php echo $colcounter; ?>"<?php if ($this->values[$rowcounter] == $colcounter): ?> checked="checked"<?php endif; ?> />
<label></label>
<?php else: ?>
<?php $foundvalues = is_array($this->values[$rowcounter]) ? $this->values[$rowcounter] : array(); ?>
<input type="checkbox" name="<?php echo $this->ctrl_name; ?>[<?php echo $rowcounter; ?>][<?php echo $colcounter; ?>]" id="ctrl_<?php echo $this->ctrl_id; ?>_<?php echo $rowcounter; ?>_<?php echo $colcounter; ?>" class="checkbox<?php echo $this->ctrl_class; ?>" value="<?php echo $colcounter; ?>"<?php if (in_array($colcounter, $foundvalues)): ?> checked="checked"<?php endif; ?> />
<label></label>
<?php endif; ?>
</td>
<?php endif; ?>
</tr>
<?php $rowcounter++; ?>
<?php endforeach; ?>
-
Hallo,
ich habe nochmal alles auf Anfang gestellt und so mit nur CSS meine Lösung gefunden.
Für die Radio-Button:
Code:
input[type='radio'] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 50%;
width: 24px;
height: 24px;
border: 2px solid #999;
transition: 0.2s all linear;
margin-right: 10px;
position: relative;
top: 4px;
}
input:checked {
border: 2px solid #1b3845;
background: #0daaa6;
outline: unset !important
}
dazu noch:
Code:
.radio_container >div {
display: flex;
margin-top: 20px;
}
.radio {
flex-basis: 24px;
margin-top: -4px;
}
label {
display: inline-block;
flex: 1;
}
Damit ist alles so wie ich mir das gewünscht habe.
Danke Euch für die Reaktionen.
Btw. Weiß vielleicht jemand wie/wo ich die Texte der Submitbuttons ändere?
-
@Stefko: müsstest Du dem <label> Nicht noch ein passendes for-Attribut geben, damit beim Klick auf das Label die (unsichtbaren) Checkbox bzw. Radiobuttons selektiert werden?
-
Wenn ich dich richtig verstehe, für den Fall, dass die Checkbox mit Cursor/Finger verfehlt wird?
ich denke, das deckt der .radio_container div ab...
-
Nein, weil die Checkbox, die Du siehst nur Deko ist. Die Daten werden — wenn ich das Konzept richtig verstehe — über die unsichtbare Checkbox übermittelt. Und die wird gesetzt, wenn man auf das damit verknüpfte Label klickt.
Wenn es aber für den .radio_container div noch einen onclick JS Handler gibt, dann macht der das wohl.
-
Moin,
aber das <label> hat doch ein for-Atrribut:
fieldset id="ctrl_9" class="radio_container mc"><div><label>Muss ich das alles beantworten?</label>
</div><input type="hidden" name="question[9]" value="">
<div><input type="radio" name="question[9]" id="ctrl_9_1" class="radio mc" value="1" /><label for="ctrl_9_1">Ja</label></div>
<div><input type="radio" name="question[9]" id="ctrl_9_2" class="radio mc" value="2" /> <label for="ctrl_9_2">Nein</label></div>
</fieldset>
[/CODE]
Die Daten werden jedenfalls übertragen.
-
Ich hatte mich auf den Code von @Stefko aus #4 bezogen, wo
PHP-Code:
<label></label>
steht.
