ratchet icon indicating copy to clipboard operation
ratchet copied to clipboard

Ratchet 2.0.2 Android Themes broken

Open beskra opened this issue 9 years ago • 0 comments

I have come across two issues when using the Android themes css file. The regular theme file ratchet.css, everything works great. However, when I include the ratchet-theme-android.css file, the following issues occur:

  1. The tab bar does not show at the bottom. When switching to the android theme, the tab bar at the bottom disappears.
    <nav class="bar bar-tab">
      <a class="tab-item active" href="mainmenu.html" data-ignore="push">
        <span class="icon icon-home"></span>
        <span class="tab-label">Home</span>
      </a>
      <a class="tab-item" href="mainmenu.html" onclick="alert('Successfully Saved!');return false;" data-ignore="push">
        <span class="icon icon-check"></span>
        <span class="tab-label">Save</span>
      </a>
      <a class="tab-item" href="auditworkbench.html" data-ignore="push">
        <span class="icon icon-pages"></span>
        <span class="tab-label">More Stuff</span>
      </a>      
      <a class="tab-item" href="mainmenu.html" onclick="window.history.back();return false;" data-ignore="push">
        <span class="icon icon-close"></span>
        <span class="tab-label">Cancel</span>
      </a>
    </nav>  
  1. When using the secondary header bar, scrolling does not work correctly. My text appears to be displayed under the second header bar. Again, if you switch back to the ratchet.css file, everything is fine. For example, here is my code:
    <nav class="bar bar-tab">
      <a class="tab-item active" href="mainmenu.html" data-ignore="push">
        <span class="icon icon-home"></span>
        <span class="tab-label">Home</span>
      </a>
      <a class="tab-item" href="mainmenu.html" onclick="alert('Successfully Saved!');return false;" data-ignore="push">
        <span class="icon icon-check"></span>
        <span class="tab-label">Save</span>
      </a>
      <a class="tab-item" href="auditworkbench.html" data-ignore="push">
        <span class="icon icon-pages"></span>
        <span class="tab-label">Audit Workbench</span>
      </a>      
      <a class="tab-item" href="mainmenu.html" onclick="window.history.back();return false;" data-ignore="push">
        <span class="icon icon-close"></span>
        <span class="tab-label">Cancel</span>
      </a>
    </nav>  

    <header class="bar bar-nav">
      <a class="icon icon-left-nav pull-left" href="mainmenu.html" data-ignore="push"></a>
      <h1 class="title"><b>Edit Stuff</b></h1>
    </header>       

    <div class="bar bar-standard bar-header-secondary">
      <button class="btn btn-link btn-nav pull-left">
        <span class="icon icon-left-nav"></span>
            Prev
      </button>

      <a href="#popover">
        <h1 class="title">
          Sections
          <span class="icon icon-caret"></span>
        </h1>
      </a>            

      <button class="btn btn-link btn-nav pull-right">
            Next
        <span class="icon icon-right-nav"></span>
      </button>
    </div>   

    <div id="popover" class="popover">
      <header class="bar bar-nav">
        <h1 class="title">Sections</h1>
      </header>
      <ul class="table-view">
        <a href="newaudit.html"><li class="table-view-cell">Item 1</li></a>
        <a href="newaudit.html"><li class="table-view-cell">Item 2</li></a>
        <a href="newaudit.html"><li class="table-view-cell">Item 3</li></a>
        <a href="newaudit.html"><li class="table-view-cell">Item 4</li></a>
      </ul>
    </div>  

I love the ratchet toolkit, but some of the themes for android don't appear to be working correctly.

beskra avatar Jun 14 '15 17:06 beskra