0

In the tabview, I use orientation="left", but I need it to be on the "top", when resizing the page screen < 768px. I try to put a "resize" event on the page, but I can't find the element by id.

<p:tabView id="tabview" widgetVar="tabview" orientation="left">
    <p:tab title="Orientation">                                       
            Test
    </p:tab>
</p:tabView>

//<![CDATA[
            window.addEventListener('resize', function (event) {
                const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
                if (vw < 768) {//                   
                    document.getElementById('tabview').classList.remove('ui-tabs-left');
                    document.getElementById('tabview').classList.add('ui-tabs-top');
                }
            }, true);
//]]>

Skinning style: .ui-tabs-{orientation}

  • Does this answer your question? [How can I know the id of a JSF component so I can use in Javascript](https://stackoverflow.com/questions/6045307/how-can-i-know-the-id-of-a-jsf-component-so-i-can-use-in-javascript) – Jasper de Vries Oct 19 '22 at 05:32

0 Answers0