Sticky not working correctly for top of "content" area

[bmoon]

When I place a component in the content area and then declare that element "sticky" with the p:sticky element, the element is scrolled "under" the top bar until it reaches the "top" of the browser view port at which point it jumps back down to where it should have stuck -- just below the top bar.

for example, I can create a simple panel like:

<p:panel id="fred"><h:outputLabel value="fred"/></p:panel>

and then do a sticky like:

<p:sticky target="fred">

and then add a large element below that so that vertical scrolling is enabled:

<p:panel style="height:1000px;"/>

and place that in a document that defines the "content" area, then display the page. This will exhibit the defect.

[bmoon]

I have a second problem with "sticky" but don't know if this should go under "core" or here. I'm assuming this works correctly in core and this issues is related to the ultima layout css processing. Here's what happens, when my elements switches between "normal" and being "sticky" my "width" declaration is changed such that the component is not properly sized horizontally.

Here's a fragment of my xhtml code. You can see that I define a "content" element. Below that I have a "form" containing two div's from the Ultima layout with ui-g and ui-g-12 classes. Inside that I have a panel grid with a single row and two columns. I want the tabMenu on the left to occupy 80% of the width and I want the slider on the right to occupy 20%. Further, I've declared the panelGrid as 100% for width. This lays it out correctly initially.

Code: Select all

    <ui:define name="content">
        <p:growl id="growl" widgetVar="growl" showDetail="true" showSummary="true" life="5000"/>
        <h:form id="contentForm">
            <div class="ui-g">
                <div class="ui-g-12" style="padding: 0px; width:100%;">
                    <p:panelGrid style="border:0; width:100%; padding:0; height: 38px;" id="collectionCommandMenu">
                        <p:row style="padding:0; border:0;">
                            <p:column style="width:80%; border:0; padding:0;">
                                <p:tabMenu style="border:0;" activeIndex="#{sessionBean.lastCollectionViewTabSelected}" rendered="#{sessionBean.showAdvancedSettings}">
                                    <p:menuitem value="Overview" icon="fa fa-street-view" action="#{sessionBean.renderCollectionOverview}" update="contentForm"/>
                                    <p:menuitem value="Floor Plan" icon="fa fa-leanpub" action="#{sessionBean.renderCollectionFloorPlan}" update="contentForm"/>
                                    <p:menuitem value="Collection Settings" icon="fa fa-cogs" action="#{sessionBean.renderEditCollection}" update="contentForm"/>
                                    <p:menuitem value="Group Settings" icon="fa fa-cogs" rendered="#{sessionBean.editGroupRendered}" action="#{sessionBean.renderEditGroup}" update="contentForm"/>
                                    <p:menuitem value="Endpoint Settings" icon="fa fa-cogs" rendered="#{sessionBean.editEndpointRendered}" action="#{sessionBean.renderEditEndpoint}" update="contentForm"/>
                                </p:tabMenu>
                                <h:inputHidden value="placeholder for layout"/>
                            </p:column>
                            <p:column style="border:0; padding:0; width:20%;">
                                <p:outputLabel for="zoomSlider" value="Zoom Level" rendered="#{sessionBean.showZoom}"/>
                                <p:slider minValue="10" maxValue="300" for="zoomLevel" rendered="#{sessionBean.showZoom}" id="zoomSlider" onSlide="handleSlide(event,ui)">
                                    <p:ajax event="slideEnd" listener="#{sessionBean.onZoomChange}"/>
                                </p:slider>
                                <h:inputHidden id="zoomLevel" value="#{sessionBean.zoomLevel}" rendered="#{sessionBean.showZoom}"/>
                            </p:column>
                        </p:row>
                    </p:panelGrid>
                    <p:sticky target="collectionCommandMenu" margin="75"/>
                    <ui:fragment rendered="#{sessionBean.showCollectionOverview}">
                        <p:panel style="width: #{sessionBean.collectionViewWidth}px; height: #{sessionBean.collectionViewHeight}px; padding:0; border:0;"/>
                    </ui:fragment>
......

This gets rendered to the following code (captured from FireFox browser). You can see that the table width is still set to 100% as was specified in the xhtml file above.

Code: Select all

<div class="ui-sticky-ghost" style="height: 38px;"></div>
<table id="contentForm:collectionCommandMenu" class="ui-panelgrid ui-widget ui-shadow ui-sticky" style="border: 0px none;width: 100%; padding: 0px; height: 38px; position: fixed; top: 75px; z-index: 1005;" role="grid">
    <tbody>
        <tr style="padding:0; border:0;" class="ui-widget-content ui-panelgrid-even" role="row">
            <td role="gridcell" class="ui-panelgrid-cell" style="width:80%; border:0; padding:0;">
                <div id="contentForm:j_idt180" class="ui-tabmenu ui-widget ui-widget-content ui-corner-all" style="border:0;">
                    <ul class="ui-tabmenu-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
                        <li class="ui-tabmenuitem ui-state-default ui-state-active ui-corner-top ui-tabmenuitem-hasicon" role="tab" aria-expanded="true" aria-selected="true" tabindex="0">
                            <a tabindex="-1" class="ui-menuitem-link ui-corner-all" href="#" onclick="PrimeFaces.ab({s: & quot; contentForm:j_idt181 & quot; , u: & quot; contentForm & quot; , f: & quot; contentForm & quot; }); return false;">
                                <span class="ui-menuitem-icon ui-icon fa fa-street-view"></span>
                                <span class="ui-menuitem-text">Overview</span></a></li>
                                <li class="ui-tabmenuitem ui-state-default ui-corner-top ui-tabmenuitem-hasicon" role="tab" aria-expanded="false" aria-selected="false" tabindex="0">
                                
...........

However, after the element gets "stickied" and then back it changes the value of "width" to "auto" rather than restoring it to 100%. Here's what I capture from FireFox:

Code: Select all

<table id="contentForm:collectionCommandMenu" class="ui-panelgrid ui-widget" style="border: 0px none; width: auto; padding: 0px; height: 38px; position: static; top: auto; z-index: 1002;" role="grid">
        <tbody>
            <tr style="padding:0; border:0;" class="ui-widget-content ui-panelgrid-even" role="row">
                <td role="gridcell" class="ui-panelgrid-cell" style="width:80%; border:0; padding:0;">
                    <div id="contentForm:j_idt180" class="ui-tabmenu ui-widget ui-widget-content ui-corner-all" style="border:0;">
                        <ul class="ui-tabmenu-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
                            <li class="ui-tabmenuitem ui-state-default ui-state-active ui-corner-top ui-tabmenuitem-hasicon" role="tab" aria-expanded="true" aria-selected="true" tabindex="0">
                                <a tabindex="-1" class="ui-menuitem-link ui-corner-all" href="#" onclick="PrimeFaces.ab({s: & quot; contentForm:j_idt181 & quot; , u: & quot; contentForm & quot; , f: & quot; contentForm & quot; }); return false;">
                                    
...........

[bmoon]

Just found this post in the "core" threads:

viewtopic.php?f=3&t=36959

Looks like this is probably a similar issue to what this post is addressing. BTW, the fixed posted on that thread does not work with the ultima layout. It fails to take into account the "sidebar" size.

[mert.sincan]

It is not a layout or theme issue.

BTW, the fixed posted on that thread does not work with the ultima layout. It fails to take into account the "sidebar" size.

- You can override the above custom solution or css options for this issue.