Skip to Content
Menu
Musisz się zarejestrować, aby móc wchodzić w interakcje z tą społecznością.
To pytanie dostało ostrzeżenie
1 Odpowiedz
4439 Widoki

I'm trying to create new page with a element in the middle of the page (centered horizontally and vertically). But Odoo layout causes me a huge trouble and won't allow me to center it properly. I also need to add a page background but because my element isn't full height it does not work as well.

I have something like this:

<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>

I'm able to center my element horizontally with mx-auto but I have no idea how to do this vertically. Odoo adds a .wrapwrap which has display: flex and inside it there is a main with flex: 1 0 auto, which makes the main to stretch and push footer to the bottom of the page.

But now when I'm trying to do anything concerning height of elements inside it simply does not work. Either height: 100%, my-auto etc...

I tried to add a div with my custom css in various places but at best it does nothing or brakes whole page.

Awatar
Odrzuć

If you want to go beyond simply using all the Odoo building blocks with their available options, you should have in-depth knowledge of Bootstrap and HTML/CSS. A must read is also the Odoo documentation: https://www.odoo.com/documentation/14.0/howtos/themes.html

After that you can revert and ask specific questions, if you have any issues.

Najlepsza odpowiedź

Hi, You can check this: 


Hope it helps

Awatar
Odrzuć
Powiązane posty Odpowiedzi Widoki Czynność
1
gru 24
2267
3
sty 25
14836
1
wrz 23
3199
1
gru 22
18765
2
mar 22
10084