header vertical alignment issues on iOS

[John]

I'm trying to use the header of a shared layout for navigation; the view title for the current view, and left and right side links for other views at the same level of the navigation hierarchy.  This works functionally, but the vertical alignment is wrong; the view title is noticeably higher than the left and right links (see attachment).

Here is my layout:

  <!-- Motors Home section -->
  <div data-role="layout" data-id="motors-home-layout">
    <header data-role="header">
      <div data-role="navbar">
          <a data-align="left" data-role="button" class="nav-button" href="#settings-units">Settings</a>
          <span data-role="view-title"></span>
          <a data-align="right" data-role="button" class="nav-button" href="#rockets-home">Rockets</a>
      </div>
    </header>
    <footer data-role="footer">
      <div data-role="tabstrip">
        <a data-role="button" data-icon="favorites" href="#motors-favorites">Favorites</a>
        <a data-role="button" data-icon="recents" href="#motors-recents">Recent</a>
        <a data-role="button" data-icon="search" href="#motors-search">Search</a>
      </div>
    </footer>
  </div>

[Petyo]

Hello John,

It looks like the ticket is regarding the Kendo UI mobile components, so I am moving it to the correct forum. Your remark is correct, and I have logged it in our github repo - we will address it as soon as possible.


Regards,
Petyo
Telerik

 

 

[John]

The ticket is marked as fixed, but is not in fact fixed.  I just downloaded 2014.3.1411 and the problem still occurs.  Note that it is fixed in Chrome, but not in the iOS simulator.

If it's a simple style change, can you please give me the CSS change so that I can add it explicitly?

[John]

I took a look into the commit, and it appears that you need 2px of adjustment to make this work properly in the iOS simulator. Note that makes the header misaligned low in Chrome, so that's probably not a reliable way to test mobile styling.

.km-ios7 .km-view-title {
  margin-top: 2px;
  margin-bottom: -2px;
}

[Iliana Dyankova]

Hi John,

I will make some additional tests and will write you back in the following days. Please accept my apologies for the inconvenience caused.

Regards,
Iliana Nikolova
Telerik

 

 

[Iliana Dyankova]

Hi John,

We have managed to address the issue - a fix will be available in Kendo UI Q1 2015 official release (which is expected next week).

Regards,
Iliana Nikolova
Telerik