Tabelle dell'elenco utenti traboccano dal div padre?

Ciao!

Sto attualmente studiando Discourse per un futuro forum in portoghese e ho notato che alcune tabelle escono dal loro div genitore:


Questi esempi sono stati presi con il tema Graceful, ma succede anche con il tema predefinito.
È qualcosa di cui si è già parlato o dovrei aprire un issue a riguardo?
Grazie! :smiley:

Penso che sia un problema specifico del tema, non lo vedo sul mio tema.

Prova a cambiare la lingua; nel mio caso questo succede perché le intestazioni della tabella sono un po’ più grandi rispetto all’inglese.
Se riduco tutte le intestazioni della tabella a una sola parola, la larghezza della tabella torna a quella del div genitore (1110px nel mio caso), ma nel mio caso le intestazioni sono un po’ lunghe, quindi la tabella diventa più larga del suo div genitore.

L’ho appena fatto, nessun problema. Penso sia perché il tuo tema ha un contenitore più piccolo a causa di quell’ampio padding/margini che vedo. Nel mio tema ho impostato un max-width di 1250px. Oppure aumenta le dimensioni del contenitore aggiungendo

.wrap {
max-width: 1250px;
}

o prova a ridurre quei margini.

1 Mi Piace

Questo è su una nuova installazione locale senza personalizzazioni, ho solo cambiato la lingua e aperto la tabella degli utenti:

Oggi sono di buon umore, mandami il link della tua bacheca e darò un’occhiata veloce se vuoi :slight_smile:

1 Mi Piace

Questa è una pagina diversa – sembra la pagina /users, mentre lo screenshot nel primo post è l’elenco utenti dell’amministratore. Chiarirò modificando il primo post.

Jeff, la seconda immagine proviene dalla pagina /users.
Scusa, avrei dovuto fare nuovi screenshot con il tema predefinito.

Ecco il link alla bacheca con il tema predefinito:
https://abreojogo.flying-ape.com/u

Penso di averlo trovato. Non riuscivo a vederlo nel mio tema perché ho un max-width di 1250px, quindi è più grande.
Aggiungi questo nella scheda Desktop:

body .directory table th.sortable {
    white-space: initial;
}

Per scheda Desktop intendo qui:

Modifica: @codinghorror Sì Jeff, è presente anche nel tema predefinito a causa di
white-space: nowrap; in discourse.scss riga 312.

2 Mi Piace

Grazie Cos, così funziona! :star_struck:
Ho anche aggiunto questo per risolvere lo stesso problema nella pagina /admin/users:

body .admin-contents table th.sortable {
    white-space: initial;
}
1 Mi Piace

Questo evidenzia un problema con lo scorrimento infinito e le tabelle larghe… Lo dimostro qui:

Il comportamento attuale è che, in questi casi, scorriamo l’intera applicazione in orizzontale… solitamente cerchiamo di evitare questo, ma se osservi la seconda metà del video vedrai che cercare di risolverlo può peggiorare le cose. Se nascondiamo l’overflow e aggiungiamo una barra di scorrimento orizzontale per scorrere solo l’eccesso della tabella, la barra di scorrimento si trova nella parte inferiore della tabella e non è fissata alla parte inferiore della finestra di visualizzazione… quindi è molto difficile da raggiungere mentre carichiamo nuovi risultati man mano che scorri.

Penso che la migliore opzione sia probabilmente aggiungere un’altra barra di scorrimento nella parte superiore delle tabelle con overflow utilizzando qualche script JS?

1 Mi Piace

Sì, la seconda parte con la soluzione è peggiore.
Per me il problema delle tabelle larghe che escono dai margini è che rompe il design della pagina, mentre tutto il resto è correttamente contenuto e allineato.

Ma immagino non ci sia una soluzione facile per questo e la migliore correzione per ora è evitare di avere queste tabelle larghe fin dall’inizio.

1 Mi Piace