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?