The Eikon WEB UI (
https://emea1.apps.cp.thomsonreuters.com/Apps/EikonWebUI) page has a small section on Layout, but it's not the same layout I see in Eikon, for example at the AppRelease page (
https://amers1.views.cp.icp2.mpp.reutest.com/Apps/AppReleaseJ) The components are laid out in rows and columns. Going into the markup I see the style elements being used **flex-col, flex-item flex-col, flex-split1 ...etc**
So these flex style items in the CSS are being used in Eikon and I want to use them too. Furthermore I noticed that when creating a new Eikon webapp project in VisualStudio a "schema2.css" is automatically generated which contains the below CSS block:
/*flex-layout*/
.flex-row, .flex-col {
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-align-items:stretch;
-ms-flex-align:stretch;
align-items:stretch;
}
.flex-row {
-webkit-flex-flow: row;
-ms-flex-direction: row;
flex-flow: row;
}
.flex-col {
-webkit-flex-flow: column;
-ms-flex-direction: column;
flex-flow: column;
}
.flex-row > .flex-item {
width:0;
}
.flex-item {
box-sizing:border-box;
}
.flex-split1{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}
.flex-split2{-webkit-flex-grow:2;-ms-flex-positive:2;flex-grow:2;}
.flex-split3{-webkit-flex-grow:3;-ms-flex-positive:3;flex-grow:3;}
.flex-split4{-webkit-flex-grow:4;-ms-flex-positive:4;flex-grow:4;}
.flex-split5{-webkit-flex-grow:5;-ms-flex-positive:5;flex-grow:5;}
.flex-split6{-webkit-flex-grow:6;-ms-flex-positive:6;flex-grow:6;}
.flex-split7{-webkit-flex-grow:7;-ms-flex-positive:7;flex-grow:7;}
.flex-split8{-webkit-flex-grow:8;-ms-flex-positive:8;flex-grow:8;}
.flex-split9{-webkit-flex-grow:9;-ms-flex-positive:9;flex-grow:9;}
.flex-split10{-webkit-flex-grow:10;-ms-flex-positive:10;flex-grow:10;}
.flex-split11{-webkit-flex-grow:11;-ms-flex-positive:11;flex-grow:11;}
.flex-split12{-webkit-flex-grow:12;-ms-flex-positive:12;flex-grow:12;}
.flex-split13{-webkit-flex-grow:13;-ms-flex-positive:13;flex-grow:13;}
.flex-split14{-webkit-flex-grow:14;-ms-flex-positive:14;flex-grow:14;}
.flex-split15{-webkit-flex-grow:15;-ms-flex-positive:15;flex-grow:15;}
.flex-item16{-webkit-flex-grow:16;-ms-flex-positive:16;flex-grow:16;}
.flex-item.content {
border:solid 1px #000;border-radius:3px;background-color:#2e2e2e;box-shadow:inset 0 1px 1px rgba(0, 0, 0, .7), 0 1px 0 0 rgba(58, 58, 58, .6);
margin:4px;
min-height:150px;
min-width:200px;
}
So in the interest of using this to layout my components in an Eikon webapp I am unable to find some documentation/samples on using these flex CSS styles for layout.
Are there any documentation/samples on how to get started using those styles for layout? Am I looking in the right place or should I be using something else for laying out my components?
Any help is greatly appreciated.
