missing header on android

[Michael]

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?

[Kamen Bundev]

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

[Michael]

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.

[Alexander Valchev]

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

[Michael]

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.

[Alexander Valchev]

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:

• http://docs.kendoui.com/getting-started/mobile/navbar#showing-hidden-view-title
  
  

Regards,
Alexander Valchev
Telerik