<
div
data-role
=
"view"
id
=
"two-drawer-home"
data-title
=
"Default Report"
>
<
header
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
a
data-role
=
"backbutton"
id
=
"back-button"
class
=
"nav-button"
data-align
=
"left"
>Back</
a
>
<
span
data-role
=
"view-title"
></
span
>
<
a
data-role
=
"button"
data-rel
=
"drawer"
href
=
"#right-drawer"
data-icon
=
"share"
data-align
=
"right"
></
a
>
</
div
>
</
header
>
<
a
class
=
"left-btn"
data-role
=
"button"
data-rel
=
"drawer"
href
=
"#left-drawer"
data-icon
=
"nav"
></
a
>
<
div
data-role
=
"content"
>
Main Content Goes Here
</
div
>
</
div
>
<
div
data-model
=
"app.Menus"
data-init
=
"app.Menus.init"
data-role
=
"drawer"
id
=
"left-drawer"
style
=
"width: 270px"
data-title
=
"Select a Report"
data-views
=
"['two-drawer-home']"
>
<
header
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
span
data-role
=
"view-title"
></
span
>
</
div
>
</
header
>
<
div
id
=
"zones"
class
=
"k-content"
>
<
div
class
=
"configuration-horizontal"
>
<
div
class
=
"config-section"
>
<
div
data-role
=
"treeview"
data-drag-and-drop
=
"false"
data-text-field
=
"Name"
data-bind="visible: isVisible,
source: zones,
events: { select: onSelect }"></
div
>
</
div
>
</
div
>
</
div
>
</
div
>
<
div
data-role
=
"drawer"
id
=
"right-drawer"
style
=
"width: 80px"
data-title
=
"Share"
data-position
=
"right"
data-views
=
"['two-drawer-home', '/kendo-ui/mobile/m/drawer/two-way-drawers.html']"
>
<
header
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
span
data-role
=
"view-title"
></
span
>
</
div
>
</
header
>
Filters will appear here
</
div
>
Hello Kendo UI Community,
We are in the process of upgrading our mobile web application to the latest version of Kendo UI (2024.3.1015). During the upgrade, we noticed that the kendo.mobile.all.min.css
file is no longer included in the newer versions. Our application heavily depends on this file for mobile-specific styling and functionality.
Could you please advise on the following:
kendo.mobile.all.min.css
in the latest Kendo UI versions?Any insights or suggestions would be greatly appreciated, as this is critical for us to keep our application functional and up-to-date.
Thank you!
Best regards,
Arvind Kanswal
I am following this example:
https://demos.telerik.com/kendo-ui/drawer/mvvm
Currently, each drawer item has same content.
<div style="height: 200px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error accusantium odit, optio nulla maiores quo neque fugit debitis dignissimos incidunt maxime? Eum voluptatem blanditiis voluptatum praesentium dolorem, dolore placeat debitis quod delectus laborum assumenda cupiditate quaerat quam fugiat deleniti suscipit necessitatibus.</div>
How do I specify a different content for each tab?
We are trying to implement a feature where view backgrounds can be dynamic, once a user has logged in the background URLs for the various views will be loaded from the server. This gives us the ability to provide "fresh" and/or "seasonal" background images to the views. One problem that we keep running into is that when the drawer is opened and then closed, any explicitly set "background-image" property that's not defined via CSS gets wiped out. Is there any way around the behavior shown by opening and then closing the menu within this Dojo?
http://dojo.telerik.com/@artie.cs/uraNOJ
We are trying to avoid having to rework the view contents to add child elements to all of the views we already have in place, we just want to understand why the drawer behaves this way.
How do I vertically align list items in drawer to top in Nova Theme?
I would like it to appear like this
----------
Item
item
item
space
space
---------
Not like this
----------
space
item
item
item
space
----------
Thanks
app.mobileApp.navigate(
'components/cabinet/view.html'
)
<div data-role=
"content"
class=
"corplight-drawer"
>
<header data-role=
"header"
id=
"drawerHeader"
>
<div class=
"company-name"
data-bind=
"text: company"
></div>
<a class=
"change-company"
data-role=
"button"
data-rel=
"actionsheet"
href=
"#clientsActionsheet"
><span></span></a>
</header>
<ul id=
"navigation-container"
data-role=
"listview"
class=
"drawer-menu"
>
<li class=
"drawer-accounts"
><a data-icon=
"corp-accounts"
href=
"components/accounts/view.html"
>Рахунки</a></li>
<li class=
"drawer-loans"
><a data-icon=
"corp-loans"
href=
"components/loans/view.html"
>Кредити</a></li>
<li class=
"drawer-deposits"
><a data-icon=
"corp-deposits"
href=
"components/deposits/view.html"
>Депозити</a></li>
<li class=
"drawer-transfers"
><a data-icon=
"corp-transfers"
href=
"components/transfers/view.html"
>Новий платіж</a></li>
<li class=
"drawer-payments"
><a data-icon=
"corp-payments"
href=
"components/payments/view.html"
>Платежі</a></li>
<li class=
"drawer-templates"
><a data-icon=
"corp-templates"
href=
"components/templates/view.html"
>Шаблони</a></li>
<li class=
"drawer-products"
><a data-icon=
"corp-products"
href=
"components/products/view.html"
>Продукти</a></li>
<li class=
"drawer-users"
><a data-icon=
"corp-users"
href=
"components/users/view.html"
>Співробітники</a></li>
<li class=
"drawer-map"
><a data-icon=
"corp-map"
href=
"components/map/view.html"
>Відділення та банкомати</a></li>
<li class=
"drawer-exrate"
><a data-icon=
"corp-exrate"
href=
"components/exrate/view.html"
>Курси валют</a></li>
<!--<li class=
"drawer-exit"
><a data-icon=
"corp-exit"
onclick=
"app.appLogout();"
>Вихід</a></li>-->
</ul>
</div>
What is the problem?
P/S/ please find the screenshot with problem in the attached file
I am using the 2016 Q1 SP3 release of the Kendo mobile controls with the Nova theme, and the drawer icon is not showing up. Here is a snippet of my markup:
<
a
href
=
"#drawer"
data-rel
=
"drawer"
data-align
=
"left"
data-icon
=
"drawer-icon"
data-role
=
"button"
></
a
>
This can be reproduced using the sample code from the Kendo Mobile drawer demo - http://dojo.telerik.com/onUDi
Interestingly, if I go back to the 2015 Q3 SP1 release of the Kendo controls, it works. So it appears that something was changed with the Q1 2016 release.
http://dojo.telerik.com/Axiti
I found this in the Kendo css files - the icon is defined there but it doesn't render anything in the browser.
.km-drawer-icon:after,
.km-drawer-icon:before,
.km-hamburger:before,
.km-hamburger:after
{
content
:
"\e105"
;
}