Bỏ qua để đến Nội dung
Menu
Câu hỏi này đã bị gắn cờ
1 Trả lời
4317 Lượt xem

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.

Ảnh đại diện
Huỷ bỏ

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.

Câu trả lời hay nhất

Hi, You can check this: 


Hope it helps

Ảnh đại diện
Huỷ bỏ
Bài viết liên quan Trả lời Lượt xem Hoạt động
1
thg 12 24
2175
3
thg 1 25
14560
1
thg 9 23
3039
1
thg 12 22
18624
2
thg 3 22
9959