Hello,
The film strip doesn't render flex-basis on IE, so all elements are pushed to left.
On IE it generates:
<div class="oj-filmstrip-container oj-filmstrip-item-container">
<div class="oj-panel oj-panel-alt2 demo-filmstrip-item oj-filmstrip-item" data-bind="style: {display:
$parent.getItemInitialDisplay($index())}">
<span data-bind="text: name">Hydrogen</span>
</div>
</div>
<div class="oj-filmstrip-container oj-filmstrip-item-container">
<div class="oj-panel oj-panel-alt2 demo-filmstrip-item oj-filmstrip-item" data-bind="style: {display:
$parent.getItemInitialDisplay($index())}">
<span data-bind="text: name">Lithium</span>
</div>
</div>
However, when I checked out the cookbook on IE, the components are generated with flex-basis.
<div class="oj-filmstrip-container oj-filmstrip-item-container" style="flex-basis: 292px;">
<div class="oj-panel oj-panel-alt2 demo-filmstrip-item oj-filmstrip-item" data-bind="style: {display:
getItemInitialDisplay($index())}">
<span data-bind="text: name">Hydrogen</span>
</div>
</div>
<div class="oj-filmstrip-container oj-filmstrip-item-container" style="flex-basis: 292px;">
<div class="oj-panel oj-panel-alt2 demo-filmstrip-item oj-filmstrip-item" data-bind="style: {display:
getItemInitialDisplay($index())}">
<span data-bind="text: name">Helium</span>
</div>
</div>
So the cookbook is working fine.
I copied the code from cookbook basically:
<div id="filmstrip-navdots-example">
<div id="filmStripDiv" class="oj-panel" style="margin: 20px;">
<div id="filmStrip" aria-label="Set of chemicals"
data-bind="ojComponent: {component: 'ojFilmStrip', arrowVisibility:
'hidden', 'maxItemsPerPage': 3}">
<!-- ko foreach: chemicals -->
<div class="oj-panel oj-panel-alt2 demo-filmstrip-item"
data-bind="style: {display:
$parent.getItemInitialDisplay($index())}">
<span data-bind="text: name"></span>
</div>
<!-- /ko -->
</div>
<div style="text-align: center;">
<div style="display: inline-block;margin-top: 4px;">
<div id="pagingControl" data-bind="ojComponent: {component:
'ojPagingControl', data: getPagingModel(), pageSize: 0, pageOptions:
{type: 'dots'}}">
</div>
</div>
</div>
</div> <!-- end filmStripDiv -->
</div>
self.getItemInitialDisplay = function(index)
{
return index < 3 ? '' : 'none';
};
self.getPagingModel = function()
{
var filmStrip = $("#filmStrip");
var pagingModel = filmStrip.ojFilmStrip("getPagingModel");
return pagingModel;
};
The issue only happens on IE.
Can anyone please help me? I really appreciate!
Thanks,
Quincy