ons-bottom-toolbar incorrect buttons style

[jamal]

The <ons-bottom-toolbar> does not position buttons horizontally but vertically which is wrong.

Test here:

http://tutorial.onsen.io/?framework=vanilla&category=reference&module=page

Replace HTML code with the following:

<ons-page id="helloworld-page">
  <ons-toolbar>
     <div class="left">
      <ons-toolbar-button>
        <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
      </ons-toolbar-button>
    </div>
    <div class="center">
      <ons-toolbar-button>
        <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
      </ons-toolbar-button>
    </div>
    <div class="right">
      <ons-toolbar-button>
        <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
      </ons-toolbar-button>
    </div>
  </ons-toolbar>
   <ons-bottom-toolbar>	
			<div class="left">
      <ons-toolbar-button>
        <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
      </ons-toolbar-button>
      </div>
      <div class="center">Whatever</div>
      <div class="right">
          <ons-toolbar-button>
            <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
          </ons-toolbar-button>
      </div>
		</ons-bottom-toolbar>
  <p style="text-align: center">
    <ons-button>Click me!</ons-button>
  </p>
</ons-page>

JS:

document.addEventListener('init', function(event) {
  // var page = event.target;
  // if (page.matches('#helloworld-page')) {
  //   page.querySelector('ons-toolbar .center').innerHTML = 'My app';
  //   page.querySelector('ons-button').onclick = function() {
  //     ons.notification.alert('Hello world!');
  //   };
  // }
});

You will get the following. Top toolbar is fine, buttom toolbar, nope!

[Fran Diox]

A bottom toolbar can be use in many different ways depending on the app. Therefore, we do not impose horizontal align or any other CSS. Some users will want float: right, some others will prefer display: flex, etc. The left-center-right syntax that you wrote there is only for ons-toolbar and ons-list-item, not for ons-bottom-toolbar. Hope this clarifies it.

[jamal]

@Fran-Diox, I wish the documentation mentioned what you replied with so I don’t have to bother you with such questions. I can bet that many people will face the same behavior and think it is probably a bug. I can use display: flex which works fine.
Please don’t take it the wrong way but the documentation is lacking and incomplete in many parts and the See Also links are mostly broken making it frustrating when trying to learn the OnsenUI then getting 404 errors. I know this forum is available for help and you guys are great at answering questions, but good documentation is essential to cutting the learning curve and helping everyone concerned stay focused at the task at hand.

[Fran Diox]

@jamal I agree that the documentation is always improvable. However, it is never said that ons-bottom-toolbar has this sort of syntax. I guess it is not weird to assume it based on its name and “similarity” with ons-toolbar? I’ll add a quick note on this.

About the dead links, I think gh#2230 fixes most of them. It will be merged for the next release :+1:

andipavllo created this issue in OnsenUI/OnsenUI

closed docs(core|bindings): Fixed dead links. #2230

[jamal]

@Fran-Diox, thanks for the update on the docs.

[Fran Diox]

@jamal Actually I just added a new preset modifier aligned. It will be released in the next version :+1: