Forum Stats

  • 3,780,926 Users
  • 2,254,456 Discussions
  • 7,879,496 Comments

Discussions

Unable to align components horizontally using flexbox layout

Vthulasi-Oracle
Vthulasi-Oracle Member Posts: 25
edited Apr 5, 2016 12:16PM in Oracle JET

I was trying to layout the components using flexbox layout as mentioned in the demo site. (Flex Layout - Flex Auto)

Tried the same code that was on the demo site:

<!DOCTYPE html>

<div id="esdiv1">

    <div  class="oj-row" id="esdiv2">

        <h2 data-bind="text:oj.Translations.getTranslatedString('ENT_STATUS_HEADER')" id="h21"></h2>

    </div>

    <hr/>

    <div class="demo-flex-display oj-flex-items-pad">

        <div class="oj-flex oj-sm-flex-items-initial">

            <div class="oj-flex-item">A</div>

            <div class="oj-flex-item">B</div>

            <div class="oj-flex-item">C</div>

        </div>

    </div>

</div>

But A, B, C are aligned vertically but the demo site with the above code shows A,B,C aligned horizontally.

Do we need to set some other style class or add some other attribute to align the div components horizontally?

thanks,

-Vinay

Answers