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
Best Answer
-
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.
1
Answers
-
Thanks for your quick response. It is working now. Missing the imports.0
Categories
- All Categories
- 6 AHS
- 37 Alpha
- 161 App Studio
- 4 Block Chain
- 4 Bot Platform
- 16 Connected Risk APIs
- 47 Data Fusion
- 30 Data Model Discovery
- 608 Datastream
- 1.3K DSS
- 577 Eikon COM
- 4.9K Eikon Data APIs
- 7 Electronic Trading
- Generic FIX
- 7 Local Bank Node API
- Trading API
- 2.7K Elektron
- 1.3K EMA
- 236 ETA
- 519 WebSocket API
- 33 FX Venues
- 10 FX Market Data
- 1 FX Post Trade
- 1 FX Trading - Matching
- 12 FX Trading – RFQ Maker
- 5 Intelligent Tagging
- 2 Legal One
- 20 Messenger Bot
- 2 Messenger Side by Side
- 9 ONESOURCE
- 7 Indirect Tax
- 59 Open Calais
- 264 Open PermID
- 39 Entity Search
- 2 Org ID
- PAM
- PAM - Logging
- 8.4K Private Comments
- 6 Product Insight
- Project Tracking
- ProView
- ProView Internal
- 20 RDMS
- 1.4K Refinitiv Data Platform
- 367 Refinitiv Data Platform Libraries
- 3 Refinitiv Due Diligence
- LSEG Due Diligence Portal API
- 3 Refinitiv Due Dilligence Centre
- Rose's Space
- 1.1K Screening
- 18 Qual-ID API
- 13 Screening Deployed
- 23 Screening Online
- 10 World-Check Customer Risk Screener
- 990 World-Check One
- 44 World-Check One Zero Footprint
- 45 Side by Side Integration API
- Test Space
- 3 Thomson One Smart
- 1.2K TR Internal
- Global Hackathon 2015
- 2 Specialists Who Code
- 10 TR Knowledge Graph
- 150 Transactions
- 142 REDI API
- 1.7K TREP APIs
- 4 CAT
- 21 DACS Station
- 117 Open DACS
- 1.1K RFA
- 103 UPA
- 172 TREP Infrastructure
- 224 TRKD
- 886 TRTH
- 5 Velocity Analytics
- 5 Wealth Management Web Services
- 59 Workspace SDK
- 9 Element Framework
- 5 Grid
- 13 World-Check Data File
- Yield Book Analytics
- 46 中文论坛