Goodnight,

I am trying to divide the point of sale display into 3 divisions, but the buttons overlap, I have tried several classes and cannot find the error, please thank them for their support. thanks.

the new block I want is in the : <div class="middlepane" style="width:25%">

thanks,

<?xml version="1.0" encoding="UTF-8"?>

<templates id="template" xml:space="preserve">

    <t t-name="Chrome">

        <div class="pos">

            <div class="pos-topheader">

                <div class="pos-branding">

                    <img class="pos-logo" src="/web/binary/company_logo" />

                    <span class="placeholder-UsernameWidget"></span>

                </div>

                <div class="pos-rightheader">

                    <span class="placeholder-OrderSelectorWidget"></span>

                </div>

            </div>

            <div class="pos-content">

                <div class='window'>

                    <div class='subwindow'>

                        <div class='subwindow-container'>

                            <div class='subwindow-container-fix screens'>

                            </div>

                        </div>

                    </div>

                </div>

                <div class="placeholder-OnscreenKeyboardWidget"></div>

            </div>

            <div class='popups'>

            </div>

            <div class="loader">

                <div class='loader-feedback oe_hidden'>

                    <h1 class='message'>Loading</h1>

                    <div class='progressbar'>

                        <div class='progress' width='50%'></div>

                    </div>

                    <div class='oe_hidden button skip'>

                        Skip

                    </div>

                </div>

            </div>

        </div>

    </t>

    <t t-name="ProductListWidget">

        <div class='product-list-container'>

            <div class="product-list-scroller touch-scrollable">

                <h2>Men</h2>

                <div class="product-list-menu" style="background-color:darkblue">

                </div>

                <h2>otros</h2>

                <div class="product-list" style="background-color:chocolate">

                </div>

            </div>

            <span class="placeholder-ScrollbarWidget" />

        </div>

    </t>

    <t t-name="Product">

        <span class='product' t-att-data-product-id="product.id">

            <div class="product-img">

                <img t-att-src='image_url' />

                <t t-if="!product.to_weight">

                    <span class="price-tag">

                        <t t-esc="widget.format_currency(product.get_price(pricelist, 1),'Product Price')"/>

                    </span>

                </t>

                <t t-if="product.to_weight">

                    <span class="price-tag">

                        <t t-esc="widget.format_currency(product.get_price(pricelist, 1),'Product Price')+'/'+widget.pos.units_by_id[product.uom_id[0]].name"/>

                    </span>

                </t>

            </div>

            <div class="product-name">

                <t t-esc="product.display_name"/>

            </div>

        </span>

    </t>

    <t t-extend="ProductCategoriesWidget">

        <t t-jquery="div[class='searchbox']" t-operation="replace">

            <div class="searchbox" style="width:70%">

                <input placeholder="Search Products" style="width:100%"/>

                <span class="search-clear"></span>

            </div>

        </t>

    </t>

    <t t-extend="ProductScreenWidget">

    <t t-jquery='div[class="product-screen screen"]' t-operation="replace">

            <div class="product-screen screen">

                <div class="leftpane" style="width:25%" >

<div class='window'>

<div class='subwindow'>

<div class='subwindow-container'>

<div class='subwindow-container-fix'>

<div class="placeholder-OrderWidget"></div>

</div>

</div>

</div>

</div>

                </div>

<div class="middlepane" style="width:25%">

<div class='subwindow'>

<h3>Payment</h3>

<section class="payment_screen">

<div class='placeholder-PaymentButtons'></div>

</section>

</div>

<div >

<span class='searchbox_2 clientlist'>

<input placeholder='Search Customers' />

<span class='search-clear'></span>

</span>

</div>

<div >

    <div class="control-buttons oe_hidden"></div>

<div class="placeholder-ActionpadWidget"></div>

<div class="placeholder-NumpadWidget"></div>

</div>

  </div>

                <div class="rightpane" style="width:50%">

                    <table class="layout-table">

                        <tr class="header-row">

                            <td class="header-cell">

                                <span class="placeholder-ProductCategoriesWidget" />

                            </td>

                        </tr>

                        <span class="placeholder-ProductListxCategoryWidget"/>

                        <tr class="content-row">

                            <td class="content-cell">

                                <div class="content-container">

                                    <span class="placeholder-ProductListWidget" />

                                </div>

                            </td>

                        </tr>

                    </table>

                </div>

            </div>

        </t>

    </t>

    <t t-extend="PosTicket">

   <t t-jquery="div[class='logo']" t-operation="replace"/>

    </t>

    <t t-extend="PosTicket1">

        <t t-jquery="div[class='logo']" t-operation="replace"/>

    </t>

</templates>