Uploaded image for project: 'Magnolia Frontend Helpers'
  1. Magnolia Frontend Helpers
  2. MGNLFE-97

Greenbars rendering with "display: flex" (Flexbox)

    XMLWordPrintable

Details

    Description

      "display: flex" css has become popular among front end developers.
      Flexbox is efficient way to lay out, align and distribute space among items in a container.

      Current rendering of Greenbars is making it hard/impossible to use Flexbox.
      Greenbars are added on the same dom level as components or areas and are affected by Flexbox.

      Eg.
      We can have code:
      <div style="display: flex">
      [@cms.area name="foobar" /]
      </div>

      Greenbars would be rendered next to components.

      Desired:

       

      Actual currently / problem:

      In ftl we can go around it by adding custom templateScript for an area and wrap the component loop in div with flex.
      This is not ideal dev experience for ftl.
      This is not possible in headless scenario at all.

      Create a simple page/app that illustrates the problem.

      Checklists

        Acceptance criteria

        Attachments

          Issue Links

            Activity

              People

                canh.nguyen Canh Nguyen
                bstaryga Bartosz Staryga
                Votes:
                0 Vote for this issue
                Watchers:
                6 Start watching this issue

                Dates

                  Created:
                  Updated:
                  Resolved:

                  Checklists

                    Task DoD

                    CI Builds

                      No builds found.