Odoo13 - Пользовательская веб-страница с содержимым по центру по вертикали

Я пытаюсь создать новую страницу с элементом в середине страницы (по центру по горизонтали и вертикали). Но макет Odoo вызывает у меня огромные проблемы и не позволяет мне правильно его центрировать. Мне также нужно добавить фон страницы, но поскольку мой элемент не во всю высоту, он тоже не работает.

У меня примерно так:

<template id="custom_page" name="Custom page">
        <t t-call="website.layout">
            <t t-set="pageName" t-value="'Custom page'" />
            <div class="my_page">
                <div class="oe_structure">
                
                    <div id="custom_page" class="container">  <!-- Not able to center verticaly -->                              
                        <div class="card-group mx-auto col-9">
                            <div class="card">
                                ...
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </t> 
</template>

Я могу центрировать свой элемент по горизонтали с помощью mx-auto, но я понятия не имею, как это сделать по вертикали. Odoo добавляет #wrapwrap, у которого есть display: flex, а внутри него есть main с flex: 1 0 auto, что заставляет основную часть растягиваться и подталкивать нижний колонтитул к нижней части страницы.

Но теперь, когда я пытаюсь что-то сделать с высотой элементов внутри, это просто не работает. Либо height: 100%, my-auto и т. Д. ...

Я пытался добавить div с моим пользовательским CSS в разных местах, но в лучшем случае он ничего не делает или тормозит всю страницу.


html css flexbox odoo odoo-13
person AnJ    schedule 06.12.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я нашел решение.

Я не осознавал этого раньше, но эта строка:

<t t-set="pageName" t-value="'Custom page'" />

Фактически добавляет класс в div #wrapwrap со значением pageName. Это позволяет мне настроить таргетинг на мою конкретную веб-страницу в CSS и изменить функциональность flexbox в соответствии с моими потребностями (что я не мог сделать раньше, не нарушая каждую страницу, если я просто изменил CSS #wrapwrap).

Поэтому я изменил значение pageName на правильное имя класса:

<t t-set="pageName" t-value="custom_page" />

А затем использовал его с SCSS для изменения flexbox и добавления фона:

.custom_page{
    background-image: url('/image.png'); 
    background-attachment: fixed;
    background-position: center top; 
    background-repeat: no-repeat;
    background-size: cover;

    main {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
person AnJ    schedule 07.12.2020