CODEWITHSUNDEEP
ioscssionic-framework
TheJediCowboy
TheJediCowboy

Reputation: 9222

Ionic CSS Styling Off when Deployed to iOS but fine everywhere else

So when I am looking at my app on android phones and in the browser, the header (and sub header) looks like the following

enter image description here

When I am running on iOS emulator, or deploying to iOS phone, it looks like the following:

enter image description here

The markup looks like the following

        <ion-header-bar class="bar item-input-inset search">
                <div class="buttons buttons-left header-item">
                    <span class="left-buttons">
                  <button class="button button-icon button-clear ion-navicon" ng-click="showMenu()">
                  </button>
                </span>
                </div>
                    <label class="item-input-wrapper search">
                        <input placeholder="Search..." ng-model="model.searchTerm" ng-change="updateSearchTerm(model.searchTerm,model.quickSearchType)" type="text">
                    </label>
                    <button class="button button-clear" ng-click="clearSearch()">
                    <i class="icon" ng-class="{'ion-close':model.searchTerm.length > 0}"></i>
                  </button>
         </ion-header-bar>
         <ion-header-bar class="bar bar-sub-header item-input-inset action-sub-header">
             <button ng-style="model.quickSearchType == 'featured' && {'font-weight': 'bold'}"
                             style="color:#fff;"
                             class="button button-clear col col-33"
                             ng-click="quickSearch('featured',model.searchTerm)">
                 FEATURED
             </button>
             <button class="button button-clear col col-33"
                             ng-style="model.quickSearchType == 'nearby' && {'font-weight': 'bold'}"
                             style="color:#fff;"
                             ng-click="quickSearch('nearby',model.searchTerm)">
                 NEARBY
             </button>
                 <button class="button button-clear col col-33"
                             style="color:#fff;"
                             ng-style="model.quickSearchType == 'recent' && {'font-weight': 'bold'}"
                             ng-click="quickSearch('recent',model.searchTerm)">
                     RECENT
                 </button>
         </ion-header-bar>

The CSS I have is the following:

.action-sub-header {
   background-color: #007fff;
}

.item-input-inset {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -moz-align-items: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        padding: 10.66667px;
    }


    .bar-header {
        top: 0;
        border-top-width: 0;
        border-bottom-width: 1px;
    }

    .bar {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: absolute;
    right: 0;
    left: 0;
    z-index: 9;
    box-sizing: border-box;
    padding: 5px;
    width: 100%;
    height: 44px;
    border-width: 0;
    border-style: solid;
    border-top: 1px solid transparent;
    border-bottom: 1px solid #ddd;
    background-color: white;
    /* border-width: 1px will actually create 2 device pixels on retina; */
    background-size: 0;
}

Upvotes: 0

Views: 2725

Answers (2)

happenzh
happenzh

Reputation: 11

You need to add ionic.Platform.fullScreen(); to your $ionicPlatform.ready function.

Upvotes: 1

Mitch
Mitch

Reputation: 581

The ion-header-bar has a specific css on ios to add space on top of it for the iOS statusbar. You have to override it in your case.

To test the ios specific css in your browser, edit the classes on the body tag. Replace platform-browser by platform-ios and platform-macintel or platform-windows by paltform-cordova.

When you have do that, you'll be able to see the specific style applied by the ionic css:

.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) > * {
    margin-top: 20px;
}

You just need to override it.

Upvotes: 1

Related Questions