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



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