Contao-Camp 2024
Ergebnis 1 bis 10 von 10

Thema: CSS Problem

  1. #1
    Contao-Fan
    Registriert seit
    28.01.2010.
    Beiträge
    338

    Standard 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...

  2. #2
    Contao-Urgestein Avatar von fiedsch
    Registriert seit
    09.07.2009.
    Ort
    München
    Beiträge
    2.935

    Standard

    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.
    Contao-Community-Treff Bayern: http://www.contao-bayern.de

  3. #3
    Contao-Fan
    Registriert seit
    28.01.2010.
    Beiträge
    338

    Standard

    Vielen Dank. Dass macht Sinn - werde weiter nachdenken...

  4. #4
    Contao-Fan Avatar von Stefko
    Registriert seit
    25.10.2012.
    Ort
    Karlsruhe
    Beiträge
    771
    User beschenken
    Wunschliste

    Standard

    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; ?>
    Grüße, Stefko

  5. #5
    Contao-Fan
    Registriert seit
    28.01.2010.
    Beiträge
    338

    Standard

    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?

  6. #6
    Contao-Urgestein Avatar von fiedsch
    Registriert seit
    09.07.2009.
    Ort
    München
    Beiträge
    2.935

    Standard

    @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?
    Contao-Community-Treff Bayern: http://www.contao-bayern.de

  7. #7
    Contao-Fan
    Registriert seit
    28.01.2010.
    Beiträge
    338

    Standard

    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...
    Geändert von Truller500 (03.03.2021 um 20:01 Uhr)

  8. #8
    Contao-Urgestein Avatar von fiedsch
    Registriert seit
    09.07.2009.
    Ort
    München
    Beiträge
    2.935

    Standard

    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.
    Contao-Community-Treff Bayern: http://www.contao-bayern.de

  9. #9
    Contao-Fan
    Registriert seit
    28.01.2010.
    Beiträge
    338

    Standard

    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.

  10. #10
    Contao-Urgestein Avatar von fiedsch
    Registriert seit
    09.07.2009.
    Ort
    München
    Beiträge
    2.935

    Standard

    Ich hatte mich auf den Code von @Stefko aus #4 bezogen, wo

    PHP-Code:
    <label></label
    steht.
    Contao-Community-Treff Bayern: http://www.contao-bayern.de

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •