Discussions
Categories
- 382.6K All Categories
- 2.1K Data
- 212 Big Data Appliance
- 1.9K Data Science
- 448.4K Databases
- 221.1K General Database Discussions
- 3.7K Java and JavaScript in the Database
- 25 Multilingual Engine
- 541 MySQL Community Space
- 469 NoSQL Database
- 7.8K Oracle Database Express Edition (XE)
- 2.9K ORDS, SODA & JSON in the Database
- 499 SQLcl
- 3.9K SQL Developer Data Modeler
- 186.3K SQL & PL/SQL
- 21.1K SQL Developer
- 293.8K Development
- 7 Developer Projects
- 129 Programming Languages
- 290.5K Development Tools
- 96 DevOps
- 3K QA/Testing
- 645.6K Java
- 24 Java Learning Subscription
- 36.9K Database Connectivity
- 151 Java Community Process
- 104 Java 25
- 22.1K Java APIs
- 137.9K Java Development Tools
- 165.3K Java EE (Java Enterprise Edition)
- 17 Java Essentials
- 146 Java 8 Questions
- 85.9K Java Programming
- 79 Java Puzzle Ball
- 65.1K New To Java
- 1.7K Training / Learning / Certification
- 13.8K Java HotSpot Virtual Machine
- 94.2K Java SE
- 13.8K Java Security
- 200 Java User Groups
- 24 JavaScript - Nashorn
- Programs
- 290 LiveLabs
- 36 Workshops
- 10.2K Software
- 6.7K Berkeley DB Family
- 3.5K JHeadstart
- 5.8K Other Languages
- 2.3K Chinese
- 168 Deutsche Oracle Community
- 1.2K Español
- 1.9K Japanese
- 234 Portuguese
Unable to align components horizontally using flexbox layout
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
-
Hi Vinay,
Try removing that oj-row class from the outer dov and see if that helps out.
-
I created a jsFiddle from the Flex Layout Basic cookbook recipe: https://jsfiddle.net/jmarion/6whkLLh7/. I then forked it and updated it match your code: https://jsfiddle.net/jmarion/969nwzf9/. Everything is aligned horizontally. Can you identify what is different between my fiddle and your scenario?
