ef-layout is not working

ricardo.saumeth

I want to see this basin layout working, but no luck, the HTML is in DOm but I do not have any CSS property

<ef-layout debug container flex scrollable>

<ef-layout>HEADER</ef-layout>

<ef-layout flex>

<ef-layout container>

<ef-layout>ITEM 1</ef-layout>

<ef-layout>ITEM 2</ef-layout>

</ef-layout>

<ef-layout>ITEM 3</ef-layout>

</ef-layout>

</ef-layout>

I have installed

"@lit-labs/react&quot;: "^1.1.1",

"@refinitiv-ui/core&quot;: "^6.3.0",

"@refinitiv-ui/efx-grid&quot;: "^6.0.30",

"@refinitiv-ui/elements&quot;: "^6.7.0",

"@refinitiv-ui/halo-theme&quot;: "^6.4.1",

"@refinitiv-ui/utils&quot;: "^6.2.3",

Any ideas about what is missing?

Thanks

Jirapongse

@ricardo.saumeth

Thanks for reaching out to us.

I did a quick test with Vite and I can display the panel properly. I installed the following packages.

• npm install @refinitiv-ui/elements
• npm install @refinitiv-ui/halo-theme

The code in main.js is:

import './style.css'
import javascriptLogo from './javascript.svg'


import '@refinitiv-ui/elements/layout';;
import '@refinitiv-ui/halo-theme/dark/imports/native-elements';;
import '@refinitiv-ui/elements/layout/themes/halo/dark';;


document.querySelector('#app').innerHTML = `
<ef-layout debug container flex scrollable>    
 <ef-layout>HEADER</ef-layout>
  <ef-layout flex>
    <ef-layout container>
       <ef-layout>ITEM 1</ef-layout>
       <ef-layout>ITEM 2</ef-layout>  
    </ef-layout>
    <ef-layout>ITEM 3</ef-layout>
  </ef-layout>
</ef-layout>
<br/>
<ef-layout flex>
  <ef-layout container flex class="outer" max-height="155px" scrollable>
    <ef-layout class="inner">ITEM 1</ef-layout>
    <ef-layout class="inner">ITEM 2</ef-layout>
    <ef-layout class="inner">ITEM 3</ef-layout>
    <ef-layout class="inner">ITEM 4</ef-layout>
    <ef-layout class="inner">ITEM 5</ef-layout>
    <ef-layout class="inner">ITEM 6</ef-layout>
    <ef-layout class="inner">ITEM 7</ef-layout>
        <ef-layout class="inner">ITEM 1</ef-layout>
    <ef-layout class="inner">ITEM 2</ef-layout>
    <ef-layout class="inner">ITEM 3</ef-layout>
    <ef-layout class="inner">ITEM 4</ef-layout>
    <ef-layout class="inner">ITEM 5</ef-layout>
    <ef-layout class="inner">ITEM 6</ef-layout>
    <ef-layout class="inner">ITEM 7</ef-layout>
  </ef-layout>
  <ef-layout flex class="outer">
    <ef-layout class="inner">ITEM 8</ef-layout>
  </ef-layout>
</ef-layout>
`

I added the following styles in the style.css file.

.outer {
  
  padding: 10px;
}


.inner {
 
  margin: 10px;
  padding: 10px;
  min-height: 35px;
}

The output is:

I hope that this information is of help.