Alle benutzerdefinierten Felder bis auf eines in der Warteschlange zur Benutzerfreigabe ausblenden

Unterstützung
1

Kann mir jemand mit etwas CSS helfen?

Wir haben in unserem Forum viele benutzerdefinierte Felder (UCFs), von denen nur eines für die Anmeldung verwendet wird; dieses ist entscheidend für die Entscheidung über die Freigabe.

Daher möchte ich nun im Review-Queue alle außer diesem einen (das zufällig das erste ist) ausblenden, damit meine argen Moderatoren nicht bei jeder neuen Benutzerfreigabe eine Reihe leerer Felder sehen müssen.

Ich bin bisher so weit gekommen:

.reviewable-user-details.user-field{
     display: none;
    /*Versuch, UCFs im Review-Queue auszublenden – derzeit werden alle ausgeblendet*/
}

Das blendet sie alle aus, aber ich muss das erste trotzdem anzeigen. Ich habe &:nth-of-type(1) versucht, aber das funktioniert hier nicht – ich denke, wegen der Art, wie das HTML aufgebaut ist. Die Elemente haben keine Klassen.

Irgendwelche Vorschläge?

6

Ich habe eine kleine Änderung vorgenommen, damit dein &:nth-of-type(1)-CSS funktioniert. Dort war ein zusätzliches umschließendes div-Element, das dies verhinderte. Dies sollte verfügbar sein, wenn du deine Website in ein paar Stunden aktualisierst.

7

Ihr seid toll!!! Vielen Dank!!!

8

Ich sehe, dass die Ember-Divs jetzt verschwunden sind – danke.

Allerdings bekomme ich das CSS immer noch nicht richtig zum Laufen, und es blendet einfach alle aus. Ich habe mehrere Varianten ausprobiert; vielleicht mache ich etwas Dummes. Außerdem frage ich mich, was passieren würde, wenn es so funktioniert, wie ich es beabsichtige: Würden dann nicht alle Felder der zweiten oder dritten Person, die eine Genehmigung benötigt, ausgeblendet?

Hier ist, was ich ausprobiert habe:

.reviewable-user-details.user-field {
    display: none;
            &:nth-of-type(1){
            display: block;
        }
}
9

Ah richtig, das funktioniert nicht, und das ist auch zu erwarten… Ich vergesse immer, dass nth-of-type sich auf das Element konzentriert und nicht auf die Klasse.

In diesem Fall gibt es also kein Element, sondern nur Klassennamen, weshalb es nicht funktioniert. Wenn Sie jedoch das Element hinzufügen (in diesem Fall div), wird es nur dann übereinstimmen, wenn der erste div-Geschwisterknoten ebenfalls die Klasse .user-field hat (was er nicht tut, da es innerhalb dieses übergeordneten Elements andere div-Elemente gibt, die vor den user-fields kommen).

Kurz gesagt: Ein allgemeiner Geschwisterkombinator funktioniert hier stattdessen. Innerhalb von .reviewable-user-fields werden alle .user-field-Elemente ausgewählt, die Geschwister des ersten .user-field-Elements sind.

.reviewable-user-fields .user-field ~ .user-field {
    display: none;
}
10

Ich habe keine Ahnung, wovon du sprichst – aber es funktioniert hervorragend; danke!

Das könnte anderen mit einem privaten Forum helfen, die beim Registrieren auf das Custom Wizard Plugin angewiesen sind, @Angus.

Wie würde man vorgehen, um ein 2. oder 3. .user-field-Element sichtbar zu machen? Ich brauche das (im Moment) nicht, aber es könnte in Zukunft notwendig werden.