Skip to Main Content

DevOps, CI/CD and Automation

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

Film strip doesn't render flex-basis on IE

2769831May 25 2016 — edited May 26 2016

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

Comments
Post Details
Added on May 25 2016
3 comments
690 views