Hisoft
July 20, 2015, 3:06am
1
I use ionic-header, on android device, header be trim and replace by 3 dots. On iOS, this issue isn’t occurring.
HTML
<ion-header-bar class="navbar">
<h2>EDIT BUSINESS</h2>
</ion-header-bar>
CSS
.navbar h2 {
text-align: center;
font-size: 17px;
padding-top: 12px;
line-height: 17px;;
max-width: 69%;
text-overflow: ellipsis;
overflow: hidden;
display: block;
white-space: nowrap;
margin: 0 auto;
}
This header is not trimmed
Your Android phone is apparently less wide than iOS.
Use this CSS to override that feature:
.bar .title {
text-overflow: clip !important;
}
Example: http://plnkr.co/edit/98yTBB?p=preview
1 Like
Hisoft
July 20, 2015, 8:13am
3
I use Galaxy s3 and iPhone 4 to test.
My android device is apparently larger than iPhone 5.
This issue occurs with some header short text.
( Header long text if auto trim and replace by three dots )
This problem is more related to screen width resolution than with actual screen width size.
Still it doesn’t matter, previously posted CSS will help you with this problem.
Hisoft
July 21, 2015, 2:34am
5
I think the issue due max-width: 69%