Friday, 2 November 2018

Ionic3 - Proper Way To Style Headers

We have an Ionic 3 project where we made large modifications to the default header styling. Each ion-header element is assigned a class "big-header" that updates color, button layout, and header height. The styling is applied in the app.scss file.

The updates to the header styling appear to have a significant impact on performance. It also looks like the styling may be applied after the view loads. There is a brief "hiccup" where the old, default height is used.

Is there a "proper" way to modify the header that is a little more resource friendly?


For reference, here is the CSS being applied:

/* Header Overwrite */
ion-header.big-header {
    border-bottom: none !important;
    /*box-shadow: 0px 4px 17px rgba(0,0,0,0.30);*/
    .bar-buttons-md[end] {
        float:right;
        padding-top:4px;
        padding-right:4px;
    }
    ion-navbar.toolbar {
        display:block;
    }
    ion-buttons, .bar-button-menutoggle {
        display:inline-block;
        width:50%;
        margin:0px;
    }
    .toolbar-title-md {
        font-size:36px !important;
        padding-top:16px !important;
        font-weight:normal !important;
        overflow:visible !important;
    }
    .toolbar-md {
        min-height: 112px;
        .toolbar-background {
            background-color: #019ae8 !important;
            background: #019ae8 !important;
        }
        ion-icon {
            display:block;
        }
        ion-icon:before {
            color: #FFFFFF !important;
        }
        .bar-button-menutoggle {
            padding-top:12px;
            padding-left:12px;
            text-align:left !important;
            .button-inner {
                display:block;
            }
        }
    }
    .header-note {
        position: absolute;
        bottom: 0px;
        margin: 0px;
        font-size: 10px;
        width: 100%;
        text-align: right;
        padding-bottom: 5px;
        padding-right: 8px;
        color: white;
    }
    .big-header-descriptor {
        display:none;
        position: absolute;
        top: 2px;
        font-size: 14px;
        text-transform:uppercase;
    }
}


from Ionic3 - Proper Way To Style Headers

No comments:

Post a Comment