I need help on below that I am trying to solve for days.
I am trying to combine blocks fron onsen-ui framework for creating a fixed footbar that will have action buttons with icons and text below, without loads the other pages' content inside it, like the one I created in
<ons-list-item style="text-align:center;padding-top:4px;"modifier="action-buttons">
<ons-row class="action">
<ons-col class="action-col">
<div class="action-icon">
<ons-icon icon="ion-ios-calendar-outline"></ons-icon></div>
<div class="action-label">Check Now</div>
</ons-col>
....
</ons-row>
</ons-list-item>
</ons-list>
http://codepen.io/Cadmos/pen/BybqpR/
The thing on this is that it is not a fixed footer and is not showing until you get at the bottom of the page's content.
I tried to combine to simulate a different version with ons-bottom-toolbar which is for fixed footers but unsuccesfully since it does not show any text below the icons and it loads other page's content inside it (which I do not want)
<ons-bottom-toolbar>
<div class="tab-bar">
<label ng-click="menu.setMainPage('home.html')" class="tab-bar__item">
<input type="radio" name="tab-bar-b">
<button class="tab-bar__button">
<ons-icon icon="fa-twitter" fixed-width="true"></ons-icon>Home
</button>
</label>
......
</div>
</ons-bottom-toolbar>
http://codepen.io/Cadmos/pen/JozmEQ/
Also it is causing the upper left slide menu to show twice when other page's content is loaded.
ons-bottom-toolbar in its pure format would be perfect for what I want but it is supposed to exist only to display different content of other pages inside the master page (I do not want this) which also makes the menu toolbar to load twice when exists
In the last example you are using the CSS for tabbar, not bottom-toolbar. And the toolbar should be inside the <ons-page>
. If you use an <ons-bottom-toolbar>
it works well, you just need to change the height. I think you thought it doesn't show the names because... the names fall outside the screen (the toolbar was not big enough). You can use this CSS:
.bottom-toolbar {
height: 95px;
}
Now we have to change the size of the page content, or the fixed item at the bottom will cover part of the content:
.page__bottom-bar-fill ~ .page__content {
bottom: 95px;
}
Check it here: http://codepen.io/frankdiox/pen/myoggy
Hope it helps!