Any documentation on using Flex layout for Eikon?

georges.haddad

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.

georges.haddad

Well I got an answer from Gregory Machon (EikonWebUI team) that flex layout is not supported by IE 10 and that we really should avoid using it. There are other layout techniques to use that we can use in combination with the EikonWebUI styling. *** Edit *** According to this post on StackOverflow [CSS Flexbox Not Working in IE10][1] it states that IE10 does not fully support Flexbox natively but it does support some version of the specification. In essence you can get some support of Flexbox in IE 10, but whatever you did to get that working, it may not work in IE 11, so there's going to be some compatibility code (if there ever wasn't any in the history of webapp dev) [1]:
http://stackoverflow.com/questions/18019450/css-flexbox-not-working-in-ie10

Alex Putkov.1

Hi George,

I think you need to rephrase your question. What is it that you're trying to do?
Eikon Web UI is a UI toolkit for styling HTML apps in Eikon.
Flex workbook is a legacy document format still supported in Eikon, but users are discouraged from creating new Flex workbooks.
When you say "it's not the same layout I see in Eikon", what exactly do you mean? Are you looking to create an app that emulates the look of some existing part of Eikon? Which part? Perhaps a screenshot of what you're looking to emulate would be helpful?

georges.haddad

Ah yes, I am looking to emulate an existing layout in Eikon. Didn't realize there was a lot of other things named Flex as well. I updated my question and added some css samples. I hope it's more clear now. Thank you.

Tampong Yooyen

We are using the flex-layout in our apps and it seems to work fine in IE10+.

georges.haddad

Thanks, that's interesting to know. May I ask if you are using the pre-made flex CSS classes from Schema2.css (the one that is generated by default in Visual Studio) ? or do you use custom ones ?

gregory.machon

if there's a way to use flex-box in IE10 using it give a lot more flexibility (as name suggests ), it's on our TODO list to add it to EWUI but right now I can't provide the ETA

georges.haddad

I updated the answer, there is a way but its not that pretty.