Skip to Content
Menú
This question has been flagged
1 Respondre
484 Vistes

<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
Descartar
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
Descartar
Related Posts Respostes Vistes Activitat
2
de des. 23
12294
3
de jul. 22
22540
2
de juny 21
18136
0
de set. 20
3469
0
de maig 16
3828