Back button text on Android overlaps back button

[dcsan]

I see this a lot when navigating through an app where the text for back label will overlap the arrow:

is there a workaround for this / known issue?

[nickw]

Ive seen that on Android from time to time, not sure what is causing it yet though. Here's a good place to look: https://github.com/meteoric/meteor-ionic/blob/master/components/ionHeaderBar/ionHeaderBar.js#L20

[bwhitty]

I've seen this on Android 5.x as well.

[dcsan]

i'm just seeing it in chrome when emulating. but i see it most of the time.

[ghost]

positionTitle: function () {
    var $title = this.$('.title');
    var $leftButton = $('.button.pull-left');

$leftButton always returned null (length=0), that's why the margin for $title is set to 0 and overlaps the back button, any idea why it's null?

[dcsan]

I imagine this is a meteoric thing rather than ionic. it does happen 100% of the time for me tho

android device:

switch to an apple device and no problem

toggling emulation back to an android device, the problem immediately reappears

disable emulation, and no problem

[dcsan]

digging around this a bit

  +ionNavBackButton(path="home" text='home')

should use this:

<template name="ionNavBackButton">
  <button class="{{classes}}">
    {{> ionIcon icon=icon}}
    {{#unless isAndroid}}
      <span class="back-text">
        {{text}}
      </span>
    {{/unless}}
  </button>
</template>

where <span class="back-text">

OK i

.nav-bar-transition-android {

  .title,
  .button,
  .back-text {

the last line is what's missing

however it seems with sass i can't work on a symlinked version of a fork of the repo.

=> Errors prevented startup:

While building the application: /Users/dc/dev/shumi/chatu/app/client/layouts/ionic/app.scss:12:9: Scss compiler error: file to import not found or unreadable: .meteor/local/build/programs/server/assets/packages/meteoric_ionic-sass/_ionic Current dir: /Users/dc/dev/shumi/chatu/app/client/layouts/ionic/

=> Your application has errors. Waiting for file change. ^C

[dcsan]

this is cos the app has this in it:

@import '.meteor/local/build/programs/server/assets/packages/meteoric_ionic-sass/_ionic'; @import '.meteor/local/build/programs/server/assets/packages/meteoric_ionicons-sass/_ionicons';

I assume this is the right way to do it, i think i found those lines in one of the demo apps. it seems very weird/fragile, in that the CSS paths are hardwired into the app itself, and not somehow inside the package.

[nickw]

@dcsan see the note under Installation in the ionic-sass README: https://github.com/meteoric/ionic-sass#installation. This is a limitation of fourseven:scss and Meteor in general.

[dcsan]

so it seems its the title bar

    <h1 class="title title-entering title-left title-active" style="left: 15px; right: 15px;">lost</h1>

on

IonHeaderBar = {
  alignTitle: function () {
    var align = this.alignTitle || 'center';
    var $title = this.$('.title');

    // if (Platform.isAndroid() && !this.alignTitle) {
    //   $title.addClass('title-left');
    //   return;
    // }

if i take out android specific code there, we always get a centered title, which is better than the crunched up one. maybe this.alignTitle is not getting set somewhere?

[dcsan]

before:

after