ionicModal | Not full screen ion-header-bar behave differently


#1

Hi everyone!

First of all, sorry for the badly put title of this topic. I didn’t know what to title it as so I’ll leave it as it is.

Anyway, the problem I’m facing is that I’m trying to use ionicModal to do something like this. ( refer to image below )

As you can see, the ionicModal is sitting right at the bottom where it is suppose to be. However, on mobile it looks abit like this ( refer to image below )

In mobile, the ion-header-bar seems a little bit more stretched compared to desktop view. Why is this happening? I wish to get some help on this.

Here’s my template file for this page.

<div class="modal add-to-group">
<ion-header-bar class="bar-energized">
  	<h1 class="title title-left">Add To Group</h1>
  	<div class="buttons">
		<button class="button button-clear" ng-click="modal.hide()">Close <span class="icon ion-chevron-down"></span></button>
	</div>
</ion-header-bar>
<ion-content has-header="true" scroll="false">
    <div id="edit-group">
		<div class="profile row">
			<img src="{{searchResult.image}}" class="col"/>
			<h4 class="col">{{searchResult.name}}</h4>
			<button class="col button button-icon"><i class="icon ion-ios7-plus-outline"></i></button>
		</div>
	</div>
</ion-content>

and my css

#edit-group .profile {
background: #fff;
padding:10px;
}
#edit-group .profile > img.col { flex:0 0 50px; -webkit-flex:0 0 50px; height:50px; padding:0; }
#edit-group .profile > h4.col { margin:0; line-height:50px; max-height:50px; padding:0 7px; }
#edit-group .profile > button.col { flex:0 0 50px; -webkit-flex:0 0 50px; height:50px; padding:0; }
.title-left { text-align:left; }
.modal.add-to-group { height:114px; top:auto; bottom:0; min-height:0; }

Any help would be greatly appreciated.

Thank you & God bless.


#2

I guess it’s only happening on iOS. If that’s the case the bar has a specific height.

The highlighted line shows $bar-height + $ios-statusbar-height. The last variable is 20px. So… you should override it. Add a new class and put !important if it doesn’t work.

<ion-header-bar class="bar-energized bar-modal-group">
</ion-header>

SCSS

 @import 'path/to/_variable.scss';

 .bar.bar-header.bar-modal-group
 {
    height: $bar-height !important;
 }

Just in case, the directive adds a bar & bar-header class.


#3

Hi Jose,

I’ll give this a go.

Have a feeling it’s gonna work though.

Thanks alot! C:


#4

So I’ve found a solution and I’m gonna leave it here in case someone ever runs into the same trouble I did.

Like @joseadrian mentioned, it was due to the added height pixels of the iOS statusbar (20pixels)

Therefore, here is my solution to the problem.

My updated css file is as shown below:

.modal.add-to-group .bar.bar-header { height:44px !important; }
.modal.add-to-group .bar.bar-header > * { margin-top:0 !important; }
.modal.add-to-group .has-header { top:44px !important; }

Be careful not to overwrite all the other modals though. Just use a class name like how I did :smiley:

Thanks again @joseadrian !


#5

I am having a similar issue but with the top of a modal. I tried @xavianaxw’s solution but it didn’t work for me. Tried recreating the look with css in the web view but couldn’t figure it out.

The shift down on the modal also moves the cursor up on the input label.