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

bottom tabbar on android

8 Answers 133 Views
TabStrip (Mobile)
This is a migrated thread and some comments may be shown as answers.
Tobias
Top achievements
Rank 1
Tobias asked on 04 Dec 2012, 02:17 PM
Hello,

I would like to have bottom tabbar on android, like it's on Iphone.
How to do this?

Best regards,
Tobias

8 Answers, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 05 Dec 2012, 09:09 PM
Hello Tobias,

I am afraid what you are trying to achieve is not supported in Kendo UI Mobile and in order to achieve it a custom implementation is needed. For example you could use the platform configuration of the Mobile Application and force an iOS look. Like here: 
new kendo.mobile.Application($(document.body), {
    platform: "android"
});

Regards,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Iliana Dyankova
Telerik team
answered on 06 Dec 2012, 08:23 AM
Hi again Tobias,

I apologize but there is a mistake in the provided code snippet. It should be:    

new kendo.mobile.Application($(document.body), {
    platform: "ios"
});

Regards,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Iliana Dyankova
Telerik team
answered on 06 Dec 2012, 09:46 AM
Hi again Tobias,

After further discussions with the team I am glad to say that the desired outcome can be achieved using the following CSS:

.km-android div.km-view {
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
}

Regards,

Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tobias
Top achievements
Rank 1
answered on 07 Dec 2012, 09:12 AM
It's working!
Thank you,
Tobias
0
Cristiano
Top achievements
Rank 1
answered on 18 Dec 2012, 04:57 PM
I have the same issue and I cannot find a solution to have the same tabstrip for android as the ios.
I forced with platform:"ios" but you can see the issue in the attached file.
How can I fix this issue?

---------------------------

I finally fix the problem with the icon's background for android browser, now I have the same result in andoid browser and chrome browser. The issue that still occurs is the color of the icons (the icon is of the same color of the background) as you can see in the central and right images of my attached file.

----------------------------
I fixed the issue:
.km-root .km-pane .km-view .km-prenota {
    background-size: 100% 100%;
    -webkit-background-clip: border-box;
    background-color: currentcolor;
    color: inherit;
}

In the rule of the custom icon I was missing the last line "color:inherit;"
Now it works perfectly
0
Cristiano
Top achievements
Rank 1
answered on 17 Jan 2013, 08:40 AM
Hi,
I found a solution for the custom icon, but still remain the issue with the background's icon on my android (samusng galaxy nexus device, native browser).
Take a look at the attached file.
How can i fix this?
Thank you
0
Kamen Bundev
Telerik team
answered on 21 Jan 2013, 07:20 AM
Hi Cristiano,

I visited your site on Android but couldn't reproduce your problem. Did you manage to fix it?

On a side note, please open a new thread/support ticket for your issue as this thread is dedicated to a completely different one.

Regards,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Cristiano
Top achievements
Rank 1
answered on 21 Jan 2013, 11:57 AM
Hi, Kamen
sorry but I think the problem was due to the cache of my browser.
Now I see correctly the icon in the tabbar.
Thank you for your answer

Sorry again.
Tags
TabStrip (Mobile)
Asked by
Tobias
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Tobias
Top achievements
Rank 1
Cristiano
Top achievements
Rank 1
Kamen Bundev
Telerik team
Share this question
or