Uploaded image for project: 'ZK'
  1. ZK
  2. ZK-2481

Navbar not visible if it is aligned right

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Normal
    • Resolution: Fixed
    • Affects Version/s: 7.0.3
    • Fix Version/s: 7.0.4
    • Component/s: General
    • Labels:

      Description

      Steps to reproduce:

      Click on "Application Menu" of the navbar at the bottom
      Not all the child nav/navitems are visible

      Reproducing code:

      test.zul
      <window width="100%" height="100%" title="Testing with ZK ${desktop.webApp.version}" border="normal">
          <hbox>
              <navbar orient="horizontal" collapsed="false">
                  <nav label="Application Menu">
                      <navitem label="Dashbaord"/>
                      <nav label="Admin" badgeText=">>">
                          <navitem label="Analysis Hierarchies Administration"/>
                          <navitem label="Fab Layout Administration"/>
                          <navitem label="PULSE Adminstration Client"/>
                          <nav label="PULSE Documentation" badgeText=">>">
                              <navitem label="PULSE Administrators Guide"/>
                              <navitem label="PULSE Integerators Guide"/>
                              <navitem label="PULSE Release Notes"/>
                              <navitem label="PULSE Users Guide"/>
                          </nav>
                      </nav>
                      <navitem label="Sitemap"/>
                      <navitem label="Help"/>
                      <navitem label="About..."/>
                  </nav>
              </navbar>
          </hbox>    
          <separator height="100px"/>
          <div style="float:right">
              <label value="The same navbar with float:right"/>
              <separator/>
              <navbar orient="horizontal" collapsed="false">
                  <nav label="Application Menu" >
                      <navitem label="Dashbaord"/>
                      <nav label="Admin" badgeText=">>">
                          <navitem label="Analysis Hierarchies Administration"/>
                          <navitem label="Fab Layout Administration"/>
                          <navitem label="PULSE Adminstration Client"/>
                          <nav label="PULSE Documentation" badgeText=">>">
                              <navitem label="PULSE Administrators Guide"/>
                              <navitem label="PULSE Integerators Guide"/>
                              <navitem label="PULSE Release Notes"/>
                              <navitem label="PULSE Users Guide"/>
                          </nav>
                      </nav>
                      <navitem label="Sitemap"/>
                      <navitem label="Help"/>
                      <navitem label="About..."/>
                  </nav>
              </navbar>
          </div>
      </window>
      

      Workaround:

      .navbar-right-align.z-navbar-horizontal>ul ul {
          left: inherit;
          right: 0;
      }
      
      <div style="float:right">
          ...
          <navbar orient="horizontal" sclass="navbar-right-align">
              ...
          </navbar>
          ...
      </div>
      

      ZK Fiddle: http://zkfiddle.org/sample/1728dk4/1-Right-aligning-navbar

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              ChunfuChang ChunfuChang
              Reporter:
              neillee neillee
              Votes:
              0 Vote for this issue
              Watchers:
              0 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved: