Collection-repeat bug on Windows platform

ghenry22 · October 19, 2015, 1:14am

I know windows / windows phone are not officially supported platforms but I was hoping to find a bit of help here.

I have my app working great on both Android and iOS platforms (substreamerapp.com for anyone that is interested). I use windows 10 every day and while travelling and I thought it would be great if I could port the app to windows 10 universal now that the platform is supported by Cordova so I gave it a go.

I have Visual Studio 2015 installed and generally it works surprisingly well with 2 exceptions:

Collection-repeat does not show anything, I just get a blank white space where ever I have colletion-repeats. If I inspect the dom I can see the data for each of the items that SHOULD be shown, but nothing is visible. It’s almost like someone forgot to hit the ng-show switch.

If I change to ng-repeat then everything displays fine, but it runs slow as hell by comparison so it’s not a workable solution.

If you want to test just create a blank project from an ionic template in visual studio 2015 and add a simple collection-repeat and you will see the same. I tested with a blank starter project to confirm it wasn’t just my app.

I have ionic version 1.1.0, cordova and windows platform all updated to latest.

I did see a previous fix for ng-show behaviour on WP8.1 and tried adding the fix to my CSS but no change.

Any help would be greatly appreciated.

And this isn’t an ionic issue but just throwing it out there in case anyone else has come across it! cordova media plugin doesn’t seem to work on windows platform. It installs but the create method always fails with a error “code 1” with no further message or explanation.

Again I tried in a blank project and got the same. I tried with a local file and a simple mp3 file hosted on a local web server, no cigar. Create always fails.

Appreciate any help on either point.

Thanks

UPDATE: Upon further inspection I see that if I disable overflow: hidden on the ion-list items when inspecting the page then the collection-repeat content all shows up! See screenshot attached for reference.

adding this to my style.css has collection-repeat content showing again on windows 10. The border between items is not shown yet. Also slide box on items does not work. The item slides to the left but the box is not shown. Still looking for a work around for that one. (again it works perfectly with ng-repeat in a windows app).

.platform-windows .item, .item h1, .item h2, .item h3, .item h4, .item h6, .item p, .item-content, .item-content h1, .item-content h2, .item-content h3, .item-content h4, .item-content h5, .item-content h6, .item-content p {
overflow: visible;
}

It would love some help if anyone has time to look at this with me. I am available to test or if you have Visual Studio 2015 and windows 8.1 or 10 you can test by deploying to your local machine which means no need for dedicated hardware for testing. Would be great to see Ionic nice and smooth for adding the windows platform as a target.since universal apps now have a much bigger market to play with as they will go across phone / desktop / tablet & potentially xbox platforms. Would love to see my app find it’s way onto an xbox for listening to music, that would be cool.

darshanp · October 19, 2015, 7:39am

FYI, I think you posted the wrong link (that one doesn’t exist) - did you mean http://substreamerapp.com/? If so, nice job!

ghenry22 · October 19, 2015, 7:40am

yep that’s the one I meant sorry, fixed now.

vpease · October 19, 2015, 4:28pm

In my case, i have to set the width to 100% for each ion-ítem.
I have tested using you line in my css with no luck.

You can see here that width and height are coming with 0px. The first element is changed to width:100% and its shown. height:auto also added but not required

Tested using Microsoft Edge

ghenry22 · October 21, 2015, 6:13am

Can you try testing on an actual app? I tried your changes as well and it makes no difference in a Windows 10 Universal app for me. Maybe Edge uses a different rendering engine than an app uses.

Alternatively if you can paste your actual CSS I an try that in case I set something wrong.

After the overflow fix I posted above I still have the following issues with Ionic on windows platform:

collection-repeat - content not shown, fixed with overflow css override as above
collection-repeat - ion-option-button is not shown. I can slide the item sideways but the button is not there, just white screen. (works perfectly with ng-repeat)
collection-repeat - clickable area, only the actual image or text in the row is clickable on windows, whereas on ios and android you can click anywhere in the item row.
collection-repeat - background images for a repeat item are not shown. I have a grid of items rendered by collection repeat using background url and the image does not show. fixed by editing ionic.bundle.js with the fix to WIDTH_HEIGHT_REGEX as at: https://github.com/driftyco/ionic/issues/3399

Leaves just 2 & 3 to go!

Regarding the cordova media issues I am working on a PR for the windows media plugin native code to address those so this post should just address the ionic specific issues, all of which seem to be collection-repeat related as everything else works well!

I’d love some help with these and can help with testing different solutions from any team members available.

UPDATE: have found fixes for collection-repeat issues 1 & 4, post updated with details. Have made some changes to the native code for the windows platform cordova-media-plugin to fix broken http streaming and have sound working. Now working on windows platform file plugin for local file access.

UPDATE 2: The fix for point 4 also resolves point 2 & 3!
So if the fixes for point 1 & 2 can be included in ionic by default then everything looks surprisingly nice when porting to a Windows 10 universal app!

Now back to work on the file and media plugins to get local media playback working!

I will summarise my steps for porting an ionic app from ios/android to windows 10 universal platform in a clean new post along with fix details for future reference by others once I have all the quirks ironed out.

UPDATE 3: Once the linked fix for point 4 is applied the overflow CSS is no longer required at all.

jdnichollsc · November 9, 2015, 4:10am

Any tutorial?

ghenry22 · November 9, 2015, 4:42am

In the end, apply the linked fix in point 4 and it should basically resolve all your collection repeat issues on the windows platform.

Then you need to watch for any updates to the ionic lib as they will over write the change.

jdnichollsc · November 9, 2015, 5:37am

using native scrolling with several items?

$ionicConfigProvider.scrolling.jsScrolling(false);

Thanks

coolbloke1324 · March 16, 2016, 2:18pm

Collection-repeat seems to have some serious performance lag on the Lumia 520 - have you noticed any performance issues on actual devices?

ghenry22 · April 6, 2016, 6:39am

I haven’t tried with a Lumia 520. I have been primarily testing on windows tablets as until recently there wasn’t a single retail phone available running win 10 I’ll see what phones are available and try to grab something to test with.

jdnichollsc · June 11, 2016, 6:30am

Hi guys!

See my directive to use ng-repeat on Windows Phone and IE, but use collection-repeat on Android, iOS, etc

Ion-Repeat http://codepen.io/jdnichollsc/pen/EyPOee