Questions on Kendo UI for jQuery Forum

3 answers

60 views

Views sometimes appear underneath the header/navbars

Our website app is located at http://360vindemo.com. We are using KendoUI v2013.2.1024, and we are calling remote views.

If you browse to our website on some mobile devices (specifically a Nexus 7 or an iPad Mini), the first time you load the website (it auto-forwards mobile devices to http://360vindemo.com/Mobile), the Kendo Mobile Application starts up and loads everything, but the problem is that the browser evidently thinks the header takes up 0 height, so the View that gets rendered is underneath it. See the screenshot. After refreshing the page, it looks normal, and the header takes up the correct amount of height. So there seems to be some weird timing issue, that if something isn't loaded, the header takes up 0 height, and the View registers that it is supposed to be at the very top of the screen.

This bug only seems to happen after I have either closed the browser, reopened it, and browsed to our URL; or cleared the cache, then browsed to our URL. But if you hit the refresh button, it works every time.

We have tried giving the <header> tag an inline height, but the remote views still appear under the header. Any idea what is going on here? Let me know if you need any clarifying information.

NavBar

answered on 13 Nov 2013

1 answer

109 views

How to replace a header by another one

Hi guys,

i'm doing some tests, to do that i took a template on the kendo ui' page.
i clean it a bit to get what i want and right now, i have two div header in my html page.
i remove one at the load of the page and when i click on a button, i just want to remove the current header et set another one instead.
i've tried plenty of things but nothing seems to work correctly using jquery

here is my code:

<!DOCTYPE html>

<html>

<head>

<title>Demo</title>

<link href="styles/kendo.common.min.css" rel="stylesheet" />

<link href="styles/kendo.default.min.css" rel="stylesheet" />

<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />

<link href="styles/index.css" rel="stylesheet" />

<script src="js/jquery.min.js"></script>

<script src="js/kendo.all.min.js"></script>

</head>

<!--

Contenu des pages chargées par le paneau left

-->

<body>

<div data-role="view" id="drawer-home" data-layout="drawer-layout" data-title="Inbox">

</div>

<div data-role="view" id="drawer-starred" data-layout="drawer-layout" data-title="Starred Items">

</div>

<div data-role="view" id="drawer-drafts" data-layout="drawer-layout" data-title="Drafts">

</div>

<!--

// Paneau Left

-->

<div data-role="drawer" id="my-drawer" style="width: 270px" data-views="['/', 'drawer-home', 'drawer-starred', 'drawer-drafts']">

<ul data-role="listview" data-type="group">

<li>Menu

<ul>

<li><a href="#drawer-home" data-transition="none">m1</a></li>

<li><a href="#drawer-starred" data-transition="none">m2</a></li>

<li><a href="#drawer-drafts" data-transition="none">m3</a></li>

</ul>

</li>

</ul>

</div>

<!--

Headers

-->

<div class="Head" data-role="layout" data-id="drawer-layout">

<header data-role="header">

<div class="" data-role="navbar">

<a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>

<span id="compagnyName">Demo</span>

<a data-role="button" onClick="changeHead()" data-icon="drawer-button" data-align="right"></a>

</div>

</header>

</div>

<div class="HeadSearching" data-role="layout" data-id="drawer-layout">

<header data-role="header">

<div data-role="navbar">

<a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>

<input type="text" id="city" name="city" class="k-textbox" placeholder="Ville" data-align="center" />

<select name="country" id="country" data-align="right">

<option>France</option>

<option>Angleterre</option>

<option>Luxembourg</option>

<option>Espagne</option>

</select>

</div>

</header>

</div>

<script>

var app = new kendo.mobile.Application(document.body);

$('.HeadSearching').remove();

</script>

<script>

function changeHead()

{

alert('header replace');

$('.head').replaceWith('.HeadSearching');

}

</script>

</body>

</html>

if someone could help me doing this correctly ..
thanks by advance ;)

NavBar

answered on 22 Oct 2013

8 answers

883 views

Auto Enable/Disable back button

Hi

How can I manage the back button in the navbar?

for example, I don't want to show the button in the main views and when user click a link to sub view I would like to show him the button

I tried using "data-show" call a function that will use jquery to show/hide the back button but the problem kendo will change the navbar title and button

NavBar

answered on 15 Aug 2013

1 answer

82 views

Navbar not rendering properly

Hi,

for some reason this navbar is not rendering correctly on the browser :
<header data-role="header">
<div id="navbar-personalize" data-role="navbar" class="my-navbar">
<div data-align="left">
<img src="../../Images/dashboard6.png" alt="Dashboard"/>
</div>

<span data-role="view-title"></span>

<div data-align="right">
<a href="#merchandise-otherorders-view">
<img src="../../Images/whoelse6.png" alt="Who else is going?"/>
</a>
</div>
</div>
</header>

I have it set in the main layout for the application, and sometimes it works, and sometimes it doesn't. If I try and hard reload the page while clearing the cache, it seems to work but it is very random actually.

I'm not sure of what I'm doing wrong, because this used to work perfectly few days ago, after adding a couple more views in my index, it started giving me this issue.

Thanks

NavBar

answered on 05 Aug 2013

1 answer

35 views

Tap event in Navbar

According to Apple iOS usability guidelines:
"iOS apps allow people to tap the status bar to quickly scroll back to the top of a long list"

So, I try to implement with the following about.html. Tap event is not showing up in console. Any ideas?
Thanks,
Rick

<html>
<head>
<title>About</title>
</head>
<body>
<section data-role="layout" data-id="about-layout">
<header data-role="header">
<div data-role="navbar" data-tap="myTouch.tap">
<span date-role="view-title">About</span>
</div>
</header>

<footer data-role="footer">
<div data-role="tabstrip">
<a href="#home" data-icon="home">Home</a>
<a href="search.html" data-icon="search">Search</a>
<a href="about.html" data-icon="about">About</a>
<a href="more.html" data-icon="more">More</a>
</div>
</footer>
</section>
<div id="about" data-role="view" data-layout="about-layout" data-zoom="true" data-reload="true">
... long content removed
</div>
<script>
function NavTouch() {
console.log("tap");
var view = $("#about").data("kendoMobileView");
view.scroller.reset();
}
window.myTouch = {
tap: function(e) { NavTouch(); },
}
</script>
</body>
</html>

NavBar

answered on 01 Aug 2013

1 answer

61 views

NavBar BackButton triggering different button on layout view change

I am testing out KendoUI and have a basic mobile nav setup. I have a layout for my main views and for sub views, I change to a different layout to show a back button. On my main views, I have a button aligned left that opens up a menu. My problem is when navigating into a sub view and clicking the back button, it will go back to the previous view but will also trigger the underlying button to fire as well. I have noticed this DOES NOT happen if I tap on the back button very fast and ensure my finger leaves the screen quickly. If I use a slow tap motion on the screen it will trigger the underlying button on the previous view to display the menu. I have tried several different things: Binding to the button that shows the menu with a click function and other similar approaches. The main issue I feel is that the KendoUI framework loads the new view/layout and does not reset the fact that your finger may still be on the same area where anew button will be and it may be firing even tho the only event that has taken place was a tap release/end instead of a full start/end tap. Anyway around this and do you think setting the touch event variables with a lower default interval for clicks would help?

NavBar

answered on 06 Jun 2013

5 answers

182 views

Navbar Transparent

Hello,
I wonder if it's possible to have the Navbar parent element with transparent background like the attachment.

Cristiano

NavBar

answered on 22 May 2013

2 answers

352 views

Add a corporate logo to navbar

Hi - I have a requirement to show our corporate logo from every view, and their preference is to show it in the left-side area of the navbar. I have it showing up, but it is not vertically centered, and I have tried a number of things. I've tried vertical-align:middle, and margins:auto, but neither have worked so far:

<header data-role="header">
<div data-role="navbar">
<img id="corp-logo" src="images/app/corp-logo.png"
data-align="left" style="width:120px;height:30px;vertical-align:middle;"/>
<span data-role="view-title"></span>
</div>
</header>

and...

<header data-role="header">
<div data-role="navbar">
<img id="corp-logo" src="images/app/corp-logo.png"
data-align="left" style="width:120px;height:30px;margin: auto .3em auto .3em;"/>
<span data-role="view-title"></span>
</div>
</header>

What would be preferred approach approach for vertically aligning a logo image within the navbar area?
Thanks, Jim Wangler

NavBar

answered on 16 May 2013

9 answers

344 views

NavBar display

Hi,

Is there anyway to always display NavBar on the top in all devices?

Thanks,
Dan

NavBar

answered on 15 May 2013

2 answers

134 views

Kendo view title not showing in android

In android device the view title is not visible though the TitleBar is visible.
Is there any way to make the view-title visible in kendo-ui-mobile navbar in android ?

NavBar