[FIX] website_event: fix position of badges in event cards

After the migration of Bootstrap to 5.1.3, the `col-*` elements no longer
have a relative positionning. As a result, most elements having an absolute
position and placed relatively to those elements will be incorrectly placed.

In website_event, the badges of the event cards are currently placed on
the upper border of the card because they are now placed relatively to
the whole card instead of the card body container having a `col-*` class.
As a result, the badges isn't where it should be and get cropped by the
container.

Steps to reproduce the issue:
1. Create a new event
2. Set a template
3. Go to the /event page
4. Click on the edit button from the Odoo navbar to edit the page (editor)
5. Go to the "Customize" page
6. Click on the "Templates" toggle button

To fix that issue, we will add a `position-relative` class on the card
body container having the `col-*` class. This ensure that the badge will
be placed as before between the card body and the card image.

task-3251110

closes odoo/odoo#117872

X-original-commit: 08f98194c095c541bf24d8ba55b440b189fd0766
Signed-off-by: Stéphane Debauche (std) <std@odoo.com>
This commit is contained in:
Julien Banken
2023-04-06 08:38:56 +02:00
parent 7b7f44005e
commit af8ac9ef3b
@@ -187,7 +187,7 @@
</t>
</div>
</header>
<div t-att-class="'%s %s' % (
<div t-att-class="'%s %s position-relative' % (
opt_events_list_columns and 'col-12' or 'col',
opt_events_list_columns and event.event_registrations_open and not event.event_registrations_sold_out and 'h-100' or '')">
<!-- Body -->