Columns do not render properly

jelleroorda commented 3 years ago

Bug Description

When creating a Buildamic field that has two simple columns, the columns are not displayed properly.

How to Reproduce

Create a field, add a text field or something like that in one column. You can now see it spans the entire row.

Schermafbeelding 2021-09-03 om 13 41 38

When I add the following snippet to my layout it works.

<style>
    :root {
        --col-gap: 20px;
    }
</style>

Schermafbeelding 2021-09-03 om 13 42 02

Extra Detail

It seems to be because the --col-gap css variable is not defined, which causes calc() to fail because it can't calculate a proper flex basis.

Schermafbeelding 2021-09-03 om 13 41 02

Environment

Statamic 3.2.2 Pro Laravel 8.58.0 PHP 8.0.6 edalzell/blade-directives 3.5 handmadeweb/buildamic dev-main

michaelr0 commented 3 years ago

Thanks Jelle,

This is likely related to https://github.com/HandmadeWeb/buildamic/pull/7 @sliver37 can you confirm this to be the case?

michaelr0 commented 3 years ago

Hi Jelle,

We have added a some directives, tags and helpers for this now, as under the assumption that most Statamic sites will probably be using TailWind, we can provide an optional grid/starting css for some cases. https://github.com/HandmadeWeb/buildamic#frontend

michaelr0 commented 2 years ago

This should be fine enough for now, with the above comment being true.

HandmadeWeb / buildamic