question

Upvotes
Accepted
3 0 0 3

ef-layout is not working

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": "^1.1.1",

"@refinitiv-ui/core": "^6.3.0",

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

"@refinitiv-ui/elements": "^6.7.0",

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

"@refinitiv-ui/utils": "^6.2.3",


Any ideas about what is missing?

Thanks

#technology#productelement-framework
icon clock
10 |1500

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

1 Answer

· Write an Answer
Upvote
Accepted
80.5k 261 52 75

@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:

1677822332608.png

I hope that this information is of help.



1677822332608.png (6.5 KiB)
icon clock
10 |1500

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Thanks for your quick response. It is working now. Missing the imports.

Write an Answer

Hint: Notify or tag a user in this post by typing @username.

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.