Left nav-buttons causes the title to have 20px left spacing

ionic-v1
1

I may have found a bug
When I have , then the always gets a 20px left spacing (style=“left:20px”) after a tab change.
does not contain buttons, but a -not always visible- searchbox which overlays the title.

The code looks like this:

[code] 







<ion-nav-title><span ng-if="!search.show" translate>Horses</span></ion-nav-title>

[/code]

If this isn’t a bug, I would like to know how I can solve it. Currently I’m using this workaround:

[code]$scope.$on(’$stateChangeSuccess’, function(event, toState){
//fix bug in title margin when using ‘left’ buttons searchbar in header
var title = angular.element(document.getElementsByClassName(“title”));
if(toState.name == ‘tab.horses’)
title.addClass(‘fixTitleMargin’);
else
title.removeClass(‘fixTitleMargin’);

});[/code]
But it’s not ideal since the timing is never right and you see some flickering

2

I solved it by forcing 0px width on buttons-left. The spacing gets calculated correctly now.

3

I’m running into the same problem. Can you explain what you mean by forcing 0px?

4

I think I just did something in the CSS like this:
.buttons-left {
width: 0px !important;
}

5

thanks but that didn’t fix the issue for me. I’ll post a solution if I find one but it seems that when switching between tabs, the header w/o any left buttons somehow gets the “buttons-left” div anyway (though it’s empty) and this div causes the extra space (deleting it removes the space).