Skip to Content
Menu
This question has been flagged
1 Reply
633 Views

<button name="action_offer_accept"

type="object"

icon="fa-check"

class="btn-success"

string="Accept"

invisible="can_accept == False or state == 'accepted'"

/>

<button name="action_offer_refuse"

type="object"

icon="fa-times"

class="btn-danger"

string="Refuse"

invisible="can_accept == False"

/>

<field name="can_accept" invisible="True"/>


If one of the buttons "action_offer_accept" and "action_offer_refuse" is initially invisible=True and the other is visible, the first one doesn't take any space and no space is reserved for it. After setting invisible=False, it appears in a "second line" in the layout which is visually very unappealing and inconsistent compared to the option that both buttons are initially visible and in one "line". 

How to always "reserve" space for my buttons action_offer_accept and action_offer_refuse?


Avatar
Discard
Best Answer

To reserve space for both buttons and avoid layout shifting when one becomes visible, wrap them in a container like <div> or <group> and use the attrs attribute instead of invisible on the buttons:

<group>

    <button name="action_offer_accept"

            type="object"

            icon="fa-check"

            class="btn-success"

            string="Accept"

            attrs="{'invisible': [('can_accept', '=', False), ('state', '=', 'accepted')]}"/>


    <button name="action_offer_refuse"

            type="object"

            icon="fa-times"

            class="btn-danger"

            string="Refuse"

            attrs="{'invisible': [('can_accept', '=', False)]}"/>

</group>


i hope it is usefull

Avatar
Discard
Related Posts Replies Views Activity
2
Dec 23
12542
3
Jul 22
22843
2
Jun 21
18349
0
Sep 20
3630
0
May 16
3990