Ion-content doesn't display correctly



I have a page that displays data in a tile view. The code has a header, and then uses an array of data to create a tile with data for each item in the array. This is all good if there are enough items that there is more than 1 row of tiles. However, if there are a smaller number of tiles such that they fill 1 row or less, the tiles are not shown correctly.

Here’s how it’s supposed to look:

And here’s how it displays if there are a fewer number of items:

It is a problem on Chrome & Firefox browsers, as well as on Android tablets, but not on the iPad device. It looks like about 60px are missing off the top. Interestingly, if I remove the header code, the same problem exists- the tiles are shown at the very top, about the top 60px are missing.

Here is a stripped down version of the code:

    <ion-header-bar align-title="center" class="bar-header bar-positive header-no-bottom-line tablet-header">
       .....header has buttons & title...

<ion-content class="tablet-center-content" has-bouncing="false">
    <div class="list tile-container wrap tablet-list-row" >
        <a class="item tile" ng-repeat="learner in learners | orderBy:'firstName' track by"
      ....bits and pieces to deal with border colors & clicking ....
       ...various divs for different lines of data for this item...

and the “tile” .css:

.tile {
  a { margin: 0; display: block; width: 100%; height: 100%; }
  color: $dark;
   position: relative;
  width: 150px;
  height: 125px;
  padding: 5px;
  margin: 8px;
  transition: all .15s ease-in-out;
   color: #4c4c4c;
...then some code to handle border colors....

I’m curious if anyone else has seen something like this and if so what was your workaround? Or, is there another way you might suggest to do a “tile” view?

I saw various posts about ion-content not showing if the ion-header-bar directive wasn’t used, or items not showing if the ion-content directive wasn’t used. But I’m using both, plus removing the header altogether gives the same result. Is it a clue that it’s not a problem on iOS?

Any thoughts or suggestions welcome.




Could you put together a codepen example of this? It’s really hard to help without seeing the problem and I can’t recreate it with the code given.


Hi, thanks for your response. I will make a barebones codepen and post it, thanks.


FYI, I traced this to a problem w/ my CSS. I had a couple lines

display: flex;
align-items: center;

that didn’t want to play nicely w/ the tiles. They were unneeded anyway so I took them out & all is good.