Overslaan naar inhoud
Menu
Je moet geregistreerd zijn om te kunnen communiceren met de community.
Deze vraag is gerapporteerd
2 Antwoorden
2528 Weergaven

Hello, first, please forgive me for the broken English, I am using a translator.


I'm new to development, and I'm having a problem centering my content.


I have a container that contains two divs, one with an SVG map inside and the other with text that changes depending on where you click on the map.


I want the two to be side by side, which works in my browser, but when I integrate my code into Odoo, everything goes all over the place.


Can you guide me?


(HTML, CSS, JS, Odoo16)


Avatar
Annuleer
Beste antwoord

Hi Bro,
If you want both divs in the same row you can use style=" display: flex". This will default make both divs in a row. I you want to make both divs aligned in the column, then you can use, style=" display: flex; flex-direction: column".
If you want to center align row-wise then you can use, style="justify-content: center" and if you want to align column-wise, then you can use, style="align-item: center".

Avatar
Annuleer
Auteur

Hi Pratyush Ratan,

First, thank you for your answer.
Unfortunately, When I apply your advice the map is at the top, but my text appears at the bottom (I have to scroll a little to find it…)

If you have time to take a look at the code on my Github to tell me where I'm wrong... (https://github.com/Matthis-LM/map-svg-odoo16/blob/main/indexx.html)

Beste antwoord

Hi

If you need to make two divs side by side you can use the style= display:flex ! important; inside your container.This important is giving to makes priority for your style.You can provide this style as inline.example:<div class="container"></div>
Or you can create a directory inside your module and provide this CSSexample:.container{ display:flex !important;}
and you can specify the path  in assets inside the manifest  like
'assets': {
        'web.assets_backend': [
               module_name/static/src/css/style.css        ]}


Hope it helps

Avatar
Annuleer
Gerelateerde posts Antwoorden Weergaven Activiteit
1
jul. 24
1945
1
jul. 24
1960
1
dec. 22
2711
2
mrt. 18
20114
1
mrt. 15
4065