When a widget is rendered inside MyTrader, the platform overlays a small cluster of control icons (close, pop-out, options) at one top corner of the widget's frame. These icons sit on top of your widget's own DOM and will visually collide with anything you put in that region.
Which corner depends on the user's language. The framework sets
LTR languages (English, French, German, etc.) → top-right
RTL languages (Arabic, Hebrew, etc.) → top-left
Your widget must handle both. The reserved area is approximately 40 pixels wide and 32 pixels tall, measured from the top inline-end corner.
Use CSS logical properties, not physical ones. CSS logical properties (
.my-header {
/* Correct: variable gives the current reserved width; logical property routes it to whichever side — right in LTR, left in RTL — the platform icons actually appear. */
padding-block: 10px;
padding-inline-start: 14px;
padding-inline-end: var(--widget-chrome-inset-horizontal, 40px);
}
Avoid the physical equivalent, which works in LTR but breaks in RTL:
.my-header {
/* Wrong: always reserves the right side, even when the platform's icons are on the left in RTL mode. */
padding: 10px 40px 10px 14px;
}
If your widget does not have a header and places interactive elements directly at the top of the body, either (a) use
Note: the reserved area applies to widgets loaded into the page container. Widgets shown as floating dialogs or pop-up windows have their own window chrome and do not need this padding — but it does no harm to leave it in place.