Adding notification bubble to ons-tabbar removes icon & label

Flosef

Using RC19

Hi,

I try to add an notification bubble to the tabbar. There is an example in the theme roller patterns:

<ons-tabbar>
.....
    <ons-tab page="timeline.html">
        <div class="notification reply-notification" ons-tab-inactive>4</div>
        <ons-icon icon="ion-at" class="tab-icon"></ons-icon>
      </ons-tab>
    </ons-tabbar>
.....

Result:
0_1473928338364_Bildschirmfoto 2016-09-15 um 10.31.58.png

My code looks like this:

Without notification everythings looks fine

<ons-tabbar class="btm-toolbar">
....
      <ons-tab page="html/options.html" label="Options" icon="icon-options">
        <div class="notification" ons-tab-inactive>4</div>
      </ons-tab>
....
</ons-tabbar>

Result:
0_1473928607348_Bildschirmfoto 2016-09-15 um 10.36.31.png

When I add the notification:

<ons-tabbar class="btm-toolbar">
....
      <ons-tab page="html/options.html" label="Options" icon="icon-options">
        <div class="notification" ons-tab-inactive>4</div>
      </ons-tab>
....
</ons-tabbar>

Result:
0_1473928657876_Bildschirmfoto 2016-09-15 um 10.37.24.png

The icon and the label are missing. Also in the DOM!
0_1473928757687_Bildschirmfoto 2016-09-15 um 10.38.54.png

Why?

Thank you!

Flosef

@Flosef said:

Sorry I made a mistake in the post above. Correct:

My code looks like this:

Without notification everythings looks fine

<ons-tabbar class=“btm-toolbar”>
…
<ons-tab page=“html/options.html” label=“Options” icon=“icon-options”>
</ons-tab>
…
</ons-tabbar>

…

Any ideas?

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Adding notification bubble to ons-tabbar removes icon & label