Skip to content

[Layout] Too many "forced" content for inner .page-body #213

@cavasinf

Description

@cavasinf

Hey,
We’re currently a bit stuck with how the layout-xxx.html.twig file define the base 'structure' of the page.

Objective

The goal is to create a dashboard page with multiple rows and columns of with the same height.

Current state

Currently, the base template forces this HTML structure:

<div class="row row-cards">          
   <section id="" class="content">
       [...]
   </section>
</div>

<div class="{{ ''|tabler_container }}">
<div class="row row-cards">
{% block page_content_before %}{% endblock %}
<section id="{% block page_content_id %}{% endblock %}" class="{% block page_content_class %}content{% endblock %}">
{% block page_content_start %}{{ include('@Tabler/includes/flash_messages.html.twig') }}{% endblock %}
{% block page_content %}{% endblock %}
{% block page_content_end %}{% endblock %}
</section>

Render

Current render

Here's what we have currently:
Image

Desired render:

Image

To achieve this, we need to apply the .row-deck class directly after the top-level .container class.
But we want the .row-deck in the top div + remove the section part.

The whole HTML wanted:
Image

Question/Solution

  1. Is there specific reason for having the section block + default row row-cards classes?
  2. It may be a relic of admin-lte bundle?

It might be more flexible if this part of the structure was left for the developers to define, rather than enforced by the top-level template.

References with differents classes just after the .container div:
https://preview.tabler.io/
https://preview.tabler.io/activity.html
https://preview.tabler.io/photogrid.html

Metadata

Metadata

Assignees

No one assigned

    Labels

    BC BreakThis will cause BC BreakBugSomething isn't workingStatus: ReviewedHas staff reply/investigation

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions