Getting blank selection when using inside the ui grid in IE11

[santhanapaul]

Hi,

I am getting blank selection when using angular-chosen inside the ui grid template in IE11. Please guide me to fix this. ui grid columndef:

{ name: 'value', displayName: "Value", minWidth: 180, cellTemplate: 'app/search/value-cell.html' }

and in html:

<div class="input-group">                
    <select class="form-control" chosen multiple width="'100%'" allow-single-deselect="true"
        placeholder-text-single="Choose Options"
        no-results-text="'Data not available'" ng-model="MODEL_COL_FIELD"
        ng-options="data.label as data.label for data in grid.appScope.datas"
        name="jobcode" id="jobcode"
        class="form-control">
        <option value=""></option>
    </select>
</div>

[leocaseiro]

Does it work outside ui grid?

[santhanapaul]

when using outside of ui grid we are facing hard scrolling issue (for multiselect).

[leocaseiro]

Hi @santhanapaul, I can't reproduce your issue. Is not clear what is your problem.

Could you please show me an example or describe exactly what the issue is?

Thanks.

[santhanapaul]

@leocaseiro thanks for waiting

updated plunkr link

please check in IE11 for scrolling issue

[leocaseiro]

Hi @santhanapaul, thanks for sending me the plunker.

So the issue is only on IE11?

Unfortunately, I'm on Mac and I can't reproduce at the moment. (need to check on windows)

Have you tried if happens the same issue with jQuery without Angular? I meant, could be an issue with Chosen by itself.

Also, does it work on Edge? If you have any chances, could you please send me a print or a gif with the issue? You can use http://recordit.co/ if you don't mind.

Either way, I'll try to check on Windows this long weekend(Australia).

Thanks.

[leocaseiro]

PS: I've noticed some CSS here,

.chosen-container .chosen-choices {
    overflow:visible;
    max-height: 54px;
    overflow-y: auto;
}

Does it work without these custom styles?

[leocaseiro]

Hi @santhanapaul, I've tested on my VM Ware.

I removed the CSS styles and it looks nice to me:

http://recordit.co/cyeynKnZTP or http://g.recordit.co/cyeynKnZTP.gif

PS: Sorry for my stupid shortcuts that redimensioned the window...while I was trying to remove the style...

[santhanapaul]

Maximum height to be set for that control, otherwise screen design will be collapsed. But in your shared video, height of the control dynamically increased based on no of item selection.

[leocaseiro]

Yep, it should work the same way for you. Can you try on plunker?

If you need to set max-height on your multiple select chosen, what are your expecting behaviour? It should show a scroll, right? Otherwise, I don't understand how the user can read/remove older options.

That's the same way normal multiple select works, right?

[leocaseiro]

@santhanapaul I just found this old issue https://github.com/leocaseiro/angular-chosen/issues/129

[santhanapaul]

@leocaseiro Yes i need scroll option, if user want to read/remove older options means they will go for scrolling. In my scenario user not able to read the older options because of the scrolling issue in IE11

[leocaseiro]

Hi @santhanapaul, I believe you can try with overflow-y: scroll instead of visible, like so:

.chosen-container .chosen-choices {
    overflow-y: scroll;
    max-height: 54px;
}

https://plnkr.co/edit/SiockV4hdpsxYVqkGNmt?p=preview

Hope that will do.

[santhanapaul]

Hi @leocaseiro replacing overflow-x: scroll instead of visible working fine, but scrolling issue still persist

Hope you are checking that one..

[leocaseiro]

Sorry @santhanapaul, I'm not sure what's the issue.

Please, show me a screenshot or something. As I showed to you, it looks good.

[santhanapaul]

Hi @leocaseiro i have shared below for the chrome and IE11 behaviour

IE: http://recordit.co/NjFJQU4Cop Chrome: http://recordit.co/Y7FVQBNhTb

[leocaseiro]

Hi @santhanapaul,

I can see there's an issue because of the auto-focus while you scroll. However, if you use the scroll from your mouse or hold the button, it works better.

There's no much I can do as this is actually a jquery-chosen issue. You might want to open an issue in their repo: https://github.com/harvesthq/chosen

Example without angular: https://plnkr.co/edit/m1pSoC?p=preview

[leocaseiro]

I'm closing this issue in regards the responsibility is of chosen lib itself.