New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[FIX] headers_overlay: unhide cols/rows icon position broken #3733
[FIX] headers_overlay: unhide cols/rows icon position broken #3733
Conversation
aa6f1ee
to
6a53cda
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For what I've seen, you can fix this issue with the two changes I propose here. All other changes are useless, and the two proposed lines will make you able to remove the o-unhide-buttons
CSS style in headers_overlay.ts in favor to the use of bootstrap :)
@@ -42,25 +42,22 @@ | |||
t-as="hiddenItem" | |||
t-key="hiddenItem_index"> | |||
<div | |||
class="o-unhide-buttons position-relative float-end" | |||
class="o-unhide-buttons position-absolute float-end" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You can change this line to class="position-absolute end-0 translate-middle-y"
@@ -101,25 +98,22 @@ | |||
t-as="hiddenItem" | |||
t-key="hiddenItem_index"> | |||
<div | |||
class="o-unhide-buttons position-relative h-100 d-flex align-items-center" | |||
class="o-unhide-buttons position-absolute h-100 d-flex align-items-center" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You can change this line to class="position-absolute h-100 d-flex align-items-center translate-middle-x gap-2"
Ahhh, It seems you haven't consider the scenario involving icons on the first or last row/column. Right? |
Previously, there was an issue with the position of the unhide cols/rows icon, which has now been rectified. This fix involves setting the icon's position to absolute, applying bootstrap classes, and removing CSS from the ts file for o-unhide-buttons. Furthermore, when the hiddenItems consist of the first or last column/row, bootstrap classes are now utilized to appropriately hide one of the icons. Task ID: 3696210
6a53cda
to
c69ae8f
Compare
@dhrp-odoo : Yes, indeed, I haven't tried the external limits, nice catch :) LGTM now |
</t> | ||
<div | ||
class="o-unhide rounded mb-1" | ||
t-att-class="{'invisible': hiddenItem.includes(0)}" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Any reason to change the t-if
to invisible
class ? Does it break the style with t-if
?
It's best to use t-if
to avoid building the DOM (to make it invisible afterward)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Any reason to change the
t-if
toinvisible
class ? Does it break the style witht-if
?
Yes, there is. If the icon is positioned on the first or last row/column, it won't have one of the icons, leading to a misalignment.
I attempted to resolve this by adding some pixels, but then ADRM proposed using the invisible class instead. You can find the discussion here.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
robodoo r+
Previously, there was an issue with the position of the unhide cols/rows icon, which has now been rectified. This fix involves setting the icon's position to absolute, applying bootstrap classes, and removing CSS from the ts file for o-unhide-buttons. Furthermore, when the hiddenItems consist of the first or last column/row, bootstrap classes are now utilized to appropriately hide one of the icons. Task ID: 3696210 closes #3733 Signed-off-by: Lucas Lefèvre (lul) <lul@odoo.com>
Description:
Previously, there was an issue with the position of the unhide cols/rows icon, which has now been rectified. This fix involves setting the icon's position to absolute, applying bootstrap classes, and removing CSS from the ts file for o-unhide-buttons.
Furthermore, when the hiddenItems consist of the first or last column/row, bootstrap classes are now utilized to appropriately hide one of the icons.
Task: : 3696210
review checklist