Ionic-framework: bug: collection-repeat doesn't change items' dimensions in IE

[yurikolesnikov]

Type: bug

Platform: desktop browser IE 11, Windows Phone 8.1

collection-repeat doesn't change items' dimensions, it's always _width: 0px; height: 0px;_

The problem seems to be in variable _WIDTH_HEIGHT_REGEX_.
It's value is /height:._?px;\s_width:.*?px/, but in IE in cssText _width_ is located before _height_.

Fix: setting WIDTH_HEIGHT_REGEX to /(height|width):._?px;\s_(width|height):.*?px/ solevs the problem.

[Fayozjon]

Yuri

http://wondrew.net/izuciti

25.03.2015, 14:51, "Yuri Kolesnikov" [email protected]:Type: bug
Platform: IE 11

collection-repeat doesn't change items' dimensions, it's always width: 0px; height: 0px;

The problem seems to be in variable WIDTH_HEIGHT_REGEX.
It's value is /height:.?px;\swidth:.*?px/, but in IE in cssText width is located before height.

Fix: setting WIDTH_HEIGHT_REGEX to /(height|width):.?px;\s(width|height):.*?px/ solevs the problem.

—Reply to this email directly or .

[ferryfax]

I had to use the following to get this to work-

var WIDTH_HEIGHT_REGEX = /(height|width):._?px;\s_(width|height):.*?px/;

[ferryfax]

Hmm, that wasn't what I typed. Here is what I really meant. Probably the same as you have.

[yurikolesnikov]

yes, you are right, it's the same

/(height|width):.*?px;\s*(width|height):.*?px/

[kbarchanski]

I had to slightly modify the regex to make it work:

var WIDTH_HEIGHT_REGEX = /(height|width):\s?.?px;\s(width|height):\s?.*?px/;

[ghost]

Value change of WIDTH_HEIGHT_REGEX still necessary in v1.0.0 "uranium-unicorn".
Still works with this fix in IE11 and WP8.

[mattlewis92]

Confirmed that the regex provided by @zwloki fixes collection repeat on windows phone.

[balkin]

Same for me. This bugfix doesn't look very nice, but it works. Without that, our app is unusable on Windows and Windows Phone 8.

[CKGrafico]

The problem continues here :S

inconsistent heights and widths only on windows, on the image I forced width: 100% and height: 130px to try to """fix""" but this second didn't work

[aasavad]

Windows Phone 8.1 - I added var WIDTH_HEIGHT_REGEX = /(height|width):\s?.?px;\s(width|height):\s?.*?px/; provided by @zwloki .The collection repeat size looks fine but the scroll is not working.I am not able to scroll down to see the full list.

[ruisilva450]

The fix that @zwloki provided does work for me and scroll is not broken but when I turn the orientation the width doesn't update. This needs more research, please.

[qqilihq]

Hey guys, any news on this one?

[Michenux]

The fix is ok for me.
Don't know about orientation.

[antony-k1208]

Any plans to include the provided fix in ionic-master?

[CKGrafico]

@mhartington :( ..

[antony-k1208]

Workaround, which works (without significant performance loss) both in portrait as well as in landscape in IE10/11:

//desired width / height of item
var list_element_height = 100;
var window_width = $(window).width();

// prepare styles
if ($('#closure-style').length == 0) {
    $('head').append(
                     $('<style/>', {
                        id: 'closure-style'
                    })
                     );
}

//define styles
var styles =

'ion-view[nav-view="active"] ion-item {' +
(typeof window.cordova === 'undefined' ? 'height: ' + list_element_height + 'px !important;' : ''      )+
(typeof window.cordova === 'undefined' ? 'width: ' + window_width + 'px !important;' : '' )+
'}';

//apply
$('#closure-style').html(styles);

[antony-k1208]

But another problem that occurs is, that in IE collection-repeat always renders all elements in the collection, there is no kind of pagination..even with this fix here..any ideas?

It seems that using an int in "item-width" and "item-height" directly works pretty well, but when using an $scope variable, it is ignoring the values, at least for calculating how many elements should be rendered.

So all items in the collection are put into the DOM, resulting in unusable laggy behaviour. If item-width and item-height are directly put into the html as numbers, it works.

See this codepen: http://codepen.io/zapatek/pen/dxyLe/
In Chrome no problems, but in IE it isn't working at all. @mhartington any ideas?

[mhartington]

We will not be supporting WP8X with ionic v1.

[CKGrafico]

@mhartington did you try on W10?

[ruisilva450]

This is more related with IE than WP8X

[mhartington]

@CKGrafico Not yet, just upgraded to windows10, so will be looking at things on edge.

@ruisilva450 you are correct, it is more of an IE issue. For WP8.X, IE is the system webview, which we're not going to support.

[antony-k1208]

How about normal desktop IE? IE9+

[CKGrafico]

Ok @mhartington @ThinklabsGbR these are my tests:
url: http://ionicframework.com/present-ionic/slides/#/31 -> http://ionicframework.com/present-ionic/slides/demos/collection-repeat/index.html
Chrome Windows 10: Obviously works perfect
IE 11 on Windows 10: Error
Edge on Windows 10 (Desktop): Works!
And.. Edge on Windows 10 (Mobile) Works!

[mhartington]

@ThinklabsGbR probably not going to focus on those. We're focused on making mobile apps.

[antony-k1208]

Yeah of course, but merging this minor fix isn't a big deal in my opinion.

[jdnichollsc]

Hi guys, one question..
Any template for Windows 10? :+1:

Thanks in advance, Nicholls

[CKGrafico]

Yep @jdnichollsc my template (Windows Phone 10) :+1: http://cordova-multiplatform-template.js.org

[lobo87]

using the collection-repeat as discussed in the documentation (http://ionicframework.com/docs/api/directive/collectionRepeat/) renders the ion-item to be 0px in height and width. this is in the case on windows 10 pro, build 10586.164 on both browser versions IE and Edge. Haven't tried the fix from above yet, but will do. This is the code i was using (i tried 44px and 44):

    <ion-item
        type="item-text-wrap"
        collection-repeat="benefitId in benefits"
        item-height="44px"
        href="#/tab/benefits/{{benefitId}}">
        {{ benefitId] }}
    </ion-item>

Anyone other suggestions except the one from above?

Update: Just tried the fix from above - changing the regex - and this is indeed working. However, if I haven't done something wrong, this is still an open issue even for mobile development, because it is not working on Edge AND IE. Which is contrary to the comment from @CKGrafico. So in my opinion this should be added to the master.

[beatgrabe]

@lobo87 I can confirm the issue is still

[jdnichollsc]

+1 for this issue! :/

[kirillgroshkov]

+1. Fixed with changed regex, but good to have it in master

[jdnichollsc]

Yes, what is the inconvenient to add the fix to master? @mhartington

[ADCJustinH]

I just lost some time on this... Why not add the updated regex to master so no one else has to: find this issue, grab the regex, maintain their own version indefinitely? @mhartington

[qqilihq]

This is so sad.