Forum Stats

  • 3,873,118 Users
  • 2,266,506 Discussions
  • 7,911,426 Comments

Discussions

Webcenter top menu skinning issue

user8012501
user8012501 Member Posts: 153
edited Feb 22, 2018 1:35PM in WebCenter Portal

Hi Experts,

I am working on Studio Edition Version 12.2.1.2.0.

In my application, i am using below task flow for top and 2nd level menus to render on the page. Everything works fine, but on tab out the next menu is not highlighting or not able to see focused or not. Some how skinning is making that focus is hide. I tried below code to make the focus highlight but none of them were worked. Can any one help how to make the menu's focus visible on the page.

af|commandMenuItem::bar-item-text:focus {

    background-color: #80a7ff;

    outline:#bbff91 solid medium;

}

and

af|commandMenuItem:focus {

    background-color: #80a7ff;

    outline:#bbff91 solid medium;

}

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

<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:af="http://xmlns.oracle.com/adf/faces/rich" xmlns:f="http://java.sun.com/jsf/core">

   <af:panelStretchLayout id="mainTopStretchPanel" styleClass="TopNavTopStretchPanel" bottomHeight="0px" dimensionsFrom="auto" binding="#{backingBeanScope.o_w_wa_scopeLevelTabs}">

      <f:facet name="center">

         <af:menuBar id="mb1" styleClass="WCPortalTopNavMenu TopNavMenuBar">

            <af:iterator id="i1" var="item" value="#{boilerBean.navigationModelPath == null ? navigationContext.defaultNavigationModel.listModel['startNode='.concat(pageFlowScope.StartNodeInput).concat(', includeStartNode=false')] : navigationContext.navigationModel[modelPath=boilerBean.navigationModelPath].listModel['startNode='.concat(pageFlowScope.StartNodeInput).concat(', includeStartNode=false')]}" rows="0">

               <af:switcher id="s1" facetName="#{item.separator ? 'separatorFacet' : (item.attributes['hasChild'] == 'true' or item.navigable) ? 'menuItemFacet' : 'null'}">

                  <f:facet name="menuItemFacet">

                     <af:switcher id="s3" facetName="#{(item.attributes['hasChild'] == 'true' and pageFlowScope.ShowChildren) ? 'navigationMenuFacet' : 'navigationItemFacet'}">

                        <f:facet name="navigationItemFacet">

                           <af:switcher id="s6" facetName="#{(empty item.attributes['Target'] || item.attributes['Target'] == '_popup') ? 'command' : 'golink'}">

                              <f:facet name="command">

                                 <af:switcher id="s8" facetName="#{item.attributes['Target'] == '_popup' ? 'client' : 'server'}">

                                    <f:facet name="server">

                                       <af:commandMenuItem accessKey="#{item.attributes['AccessKey']}" id="dc_menuitem2" text="#{WCTruncator[item.title]['25']}" shortDesc="#{item.attributes['ToolTip']}" styleClass="#{item.onSelectedPath ? 'NavSelected' : ''} NavItem" actionListener="#{navigationContext.processAction}" action="pprnav" partialSubmit="false">

                                          <f:attribute name="node" value="#{item}"/>

                                       </af:commandMenuItem>

                                    </f:facet>

                                    <f:facet name="client">

                                       <af:commandMenuItem id="dc_menuitem2_client" text="#{WCTruncator[item.title]['25']}" shortDesc="#{item.attributes['ToolTip']}" styleClass="#{item.onSelectedPath ? 'NavSelected' : ''}" actionListener="#{navigationContext.processAction}" action="pprnav" partialSubmit="false" clientComponent="true">

                                          <f:attribute name="node" value="#{item}"/>

                                          <af:clientAttribute name="modelPath" value="#{item.navigationModel.metadataId}"/>

                                          <af:clientAttribute name="selectedPrettyUrl" value="#{item.prettyUrl}"/>

                                          <af:clientAttribute name="selectedTitle" value="#{item.title}"/>

                                          <af:showPopupBehavior popupId="::rendererPopup" triggerType="mouseHover"/>

                                       </af:commandMenuItem>

                                    </f:facet>

                                 </af:switcher>

                              </f:facet>

                              <f:facet name="golink">

                                 <af:goMenuItem id="gmi1" text="#{WCTruncator[item.title]['25']}" shortDesc="#{item.attributes['ToolTip']}" targetFrame="#{item.attributes['Target']}" destination="#{item.goLinkPrettyUrl}" styleClass="#{item.onSelectedPath ? 'NavSelected' : ''}"/>

                              </f:facet>

                           </af:switcher>

                        </f:facet>

                        <f:facet name="navigationMenuFacet">

                           <af:commandMenuItem accessKey="#{item.attributes['AccessKey']}" text="#{WCTruncator[item.title]['25']}" id="dc_menu2_" actionListener="#{navigationContext.processAction}" action="pprnav" partialSubmit="false" styleClass="WCPortalTopNavMenu NavItem #{item.onSelectedPath ? 'NavSelected' : ''}">

                              <af:showPopupBehavior popupId="menuPopup" triggerType="mouseHover" align="afterStart"/>

                              <f:attribute name="node" value="#{item.children[0]}"/>

                           </af:commandMenuItem>

                           <af:popup childCreation="deferred" autoCancel="disabled" id="menuPopup" contentDelivery="immediate">

                              <af:iterator id="i2" var="subitem" value="#{item.children}" rows="0">

                                 <af:switcher id="s4" facetName="#{!subitem.separator and subitem.navigable ? 'navMenuChildFacet' : 'null'}">

                                    <f:facet name="navMenuChildFacet">

                                       <af:switcher id="s7" facetName="#{(empty subitem.attributes['Target'] || subitem.attributes['Target'] == '_popup') ? 'command2' : 'golink2'}">

                                          <f:facet name="command2">

                                             <af:switcher id="s9" facetName="#{subitem.attributes['Target'] == '_popup' ? 'client' : 'server'}">

                                                <f:facet name="server">

                                                   <af:commandMenuItem id="dc_cmi2" text="#{subitem.title}" shortDesc="#{subitem.attributes['ToolTip']}" icon="#{not empty subitem.attributes['IconURI'] ? subitem.attributes['IconURI'] : not empty item.attributes['IconURI'] ? item.attributes['IconURI'] : '/adf/webcenter/pages_qualifier.png'}" actionListener="#{navigationContext.processAction}" action="pprnav" partialSubmit="false">

                                                      <f:attribute name="node" value="#{subitem}"/>

                                                   </af:commandMenuItem>

                                                </f:facet>

                                                <f:facet name="client">

                                                   <af:commandMenuItem id="dc_cmi2_client" text="#{subitem.title}" shortDesc="#{subitem.attributes['ToolTip']}" icon="#{not empty subitem.attributes['IconURI'] ? subitem.attributes['IconURI'] : not empty item.attributes['IconURI'] ? item.attributes['IconURI'] : '/adf/webcenter/pages_qualifier.png'}" actionListener="#{navigationContext.processAction}" action="pprnav" partialSubmit="false" clientComponent="true">

                                                      <f:attribute name="node" value="#{subitem}"/>

                                                      <af:clientAttribute name="modelPath" value="#{subitem.navigationModel.metadataId}"/>

                                                      <af:clientAttribute name="selectedPrettyUrl" value="#{subitem.prettyUrl}"/>

                                                      <af:clientAttribute name="selectedTitle" value="#{subitem.title}"/>

                                                      <af:showPopupBehavior popupId=":::rendererPopup" triggerType="mouseHover"/>

                                                   </af:commandMenuItem>

                                                </f:facet>

                                             </af:switcher>

                                          </f:facet>

                                          <f:facet name="golink2">

                                             <af:goMenuItem id="gmi2" text="#{WCTruncator[subitem.title]['25']}" shortDesc="#{subitem.attributes['ToolTip']}" icon="#{not empty subitem.attributes['IconURI'] ? subitem.attributes['IconURI'] : not empty item.attributes['IconURI'] ? item.attributes['IconURI'] : '/adf/webcenter/pages_qualifier.png'}" targetFrame="#{subitem.attributes['Target']}" destination="#{subitem.goLinkPrettyUrl}"/>

                                          </f:facet>

                                       </af:switcher>

                                    </f:facet>

                                 </af:switcher>

                              </af:iterator>

                           </af:popup>

                        </f:facet>

                     </af:switcher>

                  </f:facet>

               </af:switcher>

            </af:iterator>

         </af:menuBar>

      </f:facet>

      <f:facet name="bottom">

         <af:popup id="rendererPopup" contentDelivery="lazyUncached" launcherVar="source" eventContext="launcher">

            <af:setPropertyListener from="#{source.attributes.modelPath}" to="#{viewScope.modelPath}" type="popupFetch"/>

            <af:setPropertyListener from="#{source.attributes.selectedPrettyUrl}" to="#{viewScope.selectedPrettyUrl}" type="popupFetch"/>

            <af:setPropertyListener from="#{source.attributes.selectedTitle}" to="#{viewScope.selectedTitle}" type="popupFetch"/>

            <af:setPropertyListener from="#{'true'}" to="#{viewScope.loadRendererPopup}" type="popupFetch"/>

            <af:dialog id="pt_d1" title="#{viewScope.selectedTitle}" type="none" stretchChildren="first" contentWidth="640" contentHeight="480">

               <af:region value="#{bindings.navigationrenderer1.regionModel}" id="pt_r1"/>

            </af:dialog>

         </af:popup>

      </f:facet>

   </af:panelStretchLayout>

</jsp:root>

Answers

  • user8012501
    user8012501 Member Posts: 153
    edited Feb 20, 2018 10:25PM

    Any suggestions?

  • Daniel Merchán
    Daniel Merchán Enterprise Achitect Member Posts: 2,192 Gold Trophy
    edited Feb 21, 2018 2:46AM

    Hi.


    Questions:

    1) Are you using an Out-of-the-box Skin or a Custom Skin?.

    2) In addition to the skin, do you have also Custom CSS loaded?. Bootstrap or something else...

    3) Do you have Skin uncompressed classes for checking which are the ADF selectors affecting to the focus?. It is the easiest way to check which selectors are being applied

    I do not have time to code the solution for you, I only can give some advices on how you can fix your issue.

    So, uncompress skins by changing the web.xml value and use Chrome or Firebug debugging for checking which are the selectors or which classes are overriding yours.

    Thanks.

    Kind regards.

  • user8012501
    user8012501 Member Posts: 153
    edited Feb 22, 2018 1:17PM

    Hi Daniel,

    Yes we are using custom .css for the application.

    When i use below code, outline is changing to lite yellow color but that is no working when using key board tab or using Alt + key

    af|commandMenuItem:focus {

        background-color: #80a7ff;

        outline:#bbff91 solid medium;

    }

    What is the skin selector for command menu short key or tab out?

  • Daniel Merchán
    Daniel Merchán Enterprise Achitect Member Posts: 2,192 Gold Trophy
    edited Feb 22, 2018 1:35PM

    Hi.

    I did not have a try for coding it. I just have a look into the ADF Skin Selector guidelines.

    Please, try:

    af|commandMenuItem:highlighted {

    }

    Kind regards.

    user8012501
This discussion has been closed.