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

Navbar not visible if it is aligned right

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Fixed
    • Icon: Normal Normal
    • 7.0.4
    • 7.0.3
    • General

      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

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

              Created:
              Updated:
              Resolved: