My tabstrip should be fixed to the bottom of the screen and stay behind the keyboard when the keyboard opens up, instead it moves up with the keyboard.  As a workaround, I tried doing this when the keyboard opens:

$('#tabstrip-tablet').css('display', 'none');

Then showing it again when the keyboard closes.  This works in the icenium simulator but does not work on the ipad itself.  Why the inconstancy and what is the correct way to handle this?

This did not use to happen and has just started with the new releases of Kendo UI Mobile.

Even after implementing the fix described here:
http://docs.icenium.com/troubleshooting/known-issues
[NEW] When you build and deploy the Kendo UI Mobile or Kendo UI DataViz project templates on iOS devices, you might experience the following issues.When you rotate the device, the tabstrip disappears.When you tap an input box, the keyboard might overlay input box even if the Keyboard plugin is enabled.Workaround: Use the following code.

document.addEventListener("orientationchange", fixViewResize);

document.addEventListener('deviceready', function () {
navigator.splashscreen.hide();
fixViewResize();
}, false);

function fixViewResize() {
if (device.platform === "iOS") {
setTimeout(function() {
$(document.body).height(window.innerHeight);
}, 10);
}
}

Here's a link to another customer having the same problem:
http://www.kendoui.com/forums/kendo-ui-mobile/tabstrip/ipad-tabstrip-moving-with-the-keyboard-visible-even-if-display-none.aspx

And this link really describes the hack needed to keep the Tabstrip from floating up:
http://www.icenium.com/resources/forums/icenium-general-discussion/click-on-input-levels-up-the-footer-on-the-keyboard-whitout-change-the-view-!-


Please see attached screenshot.

Working with KendoUI Mobile & Phonegap for a month or so, all good so far.   Just hoping for some advice on dynamically building tabs/views (if possible).
Basically, I would like to have different tabs/views based on the logged in user.  There could be many different combinations of tabs/views. 

Possible views/tabs: news, about, weather, video, articles, maps, (many more)

For example,
User 1 gets views/tabs: news, weather, maps
User 2 gets view/tabs: video, maps, about

Do you suggest I build the layout programmatically before the page is loaded?  Inject layout into the DOM?  Programmatically hide tabs not associated with current user?  Other ideas?

A simple example would be appreciated if what I'd like to do is feasible.

Thank you.  

I have a views in my Index.htm + layout containing a tabStrip. In one of my views I have a form. When I put <textarea/> in the form my layout with tabStrip disappears  (no errors reported in debug console). If I only changed <textarea/> to< input type=”text”/>, layout appears again. I need textareas in my form – how to manage it ?

This works:
< div id="view-detail"
        data-role="view"
        data-layout="detail"
        data-title="View1"
        data-init="app.views.detail.init"
        data-model="app.views.detail.viewModel">

        <form>
            <ul data-role="listview" data-style="inset">
                <li>
                    <label>
                        <span data-bind="text:nameTxt"></span>
                        <input id="twrNazwa" type="text" style="width: 65%; text-wrap:normal" />
                    </label>
                </li>
                <li>
                    <label>
                        <span data-bind="text:jmTxt"></span>
                        <input id="twrJm" type="text" style="width: 65%" />
                    </label>
                </li>
                <li>
                    <label>
                        <span data-bind="text:indexTxt"></span>
                        <input id="twrIndex" type="text" style="width: 65%" />
                    </label>
                </li>
            </ul>
        </form>
    </div>

   
< !--
the common layout for all views -->
< div data-role="layout" data-id="main"
        <div data-role="header">
            <div style="margin-top: 5px" data-role="navbar">
                <span data-role="view-title"></span>
            </div>
        </div>
        <div data-role="footer">
            <div data-role="tabstrip">
                <a href="view1" data-icon="organize">Home</a>
                <a href="view2" data-icon="contacts">View1</a>
                <a href="view3" data-icon="cart">View2</a>
                <a href="view4" data-icon="settings">View3</a>
            </div>
        </div>
    </div>

 

This crushes:

  
< div id="view-detail"
        data-role="view"
        data-layout="detail"
        data-title="View1"
        data-init="app.views.detail.init"
        data-model="app.views.detail.viewModel">
        <form>
            <ul data-role="listview" data-style="inset">
                <li>
                    <label>
                        <span data-bind="text:nameTxt"></span>
                        <textarea id="twrNazwa" style="width: 65%; text-wrap:normal" />
                    </label>
                </li>
                <li>
                    <label>
                        <span data-bind="text:jmTxt"></span>
                        <input id="twrJm" type="text" style="width: 65%" />
                    </label>
                </li>
                <li>
                    <label>
                        <span data-bind="text:indexTxt"></span>
                        <input id="twrIndex" type="text" style="width: 65%" />
                    </label>
                </li>
            </ul>
        </form>
    </div>

   
< !--
the common layout for all views -->
< div data-role="layout" data-id="main">
        <div data-role="header">
            <div style="margin-top: 5px" data-role="navbar">
                <span data-role="view-title"></span>
            </div>
        </div>
        <div data-role="footer">
            <div data-role="tabstrip">
                <a href="view1" data-icon="organize">Home</a>
                <a href="view2" data-icon="contacts">View1</a>
                <a href="view3" data-icon="cart">View2</a>
                <a href="view4" data-icon="settings">View3</a>
            </div>
        </div>
    </div>

How do I disable certain tabs in my mobile tabstrip?

Hi Guys,

I have found a weird behavior on iPad2/iOS7 on Landscape only: the bottom of the tabstrip is cropped. See screenshot attached.
Live URL is:
http://www.semiconductorconnect.org/kendo/

However: when you switch from Landscape to Portrait: the tabstrip is displayed properly.

Regards.

Helly Guys,


I have two tabstrip, but I want the first one to always appear as active. Here is the excerpt of the code below (that doesn't work).

I want that when "settingstab" is clicked on: the "resultstab" flips back to active.


Thanks.

I've got a custom font so that I can have custom icons in the tabstrip. When I use my font, the icon shows up but it's not using the color specified in the css.

It shows up black. Even if I set the color directly in the debugger, no color is applied.
<See Black.png attachment>

If I use the icon in a view, it shows up with correct color:
<See Orange.png attachment>

I assume there is some type of mask being applied but I can't figure out why it's making it black. I figured at the very least, it would be the same color as the other native icons.

Note that if I change the color of all the icons (with the km-icon css class), my custom icons do not change.

Note also: When I debug, I see that css is telling me that the color should be orange:

css:

html:

Hello team

After replacing the .css and the .js files with the latest KendoUI Mobile - and installing on my iOS7 device, the tabstrip icons, and data-icons for various menus within my application have mucked up. Instead of the data-icon "home" , the data-icon "search" pictures, I get random pictures, like a love heart, a spade, a number 3 in a box, an angel.. etc... is there something I have missed?  Do I have to explicitly define images now?

Thankyou.

Regards

Dear Telerik Support

We are in the upgrading process of adjusting our app to meet the iOS7 style.
Custom icons are used within TabStrip, with the newest Version v2013.2.1002 we are facing the issue that these icons don't get proper active states.

To help you, that you can help us I've created a sample so that you can reproduce the issue. Its based on your standard TabStrip example.
Please note that the problem only appears when using the app on an iPhone or in the iPhone Simulator from Xcode. In Chrome / Ripple everything is fine.

As you see in the attached screenshot, the active TabStrip element changes the text-color but the icon stays the same. Surprisingly the icon gets colored right when you click on an input box on the according content page. But even then, all custom icons change their color. Using the normal icons from the font like the globe works as it should.

You find the example and two screenshots which are showing the wrong behavior in the attachments.
Would be awesome to have a solution or workaround soon.
Best Regards
Gilles