iOS 7.0.x causing issues with the height of tabs being trimmed

Struggling to fix a nightmare of an issue with my app, so I'm reaching out for some help.

Everything is working fine on Android and iOS versions 7.1.x, 8, and 9. However, when installed on iOS 7.0.4, the bottom tabs are getting cut off. See below:

On all devices (except iOS 7.0.4), the tabs look like this (example image):

https://i.sstatic.net/wtnRY.jpg

But on iOS 7.0.4, it appears like this:

https://i.sstatic.net/ea0yj.jpg

I've come across references related to iOS 7 in CDVViewController.m and CDVStatusBar.m.

My question: Do I need to make changes to these files, or can this be resolved through CSS or something else?

PS: All iOS 7.0.4, 7.1.x, 8, and 9 are on the same iPhone model: 4S (A1387). The header remains consistent with no differences at the top, etc.

Any suggestions would be greatly appreciated!

Thank you in advance!

ioscssiphoneios7ionic-framework

Answer №1

Sharing my solution to a common problem:

I made changes to the following files: www/lib/ionic/js/ionic.js Commented out the line containing: 

viewportProperties.height = DEVICE_HEIGHT;

Lines edited were: 3890 (iPad section) 3817 (iPhone section)

Also, modified the file: www/lib/ionic/js/ionic.bundle.js On lines: 3897 (iPad section) 3924 (iPhone section)

Is this the ultimate fix? I'm not sure, but it resolved my issue.

UPDATE: To prevent bottom tabs from appearing while using the keyboard, utilize this helpful CSS:

.keyboard-open .tabs{
  display:none;
}

.keyboard-open .has-tabs{
  bottom:0;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is preventing the div container from extending to its full width?

The content on the right side of this div container is struggling to reach full width for some unknown reason. Click here to see an image of the issue. The right column is not extending to full width. This snippet shows my CSS code. The 'main-conte ...

htmlcsscontainersalignmentwidth

Can HTML and CSS be used to create button text that spans two lines with different fonts?

When working with HTML attribute values, I am facing an issue where I can't get button text to display in two lines with different font sizes. I have attempted using whitespace in CSS for word wrap, but this solution does not solve my problem. I also ...

htmlcss

Apply a red border to any form inputs that contain incorrect information when the submit

How can I add red borders to my form inputs only when they are invalid after submission, without displaying the red borders from the start? Currently, I am using the input:invalid selectors in CSS, but this causes the red borders to appear immediately. I ...

htmlcssformsvue.jsvalidation

After applying the cellClass in ng-grid, the row border mysteriously disappears

After applying cellClass to color an entire column, the row border disappears. Here is a link to the Plunker demonstration: http://plnkr.co/edit/4IeQQBTIe8sgHVEBUTAp?p=preview. Does anyone have a solution for this issue? ...

javascriptcssangularjsrowng-grid

What is the best way to align the main navigation at the center of

Even though I have utilized text-align: center, the style of .main-nav did not change. What is the most effective way to center this navigation menu? /***** Navigation *****/ .main-nav { font-family: 'Lato', Helvetica, Arial, sans-serif; f ...

css

Images obscure dropdown menu

The issue I am experiencing with my blog is that the dropdown menu is appearing behind the image slider on the main page. You can see it here: Can anyone offer guidance on how to prevent this from happening so that the dropdown menu is not obscured? Just ...

javascriptcsswebblogger

Position a div in the center of the page horizontally

Can someone help me with aligning the #main div in the center of the page? I have this code snippet: <div id="main" style=" margin:0 auto; "> <div style="float: left"> <a style="display: block" href="#"><img src="test.gif" ...

htmlcssalignment

Customizable page layout with fixed width that adjusts based on content

I am looking to enhance the design of my website by updating its template. I want the content to be displayed within a fixed width centered div. While there are plenty of examples on the web for this, I want to ensure that existing text and tables in my ...

csshtml

How to arrange three buttons in a row using CSS styling

After reviewing similar issues posted by others, I have not found a solution to my problem. Despite trying the suggested solutions, I am unable to center two buttons representing different departments on my webpage. Here is my source code: <script ...

javascriptjqueryhtmlcss

Issue with text input field causing the Enter key to not create a new line

In the example above, the text is placed in the middle of the text area. Here is the CSS code : .form-control { height: 300px; display: block; width: 100%; padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-heig ...

javascriptcssreactjs

Transitioning between iOS apps using a custom URL scheme is significantly delayed

Exploring inter-app communication with this test scenario. App A -(1)-> App B -(2)-> App A The transition (1) takes more than 10 seconds. However, (2) is quick. App B, a nearly empty app, handles URLs from App A and utilizes openURL to return to App ...

iosiphoneswift

What is the best way to transform a data dictionary into an array in Swift programming language?

When retrieving data from Firebase, I receive it back as a dictionary of dictionaries: guard let data = snapshot.value as? [String: [String:Int]] else { I need to extract the first key if the data looks like this: "café-veritas": ["AmpleSeating": 1, ...

iosarraysswiftdictionarymapping

What is the method to modify the color of the final letter within an element?

Is it possible to make the last letter of a word appear red using CSS? <asp:Label ID="QuestionText" runat="server" CssClass="asterisk"></asp:Label> .asterisk:after { color: Red; content: " *"; } The challenge arises from the fact tha ...

csspseudo-element

Ways of incorporating text in a parallelogram shape

Here is the HTML code with ID attributes applied to both divs: <div id="herotext"> <div id="banner"></div> <h1 id="maintitle">Hey, I'm Charlie</h1> <p>This websi ...

htmlcss

When working with styled components, how can I effectively apply different styles using two layers of class names within the component declaration?

In my next.js project, I have developed a Container component with specific styles. As I incorporate this container component throughout the site, I aim to assign it a className for context-based styling. Illustrated below is an example of the Container c ...

cssreactjsnext.jsstyles

"Triggering CSS changes with the click of a

I am developing a basic calendar application in PHP and I would like to dynamically change the style of the <td> block based on user interactions. Specifically, I want to implement a behavior where once the "menuclick" class is active, the other cl ...

phpjavascripthtmlcssclass

The alignment of the Unicode character is off and is not centered within the button

Upon implementing a unicode character as a button, I've observed that the alignment of the character is not centered properly (both horizontally and vertically) within the button. It's puzzling why this misalignment occurs even after setting padd ...

htmlcssunicode

Tips for adding jQuery UI styling to elements generated dynamically

I have a challenge with generating text fields using jquery while applying jquery ui styling to the form. The issue is that the dynamically created elements do not inherit the css styles from jquery ui: let index = 0; $('#btn_generate').on(& ...

jquerycssjquery-ui

Is there a way to showcase an HTML body in the Gmail app on iOS?

I am facing a challenge while trying to incorporate HTML formatting in the body of an email shared through Gmail using UIActivityViewController on iOS. Despite my efforts, the Gmail application fails to render the HTML content properly and only displays pl ...

htmliosobjective-cgmailuiactivityviewcontroller

Using Bootstrap to Position DIVs at the Top, Middle, and Bottom

I'm looking to create a layout with three DIVs inside a container DIV, all centered horizontally. The first DIV should be aligned at the top of the container, the second in the vertical center, and the third at the bottom. While I found some helpful t ...

htmlcsstwitter-bootstraptwitter-bootstrap-3