Issue with the height of nested divs within ion-col not being rendered properly on iOS devices

I am currently using Ionic 2 for my project.

Presented below is the template I have:

HTML Code

<ion-grid>
   <ion-row>
     <ion-col width-20>
         <div>
             <img src="http://www.kacholy.com/new_site/pic/image_7276.jpg">
        </div>
     </ion-col>
     <ion-col class="secondaryPic" width-20>
         <div class="placeHolder"></div>
     </ion-col>
     <ion-col class="secondaryPic" width-20>
         <div class="placeHolder"></div>
     </ion-col>
  </ion-row>
</ion-grid>

CSS Styles

.placeHolder{
        width: 100%;
        height: 97%;
        border: 2px solid deeppink
    }

When viewed in Chrome, all looks good and works well:

However, when viewed in Safari or on an IOS device, there is an issue where the stretching of the div within ion-col is not extending to full height. Upon inspection, it seems that ion-col is taking the height of the image nearby.

Any suggestions for a solution?

htmlioscssionic2

Answer №1

In my personal experience, I have implemented this solution to address the issue

ion-grid,
ion-row,
ion-col {
   height: 100%;
}

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 the best way to position elements in a horizontal line?

I am trying to align three elements (DIVs) horizontally using Bootstrap's guidelines, but it doesn't seem to be working. This is the desired layout: https://i.sstatic.net/7lPKU.png However, this is what it currently looks like, aligned to the ...

htmlcssbootstrap-4

What are alternative ways to add an HTML snippet to an existing file without relying on jQuery?

Is it possible to inject the entire content of an HTML file, including all tags, into a specific div using only JavaScript? Alternatively, would it be necessary to append each element individually and create a function for this purpose? ...

javascripthtml

Adjustable dimensions for a collection of squares based on screen size

I am currently designing a grid composed of 1:1 squares and allowing the user to continually add more squares. My main goal is to ensure that the size of each square maintains its aspect ratio while being able to resize accordingly. The challenge lies in k ...

javascripthtmlcss

Encountering a persistent GET error in the console while working on a project involving a cocktail API

Programming: const API_URL = "www.mycocktaildb.com/api/json/v1/1/search.php?s="; const $cocktailName = $('#cocktailName'); const $instructions = $('instructions'); const $form = $('form'); const $input = $(`inpu ...

javascripthtmljquery

What is the process for modifying two IDs simultaneously?

I'm struggling to include more than one ID in my CSS. I want the box border to have four different hover effects and three gradient buttons (e.g., play, pictures, etc.). Here is my HTML: <h2><a id="hover-1" href="">Hov ...

htmlcss

Tips for creating line breaks in Google Chart tooltips

I'm having trouble breaking a line in the code snippet below. Here is the complete code: <html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script ...

javascripthtml

Can I create a div with a rounded right side?

Is there a way to give a div a slightly rounded right side using CSS? If so, can you show me how in this fiddle template: http://jsfiddle.net/z2hejemu/ HTML <div class="rounded-side"> <p>By default, this div is rectangular. I would like t ...

htmlcss

Implementing JavaScript to assign a symbol to several <span> elements with identical ids

I have a looping span element on my page that is generated based on the number of records in a database table. The appearance of the span can vary, displaying either one or multiple instances. Each span has the following structure: <span class="add-on" ...

javascriptjqueryhtmlcss

Tips for displaying HTML5 validation messages when the input is changed

I am working on a form where I prefer not to submit it directly, as I am making an AJAX call instead. However, I still want the HTML5 validation messages to show up when an input field is left empty. I have managed to display the validation message when a ...

javascriptjqueryhtmlvalidation

I am experiencing issues with a few of my design choices not functioning correctly

I am facing issues with some of my styles. I have put in a lot of effort, but there seems to be a problem with my menu. The last part of my CSS is not functioning correctly. When hovering over the menu content, I want it to turn black and... #site_menu { ...

htmlcss

Is it possible to filter an array of data using a dropdown in Angular without using a pipe?

I am facing an issue with filtering data based on the selected dropdown item. Currently, it only filters the data once when I select a filter, and after that, it always returns an empty result. Here is an example of the code: <select class="select" (c ...

javascripthtmlangulardrop-down-menu

Retrieve the outer-HTML of an element when it is clicked

I am working on a project to develop a tool for locating xpath, and I am seeking the most efficient and user-friendly method for allowing the user to select the desired element on a webpage. Ideally, this selection should be made with just a single click, ...

javascriptpythonhtmlseleniumxpath

CSS animation is activated solely upon its initial creation

Exploring the world of Vuejs for the first time with my debut project. The core of my project lies in the main component where I have an array as a data variable. Here's an example snippet: export default { name: 'example-component', ...

javascriptcssvue.jscss-animationsvuejs2

What are some ways I can ensure my webpage remains consistent and user-friendly when scrolling, rather than appearing distorted and jumbled?

Is there a way to automatically scroll my page when the window is at a small height, instead of adjusting it to the height by squeezing it? I've tried using overflow in different ways, but haven't been successful in getting the entire page to scr ...

css

A guide on accessing the href attribute of an HTML tag using jQuery

My goal is to extract the ID from the href attribute of an a tag on my webpage. First, I need to prevent the page from refreshing before performing this task. The example a tags look like this: '<a href="/ArtPlaces/Delete/5">Delete</a>&ap ...

jqueryhtml

Exploring AngularJS: Retrieving a list of filenames from a specified directory

In the public directory of my application, there is a folder named 'x'. I have the path name to the folder (/path/to/dir/x) but I am unsure of the names of the files within it. How can I retrieve the file names and provide URL links to them in an ...

javascriptjqueryhtmlangularjsmeanjs

The spacing issue for Bootstrap-5 justify-content is causing elements to not have any space in between

My goal is to separate 3 images with space around or space between based on my preference. However, the images seem to remain clustered together in the middle instead of being spread out with justify-content-around. I attempted adjusting the width of the ...

htmlbootstrap-5justify

Tips for choosing multiple values from a dropdown menu in Bootstrap CSS version 3

I'm looking to implement a way to select multiple values from a dropdown menu without using the CTRL key. Currently, I am utilizing Bootstrap CSS for styling. Here is the code for my dropdown: <select multiple class="dropdown-menu"> ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the significance of the space between form.validate and .ng-invalid-email.ng-dirty?

I'm currently working on an AngularJS application and I'm confused about the spacing between "form.validate" and ".ng-invalid-email.ng-dirty" in the stylesheet code below: <style> form.validate .ng-invalid-required.ng-dirty {background ...

cssangularjs

Tips for determining the number of columns in a multi-column web layout using webkit

Having some static HTML content that needs to be formatted using multiple columns, which are presented as pages to the user. The method used is quite simple: bodyID = document.getElementsByTagName('body')[0]; bodyID.style.width = desiredWidth; t ...

javascripthtmlwebkitcssmultiple-columns