Weird alignment of post title only for the first load on android

ionic-v1
1

Hi Friends,

I am very new to Ionic and angular. you can say pretty new to the mobile app :frowning:

What I am currently trying to achieve is get the post from wordpress and show it in the app (wordpress backend site)

Problem I am facing here is on my home page I am showing last 5 recent recipes, 1 at the top and 4 as gallery view with Post title on top of the image.

My first load of the app on Android device always shows 2nd image and 4th image post title on top of the image (tender coconut and vegetable dhokla) where as 1st and 3rd image has its title as expected. this is only for the first time app is launched, next time onwards this weirdness is not observed. this is the screenshot how the title is showing for the first time.

When i run ionic serve and check in chrome I am unable to replicate this, this is only after i create the apk file and launch on the android device for the first time.

image
Screenshot_2015-06-06-16-41-34.png720×1280 727 KB

I have no idea what is wrong with my code :frowning: , I am struggling to get this thing correct from last two days.

If you are interested to solve this issue and look at my app please find the zip file here. Files you might be interested to look at is /templates/home.html
/css/style.css

Please do not laugh at my code , currently the app is written very poorly and i know it. I am yet to learn the best techniques of writing code. i have gone completely against the DRY concept because my app pages are almost copy paste of same pages with minimal changes.

2

If someone can guide where might be the problem that will be really helpful

3

Would you be able to create a codepen demo of what you’re using for css and markup?

4

Hi Bro,

I thought there might be some problem with my code so i wrote the entire code once again seeing some other tutorial, now this time issue is same but in little different way. I guess my problem is view is shown before it gets render the image properly/fully. in chrome it works perfect , problem is on android app :frowning:

I know you like to see the code on codepen but i tried hard but i couldn’t put working code on codepen.
I have tried to put what best i could do, then i thought better i Put the raw code itself

In case you get some 5 - 10 minutes please look at this below and if you think the issue can be resolved please help me

it has HTML of my home page
CSS required to render
under javascript 1 controller and 1 service

I am sure your 5 minutes of observation will save my hours of work which i am going spend further to rectify this misalignment

First look on android
http://imgur.com/cPMatkC,hkyUK6h#0
Second time onwards its fine
http://imgur.com/cPMatkC,hkyUK6h#1