The lower bar (tab bar) disappears from the view in the app

Question

The lower bar (tab bar) disappears from the view in the app

Navigation

#1 by (0 votes)

1

I'm doing a hybrid app with Framework7, I want to do it with a tab bar that will be below. Everything works perfectly as long as in the pages of the tab bar I have not written neither text nor code, but if I write or add anything the navbar moves up to below the limit of the app (You have to scroll down to see it) and you can not click on the tab bar to take them to their respective pages.

This is the tab bar code:

<div class="toolbar tabbar tabbar-labels">
  <div class="toolbar-inner">
    <a href="#tab1" class="tab-link active">
      <i class="icon demo-icon-1"></i>
      <span class="tabbar-label">Label 1</span>
    </a>
    <a href="#tab2" class="tab-link">
      <i class="icon demo-icon-2">
        <span class="badge bg-red">5</span>
      </i>
      <span class="tabbar-label">Label 2</span>
    </a>
    <a href="#tab3" class="tab-link">
      <i class="icon demo-icon-3"></i>
      <span class="tabbar-label">Label 3</span>
    </a>
    <a href="#tab4" class="tab-link">
      <i class="icon demo-icon-4"></i>
      <span class="tabbar-label">Label 4</span>
    </a>
  </div>
</div>

And this is the code of the first page with what I have included (an item list and some text), and for the tab bar to look and work I have to remove the text and the item list.

<div data-page="index-1" class="page">
  <!-- Scrollable page content-->
  <div class="page-content">
    <div class="content-block-title"><center><font size="3">Download Apps!<font size="3"></center></div>
    <div class="content-block">
      <font size= "3">
        <p><center>Here's where you can download any app/tweak you want!</center></p>
        <div class="content-block-title"><center>Categories:</center></div>
        <div class="list-block media-list inset">
          <ul>
            <li>
              <a href="#" class="item-link item-content">
                <div class="item-media"><img src="..." width="44"></div>
                <div class="item-inner">
                  <div class="item-title-row">
                    <div class="item-title">Hacked apps</div>
                  </div>
                  <div class="item-subtitle">Prehacked apps with unlimited gold/gems/coins (Specified at app installation page!)</div>
                </div>
              </a>
            </li>
            ...
          </ul>
        </div>          
        <font size= "3">
      </div>
    </div>
  </div>

I have tried doing all kinds of things: removing only part of the code, etc. but to make it work you have to remove everything and you can not leave anything.

PS: I passed the files to a friend and he said he did not know, but he uploaded it to a free server so you could see it and see if you could help me: link

html framework7

asked by juan lopez 11.12.2016 в 18:36

source

1 answer

How can I send a complete sqlite table to mysql in android studio? Oracle stored procedure that returns records

score 0 · Answer 1

NOTE: I have never used Framework7 and I have not installed it, so the code below may not work (I could not prove it), my answer is based on the official documentation found online.

If I understand correctly, the real problem is that the tab bar should be fixed ( fixed ) and it is not, the content pushes it down the page. It really is a problem with positioning. Now, if you go to the Framework7 documentation for tab bars you will see that there is a note (my translation):

Because of its height, you should use "tabbar-labels-fixed" or "tabbar-labels-through" for design Fixed and Through with Tab Bar

And if you visit the linked page, and you go to the section for the fixed design (Fixed) , you will see that it is specified that (again my translation):

In a fixed design each page has its own navbar and toolbar that will always be visible on the screen, and does not depend on the scroll of the page

That is exactly what you are looking for (again, if I understood correctly). So what you should do is add the class "tabbar-labels-fixed" or "toolbar-fixed" in your code. On the last linked page you have an example using "tollbar-fixed" and (applied to your code) it would look something like this:

<div data-page="index-1" class="page toolbar-fixed">
  <!-- Scrollable page content-->
  <div class="page-content">

Apart from that, the code of the page that you share is incorrect (there are labels that open but do not close), I do not know if that could influence that it looks bad, but it would be good if you corrected it anyway .