Ion-content doesn't display correctly


#1

Hello,

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-view>
    <ion-header-bar align-title="center" class="bar-header bar-positive header-no-bottom-line tablet-header">
       .....header has buttons & title...
    </ion-header-bar>

<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 learner.id"
      ....bits and pieces to deal with border colors & clicking ....
       ...various divs for different lines of data for this item...
        </a>
    </div>
</ion-content>

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.

TIA,

–Chi-An


#2

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.


#3

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


#4

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.