question

Upvotes
Accepted
ricardo.saumeth avatar image
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.

Jirapongse avatar image   Jirapongse

@ricardo.saumeth

Hi,

Thank you for your participation in the forum.

Is the reply below satisfactory in answering your question?

If yes please click the 'Accept' text next to the reply. This will guide all community members who have a similar question.

Otherwise please post again offering further insight into your question.

Thanks,

AHS

1 Answer

· Write an Answer
Upvote
Accepted
Jirapongse avatar image
79.1k ●250 ●52 ●74

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

ricardo.saumeth avatar image ricardo.saumeth
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.