missing header on android

6 posts, 0 answers
  1. Michael
    Michael avatar
    151 posts
    Member since:
    Jan 2012

    Posted 20 Dec 2013 Link to this post

    I recently upgraded my kendo files in an icenium project. since then, the header/navbar for landing page (the default view) is missing on Android. the odd thing is, it appears after I log into the app. mind you, there is nothing binding it to the login variables. but if I log in, the header on every view will show just fine, including the one on the landing page. if i logout, it disappears again.

    works fine on iOS.

    doesn't make much sense to me. it must have something to do with switching views? after another view has been shown, it appears correctly. when the user logs out, the app resets and shows the default again - which causes the header to be absent once more.

    any thoughts?
  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 21 Dec 2013 Link to this post

    Hi Michael,

    This shouldn't happen if the NavBar is not empty. Can you provide a sample of this issue? I can convert the thread to a ticket if you prefer the privacy.

    Regards,
    Kamen Bundev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Michael
    Michael avatar
    151 posts
    Member since:
    Jan 2012

    Posted 23 Dec 2013 Link to this post

    The problem is this: There is an <a> tag within the header that has a data-bind visibility parameter which is login dependent. For some reason, that dependency is affecting the entire header:

                 <header data-role="header">
                     <div data-role="navbar" style="background: #333333;">
                             <style>
                                .km-root .km-pane .km-view .km-logo {
                                    background-image: url(styles/images/nav_ico.png);
                                    background-size: 100% 70%;
                                    background-repeat:no-repeat;
                                }
                            </style>
                         <a href="#left_drawer" onMouseOver="this.style.borderColor='#C9DECB'" onMouseOut="this.style.borderColor='#888888'" style="width: 40px; height: 30px; background: #505050; border: solid; border-width: 1px; border-color: #888888; background-image: url(styles/images/nav_ico.png); background-size: 100% 100%; background-repeat:no-repeat;" data-bind="visible: isLoggedIn" data-rel="drawer" data-align="left" data-role="button"></a>
                         <span data-role="view-title" style="color: #dddddd;">Title</span>
                     </div>
                </header>

    If I remove: data-bind="visible: isLoggedIn", then everything appears as expected. Of course, I don't want that removed.
  4. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 25 Dec 2013 Link to this post

    Hi Michael,

    Hidden elements does not have height which is why the header is not visible. In order to workaround this you can set min-height style to the NavBar element.
    For example:
    <div data-role="navbar" style="min-height: 40px;">


    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Michael
    Michael avatar
    151 posts
    Member since:
    Jan 2012

    Posted 26 Dec 2013 Link to this post

    Interesting. That got the header to display again, but the text is missing.

    This: <span data-role="view-title" style="color: #dddddd;">Title</span>, isn't showing up. Just an empty bar.
  6. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 27 Dec 2013 Link to this post

    Hi Michael,

    By default the NavBar View Title is visible only in iOS and hidden in the rest of the platforms. In order to be visible on a specific platform, a single CSS rule is needed. Please check this help topic:

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top