Adding notification bubble to ons-tabbar removes icon & label



  • 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 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?


Log in to reply