I have a tab strip where two of the tab urls differ only by the url parameters.  For example:

The tab strip works as expected when clicking/tapping to navigate but when navigating using kendo.navigate(), the correct tab button is not visually selected.

Can you confirm that this is a bug that will be fixed.  Also, is there any quick workaround for this?  Thanks.

When ever I put a custom font icon in the tab strip it raises the height of the tab strip. The extra height (blank space above teh icon) is equivalent to the space reserved for the icon.  When I look at the code in dreamweaver I can see a grey square for where the Icons are meant to go and when the custom icon is inserted this grey box is place above the custom icon and the whole tab space is raised.  I tried all types of css  but is keeps on reserving this space for the kendo icon and will not give up the space when a custom font icon is inserted.


<footer data-role="footer">
    <div data-role="tabstrip" style="background-color:#F96;font-size:small">
      <a onclick="noImg();" data-icon="favourites">None</a>
      <a onclick="medImg();" data-icon="compose" >Med</a>
      <a onclick="lgImg();" data-icon="globe">Large</a>
     <a href="views/insect.html" class="tabIcon"><i class="icon-kub-mobile" style="font-size:xx-large"></i><div>All hhh</div></a>
     </div>
  </footer>


Also when I have many buttons in the tabstrip each button has too much padding/margins and I would like them to be able to become even more narrower than default. How do I do this?

Hi,

is it possible to programatically hide/show tabs in a Mobile TabStrip?  For example, my header contains a TabStrip that has 10 tabsp, but  based on a condition, I may only want 5 of those tabs visible.  Also, depending on the condition, those 5 tabs may be any combination of the 10.

Thanks,
Kevin

Hello, Kendo Team
  I'm a newbie for KendoUI Mobile,a quick question,can I change the TabTrip orientation to vertical,just like a ListView with  TabTrip features.
  By default,TabTrip will display all cells in one row, and I want to display all cells in one column.

Thanks 

I'm using a TabStrip in the middle of a page's content to programmatically switch some views which are basically divs that I toggle visibility on.  That works fine and all but I notice if I am scrolling down the page and tap and hold and the tabstrip happens to be under my finger the tabstrip registers that as a "click" and immediately changes.  Is there anyway to avoid this?  Could the Touch widget possibly solve this problem?

Scott

The issue I have is with the tabstrip in a footer on ios devices with view transition slide. When you try to navigate quickly through the views the tabs can get 'stuck'. It seems to me that the mouse-up event doesn't fire because the tab you touch stays highlighted. Then when you try clicking it again it fires the click event twice consecutively. This behavior does not seem to occur on android devices.

I've created an example jsbin to help with replicating the issue, just be aware that it takes a few goes of flicking between the 2 views quickly to cause the issue - you have to touch the tabstrip at precisely the right time as soon as a view shows. And make sure you run it on an ios device; I've been testing with an iPad mini.

The attached screenshots show what happens when the issue occurs.

Regards
Dean

Hi!,

I am creating a project in AppBuilder based on Kendo UI mobile app. I am trying to customize it in such a way that the footer element of the layout is not visible when in the login page but becomes visible once logged in and navigate to other tabs. Any advise will be highly appreciated.

Regards

Hi,

I can't find how to create a TabStrip dynamically with Kendo UI Mobile. I don't care if I have to create <li> with jQuery and then call kendoMobileTabStrip() :) But even that don't work, I'm not sur this function exists in fact.

Any advice?

Hi,

I'm having some trouble with styling the tabstrip. First, I have a simple tabstrip, with 2 buttons. The code is like this:

        <div data-role="footer" id="footer">
            <div data-role="tabstrip" id="badges-tabs">
                <a href="#destaques" data-icon="favorites" data-badge="0">Destaques</a>
                <a href="#ofertas" data-role="button" data-icon="cart" data-badge="0">Ofertas</a>
            </div> 
        </div>

Without any custom CSS, my tabstrip looks like this (please note I'm using flatUI as layout):

<tabstrip1.jpg>

How can I make the tabstrip display the 2 buttons with equal width, and make them fit the tabstrip container ?

I have to manually set dimensions but this is not good for a responsive design.

So I set a background color for the tabstrip, and a background color for the active state property. Also, I set the color to white. My tabstrip looks like this:

<tabstrip2.jpg>

You can see the active state button is a bit outside the tabstrip, and they are aligned on the center, together.

If I change my smartphone to landscape mode, this is what happens:

<tabstrip3.jpg>


I have another problem with CSS on the back button. I copied the back button code from one of the examples on the website:

<a data-role="backbutton" data-align="left" data-icon="back">Voltar</a>

But its not showing the back arrow along with the text. How can I display the back arrow on the back button?

Thanks for the help!

Hello,

I saw several related questions, but none of them have a working answer.

I have a tabstrip defined like this:

<div data-role="tabstrip" data-selected-index="1">
<a data-icon="home" href="/">Home</a>
<a data-icon="action" href="/ActionManager">Actions</a>
<a data-icon="search" href="/Search">Search</a>
</div>

I'm expecting "Actions" tab to be selected initially.  But it is not. "Home" tab is always selected no matter what number I put into data-selected-index. Looks like this attribute is ignored.

Is selectedIndex working in tabStrip?
Is there any other way to select tab from HTML markup?

Thank you,
Alex