This is a migrated thread and some comments may be shown as answers.

Dialog action buttons in mobile app

6 Answers 58 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
axel
Top achievements
Rank 1
axel asked on 14 Nov 2016, 10:36 PM

Hello,

The dialog action buttons are not displayed correctly in a mobile app. How can I fix this?

Axel

 

 

 

6 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 15 Nov 2016, 11:30 AM
Hi Axel,

Can you please delete your browser cache and reset the browser zooming (Ctrl+0)?

If the issue still persists. test the live demos on a mobile device and it the problem is not reproducible upgrade the project to the latest version 2016.3.1028 (R3 2016 SP1)?

If the problem is reproducible in the demos please specify under which device, OS and browser we can see it on our end.
If the problem is not reproducible in the demos, but in your app with version 2016.3.1028, provide a DoJo project, which demonstrates the issue.

Thank you!

Best regards,
Rumen
Telerik by Progress
 
Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
 
0
axel
Top achievements
Rank 1
answered on 15 Nov 2016, 12:49 PM

Hello Rumen,

    I think, it's the kendo.mobile.all.min iso kendo.default.mobile.min style.

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

dojo.telerik.com/EHena

kind regards

axel

0
Rumen
Telerik team
answered on 15 Nov 2016, 01:41 PM
Hi there,

Thank you for the extra details!

I was able to solve the issue with the following CSS:

  <style>
     .km-nova [class^="k-"] {
       -webkit-box-sizing: border-box;
       box-sizing: border-box;
     }
    .k-dialog-title { margin: -8px 0 0 0 !important; }
    .k-font-icon.k-i-x { position: absolute; top: -6px; left: -12px;}
  </style>

I also logged the problem in the bug tracking system for fixing: https://github.com/telerik/kendo-ui-core/issues/2442.

Regards,
Rumen
Telerik by Progress
 
Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
 
0
axel
Top achievements
Rank 1
answered on 15 Nov 2016, 02:27 PM

thank you for the fix.

Unfortunately, the titlebar does not have the original height.

If I set the height to 48px, the title is no longer centered.

0
Rumen
Telerik team
answered on 15 Nov 2016, 02:44 PM
You are welcome!

I've updated the http://dojo.telerik.com/@RumenJ/oDudA and the CSS to

<style>
 .km-nova [class^="k-"] {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
  .k-window-titlebar.k-header { height: 49px; }
</style>

Best regards,
Rumen
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
axel
Top achievements
Rank 1
answered on 15 Nov 2016, 02:54 PM

looks great.

thank you very much for your help....

Tags
General Discussions
Asked by
axel
Top achievements
Rank 1
Answers by
Rumen
Telerik team
axel
Top achievements
Rank 1
Share this question
or