From 79514358dbf00e3acb171b1bd6cc388d80d7f127 Mon Sep 17 00:00:00 2001
From: Molkobain <lajarige.guillaume@free.fr>
Date: Mon, 5 Oct 2020 11:00:51 +0200
Subject: [PATCH] =?UTF-8?q?N=C2=B02847=20-=20Tab=20container:=20Fix=20some?=
 =?UTF-8?q?=20issues=20-=20Fix=20extra=20tabs=20list=20being=20behind=20th?=
 =?UTF-8?q?e=20tab=20content=20-=20Sanitize=20tab=20ID=20in=20the=20HTML?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../layout/tab-container/_tab-container.scss           |  1 +
 templates/layouts/tab-container/layout.html.twig       | 10 +++++-----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/css/backoffice/layout/tab-container/_tab-container.scss b/css/backoffice/layout/tab-container/_tab-container.scss
index 256a008f1..59ed1f574 100644
--- a/css/backoffice/layout/tab-container/_tab-container.scss
+++ b/css/backoffice/layout/tab-container/_tab-container.scss
@@ -82,6 +82,7 @@ $ibo-tab-container--extra-tab-toggler--background-color--on-hover: $ibo-color-gr
 }
 .ibo-tab-container--extra-tabs-list{
 	position: absolute;
+	z-index: 1;
 	top: calc(100% + 6px);
 	right: 12px;
 	max-height: $ibo-tab-container--extra-tabs-list--max-height;
diff --git a/templates/layouts/tab-container/layout.html.twig b/templates/layouts/tab-container/layout.html.twig
index c2e78117d..bd3f5f1fa 100644
--- a/templates/layouts/tab-container/layout.html.twig
+++ b/templates/layouts/tab-container/layout.html.twig
@@ -7,12 +7,12 @@
                 {% for oTab in oUIBlock.GetSubBlocks() %}
                     {% block iboTabContainerTab %}
                         {% if oTab.GetType() == constant('TabManager::ENUM_TAB_TYPE_AJAX') %}
-                            <li class="ibo-tab-container--tab-header" data-role="ibo-tab-container--tab-header" data-tab-id="tab_{{ loop.index }}" data-tab-type="{{ oTab.GetType() }}" data-cache="{{ oTab.GetCache() }}">
+                            <li class="ibo-tab-container--tab-header" data-role="ibo-tab-container--tab-header" data-tab-id="tab_{{ oTab.GetId()|sanitize_identifier }}" data-tab-type="{{ oTab.GetType() }}" data-cache="{{ oTab.GetCache() }}">
                                 <a href="{{ oTab.GetUrl() }}" class="ibo-tab-container--tab-toggler" data-role="ibo-tab-container--tab-toggler"><span>{{ oTab.GetTitle() }}</span></a>
                             </li>
                         {% elseif oTab.GetType() == constant('TabManager::ENUM_TAB_TYPE_HTML') %}
-                            <li class="ibo-tab-container--tab-header" data-role="ibo-tab-container--tab-header" data-tab-id="tab_{{ loop.index }}" data-tab-type="{{ oTab.GetType() }}">
-                                <a href="#tab_{{ loop.index }}" class="ibo-tab-container--tab-toggler" data-role="ibo-tab-container--tab-toggler"><span>{{ oTab.GetTitle() }}</span></a>
+                            <li class="ibo-tab-container--tab-header" data-role="ibo-tab-container--tab-header" data-tab-id="tab_{{ oTab.GetId()|sanitize_identifier }}" data-tab-type="{{ oTab.GetType() }}">
+                                <a href="#tab_{{ oTab.GetId()|sanitize_identifier }}" class="ibo-tab-container--tab-toggler" data-role="ibo-tab-container--tab-toggler"><span>{{ oTab.GetTitle() }}</span></a>
                             </li>
                         {% endif %}
                     {% endblock %}
@@ -21,7 +21,7 @@
                     <a href="#" class="ibo-tab-container--extra-tabs-list-toggler" data-role="ibo-tab-container--extra-tabs-list-toggler"><span class="fas fa-ellipsis-v"></span></a>
                     <div class="ibo-tab-container--extra-tabs-list ibo-is-hidden" data-role="ibo-tab-container--extra-tabs-list">
                         {% for oTab in oUIBlock.GetSubBlocks() %}
-                            <a href="#tab_{{ loop.index }}" class="ibo-tab-container--extra-tab-toggler" data-role="ibo-tab-container--extra-tab-toggler"><span>{{ oTab.GetTitle() }}</span></a>
+                            <a href="#tab_{{ oTab.GetId()|sanitize_identifier }}" class="ibo-tab-container--extra-tab-toggler" data-role="ibo-tab-container--extra-tab-toggler"><span>{{ oTab.GetTitle() }}</span></a>
                         {% endfor %}
                     </div>
                 </li>
@@ -30,7 +30,7 @@
         {% block iboTabContainerTabsContainers %}
             {% for oTab in oUIBlock.GetSubBlocks() %}
                 {% if oTab.GetType() == constant('TabManager::ENUM_TAB_TYPE_HTML') %}
-                    <div id="tab_{{ loop.index }}" class="ibo-tab-container--tab-container">
+                    <div id="tab_{{ oTab.GetId()|sanitize_identifier }}" class="ibo-tab-container--tab-container">
                         {{ render_block(oTab, {aPage: aPage}) }}
                     </div>
                 {% endif %}