Nascondi tutti i campi personalizzati tranne uno nella coda di revisione per l'approvazione degli utenti

Supporto
1

Qualcuno può aiutarmi con un po’ di CSS?

Nel nostro forum abbiamo molti Campi Personalizzati dall’Utente (UCF), di cui solo uno viene utilizzato per la registrazione; questo è fondamentale per decidere l’approvazione o meno.

Quindi ora voglio nascondere tutti tranne quello (che per caso è il primo) nella coda di revisione, in modo che i miei poveri moderatori non debbano guardare una serie di campi vuoti per ogni nuova approvazione utente.

Sono arrivato fin qui:

.reviewable-user-details.user-field{
     display: none;
    /*tentativo di nascondere gli UCF nella coda di revisione - al momento li nasconde tutti*/
}

Questo li nasconde tutti, ma devo ancora mostrare il primo. Ho provato &:nth-of-type(1), ma non funziona qui - penso a causa di come funziona l’HTML. Gli elementi non hanno classi.

Qualche suggerimento?

6

Ho apportato una modifica minore che permetterà al tuo CSS :nth-of-type(1) di funzionare: c’era un div contenitore in più che lo impediva. Questa modifica dovrebbe essere disponibile se aggiorni il tuo sito tra qualche ora.

7

Siete fantastici!!! Grazie!!!

8

Vedo che i div di Ember sono scomparsi, grazie.

Tuttavia, non riesco ancora a far funzionare il CSS: in pratica nasconde tutti gli elementi. Ho provato diverse varianti; forse sto facendo qualcosa di sbagliato. Inoltre, mi chiedo cosa succederebbe se funzionasse come previsto: non accadrebbe che il secondo o il terzo utente che necessita di approvazione avrebbe tutti i propri campi nascosti?

Ecco cosa ho provato:

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

Ah giusto, non funziona ed è previsto… Dimentico sempre che nth-of-type si concentra sull’elemento, non sulla classe.

Quindi in questo caso non c’è un elemento ma solo nomi di classi, quindi non funziona, ma se aggiungi l’elemento (div in questo caso), corrisponderà solo se il primo fratello div ha anche la classe .user-field (non lo ha perché ci sono altri div all’interno di questo genitore che precedono i .user-field).

Comunque, in sintesi… funziona qui un selettore di fratello generico. All’interno di .reviewable-user-fields seleziona tutti i .user-field che sono fratelli del primo .user-field.

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

Non ho idea di cosa tu stia parlando, ma funziona perfettamente; grazie!

Questo potrebbe aiutare altri con un forum privato che fanno affidamento sul plugin Custom Wizard all’iscrizione @Angus.

Come si potrebbe fare per rivelare un secondo o un terzo .user-field? Al momento non ne ho bisogno, ma potrebbe diventare necessario in futuro.