Ionic weird spacing

问题

When I use the following code to display a header, the title gets a weird left/right styling.

Anybody knows what's wrong with it? Thanks!

<ion-header-bar>
    <h1 class="title">BLE Demo</h1>
    <button class="button button-positive">
        {{connectStatus == false ? "Connect" : "Disconnect" }}
    </button>
</ion-header-bar>

If I change the line {{connectStatus == false ? "Connect" : "Disconnect" }} to {{connectStatus}}, then the styling disappears.

Update: Check this example code made by @Microsmsm: http://codepen.io/Microsmsm/pen/ZQZyVp

回答1:

You can use the code as that. You change

{{connectStatus == false ? "Connect" : "Disconnect" }}

to

{{connectStatus == true ? "Connect" : "Disconnect" }}

to get your effect done

回答2:

I solved the problem by following a standard blank template. Using ion-nav-bar, and not specifying the h1 element myself.

Apparently ionic tries to center the title by adding a left/right styling to the element depending on how wide are the other elements(the button in this example) to the left/right. But the way of calculation is pretty weird, not depending on how much content is actually being displayed, but how long the template script is.

So in this case {{connectStatus == false ? "Connect" : "Disconnect" }} is much longer than {{connectStatus}}, and ionic gives 333px to the left and right for the former, and 124px to the later. Even if the amount of text being displayed are not much different.

Not sure if there's a way to fix this problem as it is. I'll stick with ion-nav-bar for the time being.

来源：https://stackoverflow.com/questions/35456600/ionic-weird-spacing