Datagrid + Bootstrap – responsivita
- spulakk
- Člen | 6
Zdravím,
narazil jsem na zajímavý problém, mám Ublaboo Datagrid a v něm na
sloupcích např.:
->addAttributes(["class" => "col-4"])
Dokud jsem na FHD monitoru, všechno funguje bez problémů, dokonce je
tabulka i správně responsivní, ale jakmile se stránka zobrazí na jiném
zařízení s jiným rozlišením (notebook, mobil, tablet), první sloupec,
který má „col-1“, se roztáhne přes většinu tabulky a zbylé se
smrsknou ke straně.
Viewport je nastavený klasicky na device-width a už si vůbec nevím rady.
Věděl by někdo co s tím?
Datagrid je verze 5.5.6, Bootstrap 4.1.1 který si Datagrid sám natáhl
přes Bower.
Předem děkuji za odpovědi.
Editoval spulakk (17. 5. 2018 12:24)
- IJVo
- Člen | 39
Možná to bude chtít přidat ke ‚col-4‘ ještě i ‚col-sm-4‘, případně i další.
Viz. v dokumentaci Bootstrap https://getbootstrap.com/…layout/grid/#…
- spulakk
- Člen | 6
Bohužel beze změny.
Grid breakpoints are based on minimum width media queries, meaning they apply to that one breakpoint and all those above it
(e.g., .col-sm-4 applies to small, medium, large, and extra large devices, but not the first xs breakpoint).
Z tohohle chápu, že když mám nastavenou tu nejmenší kategorii, mělo by to platit pro všechny.
- GEpic
- Člen | 566
Použití gridu (tzn. řádků / sloupců [row, col]) (který se zobrazuje
pomocí flexboxu – display: flex;) není uzpůsobeno pro
použití s tabulkou, která se vykresluje prostě jako tabulka.
(display: table-row a display: table-cell pro
sloupečky) – tzn není možnost tabulku plně optimalizovat pro mobilní
zařízení protože bez většího zásahu nebudeš schopný vykreslit
sloupečky jakkoliv pod sebe. Responsivní tabulky bez nějakého JS řešíme
pomocí table-responsive-* tříd, kdy se povolí
overflow po horizontální ose a pod tabulkou se zobrazí
scrollbar. Popř. můžeš určité sloupečky na mobilech úplně vypustit, ale
to pak ztrácí datagrid význam.
Editoval GEpic (17. 5. 2018 20:38)