oderfla oderfla - 2 months ago 14
CSS Question

Image size in ion-header-bar higher than bar itself

I have this html:

<ion-header-bar align-title="center">
<div class="back_btn_container">
&nbsp;
</div>
<div class="logo_container">
<div style="text-align: right">
&nbsp;<img ng-src="img/newlogo2.png" />
</div>
</div>
</ion-header-bar>


And this css:

.back_btn_container{
width:20%;
padding-top: 10px;
}
.logo_container{
width:80%;
}


newlogo2.png is 200X45px.

When looking at the app in chrome dev tools and Iphone 5, the logo image is goes outside the boundaries of the bar. Which means: not all the logo is visible.
I don't really understand why. Shouldn't ionic.css take care of making the image not to go outside the boundaries?
This is what I hoped. Or maybe there is something else I missing here?

----EDIT-----

Please have a look at the attached image.viewing app in chrome developer tools

---EDIT 2---

Here is all the html (only the header part):

<ion-header-bar align-title="center" class="header_bar_logged_in bar bar-header">
<div class="back_btn_container">
&nbsp;
</div>
<div class="logo_container">
<div style="text-align: right">
&nbsp;<img ng-src="img/newlogo2.png" src="img/newlogo2.png">
</div>
</div>
</ion-header-bar>


And here the css relevant for the html elements:

.header_bar_logged_in {
background-color: blue !important;
}
.bar {
background-image: none !important;
background-color: transparent !important;
}
.bar-header {
top: 0;
border-top-width: 0;
border-bottom-width: 1px;
}
@media not all, (-webkit-min-device-pixel-ratio: 1.5), not all, (min-resolution: 144dpi), (min-resolution: 1.5dppx)
.bar {
border: none;
background-image: linear-gradient(0deg, #ddd, #ddd 50%, transparent 50%);
background-position: bottom;
background-size: 100% 1px;
background-repeat: no-repeat;
}
.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;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
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;
background-size: 0;
}
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.back_btn_container {
width: 20%;
padding-top: 10px;
}
.logo_container {
width: 80%;
}
@media (max-width: 991px)
.logo_container img {
width: 100%;
height: 100%;
}
img {
-webkit-user-drag: none;
}

Answer

Pay attention at yours bar CSS style, the class of your ion-header-bar. Its height equals 44px (and your image has got 45px), it also has got padding defined (which is equal to 5px).

Try to remove height property, div should automatically fit to its content.