I have an app where I have a bootstrap row with 2 columns.
In each column I have a container that has a datatable inside.
This works great on different screen sizes as I can make the right column move down on a smaller screen using ‘size.xs’.
As usual here’s the tricky bit…
I need to have the left col 20% width & the right one 80% width ( customer details on the left Invoices on the right) So I need more real estate on the right.
If I set % in the columns it works fine except the the ‘size.xs’ fails.
Is there a way to get this working ?
Cheers
Steve Warby
All BS column widths are essentially percentages so hacking BS’s intended column width isn’t too much work. Create a class in Project CSS to override Bootstraps’s own CSS (Project CSS is read in last on deploy so takes precedent).
@media (min-width: 768px) {
.col-sm-20p {
width: 20%;
}
.col-sm-80p {
width: 80%;
}
}
Next, add col-sm-20p
to the first column Class property in the IDE, and add col-sm-80p
to the Class property of the other column.
The result should be standard BS behavior in the xs range, and 20%/80% widths in the sm and larger ranges. It also leaves intact standard BS behavior for any column not having this class assigned to it.
This solution works with Bootstrap 3 as used in AppStudio, not the newer version out there.
Kind regards,
Doug
Thanks Doug,
thats working as expected. + I now some more ‘wizardry’
Cheers
Steve Warby