signalpoint / DrupalGap

An application development kit for Drupal websites.
https://www.drupalgap.org
GNU General Public License v2.0
232 stars 185 forks source link

iOS 11 Safe Zone Issues #1014

Open tennist opened 6 years ago

tennist commented 6 years ago

I have noticed that the menu, home, and account buttons in the header are partially behind the swipedown area for the notification center on the new iOS 11 versions. Right now the buttons are so small that you have to click the very bottom of the button in order to open the main menu. The only way I can see to fix this is to increase the header height and button sizes so that more of the button is out of this area. I cannot find a good way of changing the button size however. Can you please direct me where I can change theses sizes via JS or CSS. The button height and width needs to be increase by about 10px-20px

signalpoint commented 6 years ago

@tennist Will you please provide a screen shot of the issue? Thank you.

tennist commented 6 years ago

20180309_062722000_ios

signalpoint commented 6 years ago

@tennist Is this plugin of use here? https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-statusbar/

I use that on all my iOS projects to keep the status bar from overlapping the DrupalGap app.

tennist commented 6 years ago

I have that installed. It made it so the status bar doesn't overlap, but it doesnt solve the issue for the pull down notification center that iOS has. The top 30 or so pixels on the iOS screens are reserved for pulling down the notification center. This overlaps the default header in drupalgap even with the statusbar plugin installed. I cannot find the css for the header and menu bottons in the drupalgap code however. I would like to increase the header approximately 10px maybe more and also increase the button sizes by 10px in each direction.

tennist commented 5 years ago

@signalpoint the updated statusbar plugin fixed this issue, however, i do have another css question.

I want to change position of the pop-up list after clicking a pop-up menu button. Can you direct me towards the css to do this. Is there a class assigned to these lists?