2015-10-04 16 views
5

Quando ridimensiono il mio browser, la maggior parte delle tessere va fuori schermo, e non c'è nemmeno una barra di scorrimento orizzontale. Posso sapere come possiamo rendere reattivo il gridster.come posso rendere il mio grido reattivo

Grazie, Balaji.

risposta

2

Sembra che qualcuno possa aver creato un responsive gridster.js! Non l'ho ancora verificato, ma potrebbe essere promettente ... http://troolee.github.io/gridstack.js/

+0

Pubblicare solo un collegamento non è una risposta. –

+0

Ciao Gwi7d31, grazie per le vostre risposte, controllerò e vi informerò :) – balaji

+1

@DisplayName questa è una risposta, in quanto fornisce una grande porta reattiva di gridster che può collassare su un singolo layout di colonna. +1 da parte mia, questo mi ha fatto risparmiare un sacco di tempo! –

6

La larghezza della griglia reattiva è disponibile in the dsmorse fork of Gridster, che consiglio al repository principale perché il repository principale è rimasto inattivo per oltre un anno.

Ecco lo responsive grid width demo sulla forcella dsmorse.

+0

Ciao Emackey, grazie per la tua risposta, proverò questo per farti sapere :) – balaji

+0

+1 per questo approccio :), nel mio caso Im non dovrebbe avere una barra orizzontale, quindi quando c'è un ridimensionamento della finestra, la griglia dovrebbe rilevarlo e regolare le tessere, ad esempio, il max_cols sarà 5, quando c'è un ridimensionamento della finestra che può essere rilevato usando $ ($ finestra) .on ('resize', onresizefunction), lì voglio ridurre il max-cols a 3, ma non sono sicuro di come aggiornare l'intera gird dopo aver fatto max-cols a 3, grazie in anticipo – balaji

+0

Purtroppo non lo faccio avere una buona soluzione a questo La demo reattiva di cui sopra funziona mantenendo un numero fisso di colonne e variando la larghezza delle colonne per riempire lo schermo. Non ho visto una modifica di Gridster che sia reattiva variando il numero di colonne. Sembra che dovrebbe essere fattibile, ma non conosco alcun codice esistente che lo faccia. – emackey

Problemi correlati