Forum | Appery.io

Hi,

My IONIC app uses a list to display around 800+ items for the user to tap and select.

When the screen is drawn, the list items visibile in the DIV are displayed correctly, however, when the user scrolls the list up to see more, the text is not displayed (ie the list entry is just blank) until the user taps on the list entry and then the text is displayed,

This happens both in the Appery tester and the compiled IOS app on the phone itself.

Can you assist please as this is now stopping publishing to the app store.

thanks

Andy

So this seems like a bug,

I've found the offending entries in CSS, removed them (through line by line removal) and proven that if you add the following lines of CSS to the list item in an IONIC app, then the text in the list does not redraw if scrolled.

code
border-top-left-radius: 2vh !important;
border-top-right-radius: 2vh !important;
/code

I've removed them and don't require any further support on this, however, it does appear to be a bug; not sure whether it's the IONIC framework of Appery ?

Hello Andy,

Thank you for reporting this issue.
I have redirected it to our development team for further investigation.
As soon as I get an answer from them I will let you know the results.

Hello Andy,

Please clarify, do you use a local scope variable in the ng-repeat attribute there or you run it on that page somewhere, e.g. in the function "init"?

Hi, I use a local scope variable that is modelled as an object.

Is it a static value? Where do you fill it?

Could you send us screenshot with ng-repeat attribute and that text component?

Please find multiple screen shots attached to show you how this is populated.

Also, below is the CSS that caused the issue (commented lines)
code
.camlist_css {
width: 100% !important;
height : 6vh !important;
line-height: 2.5vh !important;
font-size: 2.5vw !important;
border-style: solid !important;
/* border-top-left-radius: 2vh !important; /
/ border-top-right-radius: 2vh !important; */
text-align: center !important;
padding-top: 0 !important;
padding-bottom: 0.5vh !important;
background: #f1f1f1 !important;
color: black !important;
margin: 0 -1vw 1vh -0.9vw !important;
}
/code

Could you show use where you set a value of the cameralist variable?

Also, please check that page without your custom styles, does it work in that case?

sure, and without those custom styles for the borders it does work fine.

See attached for loading the cameralist.

Could you test the same cameralist, but with static $scope variables? If it works - please define a $scope variable only once and use it in the ng-repeat further.

It looks very time consume code to parse and process localStorage variables for each item.