Magento2 Layout – Change Container htmlClass by Override

containerslayoutmagento2overrides

I have a container defined in a layout file, but in some case with help of other xml I would like to change its htmlClass value, is it possible by override or something ? or need to create new container for this?

Best Answer

You can change the htmlClass in theme level

For example get the layout into your theme and modify it.

I grab the code from module-theme, kept in Luma theme and added my htmlclass(mycustomclass).

<referenceContainer name="header.container">
    <container name="header.panel.wrapper" htmlClass="panel wrapper" htmlTag="div" before="-">
        <container name="header.panel" label="Page Header Panel" htmlTag="div" htmlClass="panel header **mycustomclass**">
            <block class="Magento\Framework\View\Element\Template" name="skip_to_content" template="Magento_Theme::html/skip.phtml">
                <arguments>
                    <argument name="target" xsi:type="string">contentarea</argument>
                    <argument name="label" translate="true" xsi:type="string">Skip to Content</argument>
                </arguments>
            </block>
            <block class="Magento\Store\Block\Switcher" name="store_language" as="store_language" template="switch/languages.phtml"/>
            <block class="Magento\Framework\View\Element\Html\Links" name="top.links">
                <arguments>
                    <argument name="css_class" xsi:type="string">header links</argument>
                </arguments>
            </block>
        </container>
    </container>

Related Solutions

Magento – Magento Container not working in custom layout

The main problem is: <div class="slider-container" id="slider.container"></div> did not rendered when it have not any child element in it. You must set block in this container. Ex:

<container name="slider.container" htmlTag="div" htmlId="slider.container" htmlClass="slider-container" before="page.top">
     <block class="Magento\Framework\View\Element\Template" after="-" name="abc" template="PATH_YOUR_TEMPLATE" />
</container>

Or you can use <move> element with destination is 'slider.container' (name of container) to have child element in it.

Magento2 – Fix New Container Not Showing

David's answer is correct, but his example doesn't work (for me anyway).

If you swap the text block in his example with a template block you'll see the container then displays.

My full example to get it working:

app/design/frontend/PACKAGE/THEME/Magento_Cms/layout/default.xml

<?xml version="1.0" ?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="footer">
            <container name="mike.container" as="mikeContainer" label="Mike Container" htmlTag="div" htmlClass="mike-container">
                <block class="Magento\Framework\View\Element\Template" name="testing" template="Magento_Cms::test.phtml" />
            </container>
        </referenceContainer>
    </body>
</page>

app/design/frontend/PACKAGE/THEME/Magento_Cms/templates/test.phtml

<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem suscipit, adipisci, cum quos, alias similique ad eum at deserunt eligendi enim dignissimos, unde vero ipsam voluptatibus cumque accusantium! Obcaecati, quasi.</h2>

Result

If I remove the template block, the container is no longer rendered.

Best Answer

Related Solutions

Magento – Magento Container not working in custom layout

Magento2 – Fix New Container Not Showing

Related Topic