Skip to Content
Menu
This question has been flagged
1 Reply
934 Views

Hello there

I need to place a div between the divs o_control_panel and o_content.


I managed to place it inside the content-div before the renderer using this inherit:


{ t t-inherit="web.KanbanRenderer" t-inherit-mode="extension" owl="1" }

{ xpath expr="//div[hasclass('o_kanban_renderer', 'o_renderer', 'd-flex')]" position="before" }

{ div } The Div Content { /div }

{ /xpath }

{ /t }


My problem with this is that I would have to add it to treeview, too. And that the content-div has height-scrolling-issues after adding the new div that i would have to fix in css.


A better Idea would be to place the new div between the control-panel and content. I tried this, but it doesnt work.


    { t t-inherit="web.ControlPanel" t-inherit-mode="extension" owl="1" }

        { xpath expr="//div[hasclass('o_control_panel')]" position="after" }

            { div } The Div Content { /div }

        { /xpath }

    { /t }


How can i inherit the ControlPanel (or web.ControlPanel.Regular)? What am I doing wrong?


Thanks & Best regards

Avatar
Discard
Best Answer

To insert a div between the o_control_panel and o_content divs, inheriting the ControlPanel might not be sufficient because it mainly controls the control panel itself and not its surrounding structure. Instead, you should target the parent template where both o_control_panel and o_content are rendered. This is typically done in the web.View or web.AbstractView template, depending on the view type.

Solution:

You can try inheriting the web.View template where the o_control_panel and o_content divs are both present. Here's how you can achieve it:

xmlCopy code
    
        
The Div Content

Explanation:

  • Template to Inherit (web.View): This template is responsible for rendering the control panel and content area in most views.
  • XPath Expression: The XPath targets the div with the o_control_panel class. The new div is inserted immediately after this control panel div and before the content div.

Key Points:

  • Inheritance Scope: By inheriting web.View, your new div will be placed consistently across different view types like Kanban and Tree.
  • Positioning: Placing the div after the control panel ensures it's correctly positioned between the control panel and the content.

CSS Adjustments:

If you face any scrolling issues or UI misalignment after inserting the div, you may need to adjust the CSS for the o_content or your new div to ensure proper layout and scrolling behavior. For example, setting height: calc(100% - your-div-height) for the o_content div might help.

Avatar
Discard
Author

Thank you very much for your answer. Basically everything sounds good and I can follow you. Unfortunately the Odoo forum cuts off all your code with lt and gt brackets so I can't see it.

I found the template web.View here: addons\web\static\src\views\view.xml
But it only consists of a “WithSearch” command with a t-component with some options, nothing that looks like DIVs here.

Searching the codebase for “o_control_panel” only shows the templates web.Legacy.ControlPanel, web.ControlPanel and web.FormControlPanel, nothing related to web.View.

Could you please resend the code without brackets or point me to the correct file?

Thanks!

Related Posts Replies Views Activity
1
Mar 24
721
18
Dec 22
35670
2
Dec 22
31254
2
Nov 21
7428
0
Jan 18
4515