Data inputExtension
Color Picker
Choose a color in one field, from a popup with a color area, hue slider and swatches, or type a hex value such as #2563EB.
| Class name | Type | Description |
|---|---|---|
color-pickerplf:color-picker | Component | Wraps the native input and the controls |
color-picker-previewplf:color-picker-preview | Part | The current color in the trigger |
color-picker-panelplf:color-picker-panel | Part | The Popover panel |
color-picker-editorplf:color-picker-editor | Part | The color area and hue slider's box the script adds, or an empty one the page places |
color-picker-swatchesplf:color-picker-swatches | Part | The swatch grid |
color-picker-swatchplf:color-picker-swatch | Part | A swatch button |
color-picker-footerplf:color-picker-footer | Part | The eyedropper and the buttons |
color-picker-errorplf:color-picker-error | Part | The error message the script adds |
Default
Give every swatch a hex value and an aria-label such as “Red”, so the color is never its only label.
Used for buttons and links.
<div class="color-picker" data-plf-color-picker>
<label class="field" for="color-brand-input">
<span class="field-label">Brand color</span>
<input class="input" id="color-brand-input" name="brand" type="color" value="#2563eb">
</label>
<div hidden>
<div class="popover" data-plf-popover data-plf-align="start">
<div class="field">
<label class="field-label" for="color-brand-text">Brand color</label>
<div class="input-group">
<button type="button" class="input-group-action input-group-addon" aria-label="Open brand color picker">
<span class="color-picker-preview"></span>
</button>
<input class="input-group-control" type="text" id="color-brand-text" aria-describedby="color-brand-help">
</div>
<p class="field-help" id="color-brand-help">Used for buttons and links.</p>
</div>
<div class="popover-content color-picker-panel" aria-label="Choose brand color" hidden>
<div class="color-picker-swatches">
<button type="button" class="color-picker-swatch" value="#0a0a0a" aria-label="Black"></button>
<button type="button" class="color-picker-swatch" value="#ffffff" aria-label="White"></button>
<button type="button" class="color-picker-swatch" value="#64748b" aria-label="Slate"></button>
<button type="button" class="color-picker-swatch" value="#ef4444" aria-label="Red"></button>
<button type="button" class="color-picker-swatch" value="#f97316" aria-label="Orange"></button>
<button type="button" class="color-picker-swatch" value="#f59e0b" aria-label="Amber"></button>
<button type="button" class="color-picker-swatch" value="#eab308" aria-label="Yellow"></button>
<button type="button" class="color-picker-swatch" value="#84cc16" aria-label="Lime"></button>
<button type="button" class="color-picker-swatch" value="#22c55e" aria-label="Green"></button>
<button type="button" class="color-picker-swatch" value="#14b8a6" aria-label="Teal"></button>
<button type="button" class="color-picker-swatch" value="#06b6d4" aria-label="Cyan"></button>
<button type="button" class="color-picker-swatch" value="#2563eb" aria-label="Blue"></button>
<button type="button" class="color-picker-swatch" value="#6366f1" aria-label="Indigo"></button>
<button type="button" class="color-picker-swatch" value="#8b5cf6" aria-label="Violet"></button>
<button type="button" class="color-picker-swatch" value="#ec4899" aria-label="Pink"></button>
<button type="button" class="color-picker-swatch" value="#f43f5e" aria-label="Rose"></button>
</div>
<div class="color-picker-footer">
<button type="button" class="btn btn-ghost btn-sm btn-square" data-plf-color-picker-eyedropper aria-label="Pick a color from the screen">
<span class="icon icon-color-picker"></span>
</button>
<span class="flex flex-wrap items-center gap-2">
<button type="button" class="btn btn-ghost btn-sm" data-plf-popover-close>Cancel</button>
<button type="button" class="btn btn-primary btn-sm" data-plf-color-picker-apply>Apply</button>
</span>
</div>
</div>
</div>
</div>
</div><div class="plf:color-picker" data-plf-color-picker>
<label class="plf:field" for="color-brand-input">
<span class="plf:field-label">Brand color</span>
<input class="plf:input" id="color-brand-input" name="brand" type="color" value="#2563eb">
</label>
<div hidden>
<div class="plf:popover" data-plf-popover data-plf-align="start">
<div class="plf:field">
<label class="plf:field-label" for="color-brand-text">Brand color</label>
<div class="plf:input-group">
<button type="button" class="plf:input-group-action plf:input-group-addon" aria-label="Open brand color picker">
<span class="plf:color-picker-preview"></span>
</button>
<input class="plf:input-group-control" type="text" id="color-brand-text" aria-describedby="color-brand-help">
</div>
<p class="plf:field-help" id="color-brand-help">Used for buttons and links.</p>
</div>
<div class="plf:popover-content plf:color-picker-panel" aria-label="Choose brand color" hidden>
<div class="plf:color-picker-swatches">
<button type="button" class="plf:color-picker-swatch" value="#0a0a0a" aria-label="Black"></button>
<button type="button" class="plf:color-picker-swatch" value="#ffffff" aria-label="White"></button>
<button type="button" class="plf:color-picker-swatch" value="#64748b" aria-label="Slate"></button>
<button type="button" class="plf:color-picker-swatch" value="#ef4444" aria-label="Red"></button>
<button type="button" class="plf:color-picker-swatch" value="#f97316" aria-label="Orange"></button>
<button type="button" class="plf:color-picker-swatch" value="#f59e0b" aria-label="Amber"></button>
<button type="button" class="plf:color-picker-swatch" value="#eab308" aria-label="Yellow"></button>
<button type="button" class="plf:color-picker-swatch" value="#84cc16" aria-label="Lime"></button>
<button type="button" class="plf:color-picker-swatch" value="#22c55e" aria-label="Green"></button>
<button type="button" class="plf:color-picker-swatch" value="#14b8a6" aria-label="Teal"></button>
<button type="button" class="plf:color-picker-swatch" value="#06b6d4" aria-label="Cyan"></button>
<button type="button" class="plf:color-picker-swatch" value="#2563eb" aria-label="Blue"></button>
<button type="button" class="plf:color-picker-swatch" value="#6366f1" aria-label="Indigo"></button>
<button type="button" class="plf:color-picker-swatch" value="#8b5cf6" aria-label="Violet"></button>
<button type="button" class="plf:color-picker-swatch" value="#ec4899" aria-label="Pink"></button>
<button type="button" class="plf:color-picker-swatch" value="#f43f5e" aria-label="Rose"></button>
</div>
<div class="plf:color-picker-footer">
<button type="button" class="plf:btn plf:btn-ghost plf:btn-sm plf:btn-square" data-plf-color-picker-eyedropper aria-label="Pick a color from the screen">
<span class="plf:icon plf:icon-color-picker"></span>
</button>
<span class="plf:flex plf:flex-wrap plf:items-center plf:gap-2">
<button type="button" class="plf:btn plf:btn-ghost plf:btn-sm" data-plf-popover-close>Cancel</button>
<button type="button" class="plf:btn plf:btn-primary plf:btn-sm" data-plf-color-picker-apply>Apply</button>
</span>
</div>
</div>
</div>
</div>
</div>Disabled
Add disabled to the native input; the text field and preview button follow it.
Managed by your administrator.
<div class="color-picker" data-plf-color-picker>
<label class="field" for="color-disabled-input">
<span class="field-label">Locked color</span>
<input class="input" id="color-disabled-input" name="locked" type="color" value="#64748b" disabled>
</label>
<div hidden>
<div class="popover" data-plf-popover data-plf-align="start">
<div class="field">
<label class="field-label" for="color-disabled-text">Locked color</label>
<div class="input-group">
<button type="button" class="input-group-action input-group-addon" aria-label="Open locked color picker">
<span class="color-picker-preview"></span>
</button>
<input class="input-group-control" type="text" id="color-disabled-text" aria-describedby="color-disabled-help">
</div>
<p class="field-help" id="color-disabled-help">Managed by your administrator.</p>
</div>
<div class="popover-content color-picker-panel" aria-label="Choose locked color" hidden>
<div class="color-picker-swatches">
<button type="button" class="color-picker-swatch" value="#0a0a0a" aria-label="Black"></button>
<button type="button" class="color-picker-swatch" value="#ffffff" aria-label="White"></button>
<button type="button" class="color-picker-swatch" value="#64748b" aria-label="Slate"></button>
<button type="button" class="color-picker-swatch" value="#ef4444" aria-label="Red"></button>
<button type="button" class="color-picker-swatch" value="#f97316" aria-label="Orange"></button>
<button type="button" class="color-picker-swatch" value="#f59e0b" aria-label="Amber"></button>
<button type="button" class="color-picker-swatch" value="#eab308" aria-label="Yellow"></button>
<button type="button" class="color-picker-swatch" value="#84cc16" aria-label="Lime"></button>
<button type="button" class="color-picker-swatch" value="#22c55e" aria-label="Green"></button>
<button type="button" class="color-picker-swatch" value="#14b8a6" aria-label="Teal"></button>
<button type="button" class="color-picker-swatch" value="#06b6d4" aria-label="Cyan"></button>
<button type="button" class="color-picker-swatch" value="#2563eb" aria-label="Blue"></button>
<button type="button" class="color-picker-swatch" value="#6366f1" aria-label="Indigo"></button>
<button type="button" class="color-picker-swatch" value="#8b5cf6" aria-label="Violet"></button>
<button type="button" class="color-picker-swatch" value="#ec4899" aria-label="Pink"></button>
<button type="button" class="color-picker-swatch" value="#f43f5e" aria-label="Rose"></button>
</div>
<div class="color-picker-footer">
<span></span>
<span class="flex flex-wrap items-center gap-2">
<button type="button" class="btn btn-ghost btn-sm" data-plf-popover-close>Cancel</button>
<button type="button" class="btn btn-primary btn-sm" data-plf-color-picker-apply>Apply</button>
</span>
</div>
</div>
</div>
</div>
</div><div class="plf:color-picker" data-plf-color-picker>
<label class="plf:field" for="color-disabled-input">
<span class="plf:field-label">Locked color</span>
<input class="plf:input" id="color-disabled-input" name="locked" type="color" value="#64748b" disabled>
</label>
<div hidden>
<div class="plf:popover" data-plf-popover data-plf-align="start">
<div class="plf:field">
<label class="plf:field-label" for="color-disabled-text">Locked color</label>
<div class="plf:input-group">
<button type="button" class="plf:input-group-action plf:input-group-addon" aria-label="Open locked color picker">
<span class="plf:color-picker-preview"></span>
</button>
<input class="plf:input-group-control" type="text" id="color-disabled-text" aria-describedby="color-disabled-help">
</div>
<p class="plf:field-help" id="color-disabled-help">Managed by your administrator.</p>
</div>
<div class="plf:popover-content plf:color-picker-panel" aria-label="Choose locked color" hidden>
<div class="plf:color-picker-swatches">
<button type="button" class="plf:color-picker-swatch" value="#0a0a0a" aria-label="Black"></button>
<button type="button" class="plf:color-picker-swatch" value="#ffffff" aria-label="White"></button>
<button type="button" class="plf:color-picker-swatch" value="#64748b" aria-label="Slate"></button>
<button type="button" class="plf:color-picker-swatch" value="#ef4444" aria-label="Red"></button>
<button type="button" class="plf:color-picker-swatch" value="#f97316" aria-label="Orange"></button>
<button type="button" class="plf:color-picker-swatch" value="#f59e0b" aria-label="Amber"></button>
<button type="button" class="plf:color-picker-swatch" value="#eab308" aria-label="Yellow"></button>
<button type="button" class="plf:color-picker-swatch" value="#84cc16" aria-label="Lime"></button>
<button type="button" class="plf:color-picker-swatch" value="#22c55e" aria-label="Green"></button>
<button type="button" class="plf:color-picker-swatch" value="#14b8a6" aria-label="Teal"></button>
<button type="button" class="plf:color-picker-swatch" value="#06b6d4" aria-label="Cyan"></button>
<button type="button" class="plf:color-picker-swatch" value="#2563eb" aria-label="Blue"></button>
<button type="button" class="plf:color-picker-swatch" value="#6366f1" aria-label="Indigo"></button>
<button type="button" class="plf:color-picker-swatch" value="#8b5cf6" aria-label="Violet"></button>
<button type="button" class="plf:color-picker-swatch" value="#ec4899" aria-label="Pink"></button>
<button type="button" class="plf:color-picker-swatch" value="#f43f5e" aria-label="Rose"></button>
</div>
<div class="plf:color-picker-footer">
<span></span>
<span class="plf:flex plf:flex-wrap plf:items-center plf:gap-2">
<button type="button" class="plf:btn plf:btn-ghost plf:btn-sm" data-plf-popover-close>Cancel</button>
<button type="button" class="plf:btn plf:btn-primary plf:btn-sm" data-plf-color-picker-apply>Apply</button>
</span>
</div>
</div>
</div>
</div>
</div>Live preview
The script shows each applied color from plf:color-picker:change, as a theme editor does.
The preview shows each color you apply.
Accent preview
<div class="color-picker" id="accent-picker" data-plf-color-picker>
<label class="field" for="color-accent-input">
<span class="field-label">Accent color</span>
<input class="input" id="color-accent-input" name="accent" type="color" value="#2563eb">
</label>
<div hidden>
<div class="popover" data-plf-popover data-plf-align="start">
<div class="field">
<label class="field-label" for="color-accent-text">Accent color</label>
<div class="input-group">
<button type="button" class="input-group-action input-group-addon" aria-label="Open accent color picker">
<span class="color-picker-preview"></span>
</button>
<input class="input-group-control" type="text" id="color-accent-text" aria-describedby="color-accent-help">
</div>
<p class="field-help" id="color-accent-help">The preview shows each color you apply.</p>
</div>
<div class="popover-content color-picker-panel" aria-label="Choose accent color" hidden>
<div class="color-picker-swatches">
<button type="button" class="color-picker-swatch" value="#0a0a0a" aria-label="Black"></button>
<button type="button" class="color-picker-swatch" value="#ffffff" aria-label="White"></button>
<button type="button" class="color-picker-swatch" value="#64748b" aria-label="Slate"></button>
<button type="button" class="color-picker-swatch" value="#ef4444" aria-label="Red"></button>
<button type="button" class="color-picker-swatch" value="#f97316" aria-label="Orange"></button>
<button type="button" class="color-picker-swatch" value="#f59e0b" aria-label="Amber"></button>
<button type="button" class="color-picker-swatch" value="#eab308" aria-label="Yellow"></button>
<button type="button" class="color-picker-swatch" value="#84cc16" aria-label="Lime"></button>
<button type="button" class="color-picker-swatch" value="#22c55e" aria-label="Green"></button>
<button type="button" class="color-picker-swatch" value="#14b8a6" aria-label="Teal"></button>
<button type="button" class="color-picker-swatch" value="#06b6d4" aria-label="Cyan"></button>
<button type="button" class="color-picker-swatch" value="#2563eb" aria-label="Blue"></button>
<button type="button" class="color-picker-swatch" value="#6366f1" aria-label="Indigo"></button>
<button type="button" class="color-picker-swatch" value="#8b5cf6" aria-label="Violet"></button>
<button type="button" class="color-picker-swatch" value="#ec4899" aria-label="Pink"></button>
<button type="button" class="color-picker-swatch" value="#f43f5e" aria-label="Rose"></button>
</div>
<div class="color-picker-footer">
<button type="button" class="btn btn-ghost btn-sm btn-square" data-plf-color-picker-eyedropper aria-label="Pick a color from the screen">
<span class="icon icon-color-picker"></span>
</button>
<span class="flex flex-wrap items-center gap-2">
<button type="button" class="btn btn-ghost btn-sm" data-plf-popover-close>Cancel</button>
<button type="button" class="btn btn-primary btn-sm" data-plf-color-picker-apply>Apply</button>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="flex items-center gap-3">
<span class="size-10 rounded-md border" id="accent-sample" style="background: #2563eb"></span>
<span class="text-sm">Accent preview</span>
</div>
<script>
const sample = document.getElementById('accent-sample');
document.getElementById('accent-picker').addEventListener('plf:color-picker:change', (event) => {
sample.style.background = event.detail.value;
});
</script><div class="plf:color-picker" id="accent-picker" data-plf-color-picker>
<label class="plf:field" for="color-accent-input">
<span class="plf:field-label">Accent color</span>
<input class="plf:input" id="color-accent-input" name="accent" type="color" value="#2563eb">
</label>
<div hidden>
<div class="plf:popover" data-plf-popover data-plf-align="start">
<div class="plf:field">
<label class="plf:field-label" for="color-accent-text">Accent color</label>
<div class="plf:input-group">
<button type="button" class="plf:input-group-action plf:input-group-addon" aria-label="Open accent color picker">
<span class="plf:color-picker-preview"></span>
</button>
<input class="plf:input-group-control" type="text" id="color-accent-text" aria-describedby="color-accent-help">
</div>
<p class="plf:field-help" id="color-accent-help">The preview shows each color you apply.</p>
</div>
<div class="plf:popover-content plf:color-picker-panel" aria-label="Choose accent color" hidden>
<div class="plf:color-picker-swatches">
<button type="button" class="plf:color-picker-swatch" value="#0a0a0a" aria-label="Black"></button>
<button type="button" class="plf:color-picker-swatch" value="#ffffff" aria-label="White"></button>
<button type="button" class="plf:color-picker-swatch" value="#64748b" aria-label="Slate"></button>
<button type="button" class="plf:color-picker-swatch" value="#ef4444" aria-label="Red"></button>
<button type="button" class="plf:color-picker-swatch" value="#f97316" aria-label="Orange"></button>
<button type="button" class="plf:color-picker-swatch" value="#f59e0b" aria-label="Amber"></button>
<button type="button" class="plf:color-picker-swatch" value="#eab308" aria-label="Yellow"></button>
<button type="button" class="plf:color-picker-swatch" value="#84cc16" aria-label="Lime"></button>
<button type="button" class="plf:color-picker-swatch" value="#22c55e" aria-label="Green"></button>
<button type="button" class="plf:color-picker-swatch" value="#14b8a6" aria-label="Teal"></button>
<button type="button" class="plf:color-picker-swatch" value="#06b6d4" aria-label="Cyan"></button>
<button type="button" class="plf:color-picker-swatch" value="#2563eb" aria-label="Blue"></button>
<button type="button" class="plf:color-picker-swatch" value="#6366f1" aria-label="Indigo"></button>
<button type="button" class="plf:color-picker-swatch" value="#8b5cf6" aria-label="Violet"></button>
<button type="button" class="plf:color-picker-swatch" value="#ec4899" aria-label="Pink"></button>
<button type="button" class="plf:color-picker-swatch" value="#f43f5e" aria-label="Rose"></button>
</div>
<div class="plf:color-picker-footer">
<button type="button" class="plf:btn plf:btn-ghost plf:btn-sm plf:btn-square" data-plf-color-picker-eyedropper aria-label="Pick a color from the screen">
<span class="plf:icon plf:icon-color-picker"></span>
</button>
<span class="plf:flex plf:flex-wrap plf:items-center plf:gap-2">
<button type="button" class="plf:btn plf:btn-ghost plf:btn-sm" data-plf-popover-close>Cancel</button>
<button type="button" class="plf:btn plf:btn-primary plf:btn-sm" data-plf-color-picker-apply>Apply</button>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="plf:flex plf:items-center plf:gap-3">
<span class="plf:size-10 plf:rounded-md plf:border" id="accent-sample" style="background: #2563eb"></span>
<span class="plf:text-sm">Accent preview</span>
</div>
<script>
const sample = document.getElementById('accent-sample');
document.getElementById('accent-picker').addEventListener('plf:color-picker:change', (event) => {
sample.style.background = event.detail.value;
});
</script>JavaScript
Color Picker needs JavaScript and is an extension: the Full script and Full CSS leave it out. The Full script (pelatform-ui.min.js) and the extension scripts after it start every component on page load, with no code of your own; with Core and single files, the last line starts them. For markup you add later, see Dynamic content.
<link rel="stylesheet" href="pelatform-ui.min.css">
<link rel="stylesheet" href="extensions/color-picker.min.css">
<link rel="stylesheet" href="icons/icons.min.css">
<script src="pelatform-ui.min.js" defer></script>
<script src="extensions/color-picker.min.js" defer></script><link rel="stylesheet" href="core/pelatform-ui-core.min.css">
<link rel="stylesheet" href="components/button.min.css">
<link rel="stylesheet" href="components/form.min.css">
<link rel="stylesheet" href="components/popover.min.css">
<link rel="stylesheet" href="extensions/color-picker.min.css">
<link rel="stylesheet" href="icons/icons.min.css">
<script src="core/pelatform-ui-core.min.js" defer></script>
<script src="components/popover.min.js" defer></script>
<script src="extensions/color-picker.min.js" defer></script>
<script>document.addEventListener('DOMContentLoaded', () => PLF.init());</script><link rel="stylesheet" href="pelatform-ui.prefixed.min.css">
<link rel="stylesheet" href="extensions/color-picker.prefixed.min.css">
<link rel="stylesheet" href="icons/icons.prefixed.min.css">
<script src="pelatform-ui.min.js" defer></script>
<script src="extensions/color-picker.min.js" defer></script><link rel="stylesheet" href="core/pelatform-ui-core.prefixed.min.css">
<link rel="stylesheet" href="components/button.prefixed.min.css">
<link rel="stylesheet" href="components/form.prefixed.min.css">
<link rel="stylesheet" href="components/popover.prefixed.min.css">
<link rel="stylesheet" href="extensions/color-picker.prefixed.min.css">
<link rel="stylesheet" href="icons/icons.prefixed.min.css">
<script src="core/pelatform-ui-core.min.js" defer></script>
<script src="components/popover.min.js" defer></script>
<script src="extensions/color-picker.min.js" defer></script>
<script>document.addEventListener('DOMContentLoaded', () => PLF.init());</script>With ESM imports, import ColorPicker from @pelatform/ui/extensions/color-picker and call use(ColorPicker) before init().
Hooks
| Attribute | Purpose |
|---|---|
data-plf-color-picker |
The color-picker wrapper |
<input type="color"> |
The named native input, which keeps the value and works without the script; its field, the wrapper’s child around it, hides once the text field works |
data-plf-popover |
Holds the field, its first child, and the panel, written hidden. The field holds the preview button, the Popover’s trigger, and the text field: an unnamed, labeled text input, beside the button in one group such as an Input Group. Unless written, the script gives it the placeholder #RRGGBB and no autofill |
data-plf-color-picker-editor |
Optional; on an empty color-picker-editor, places the color area, hue slider and comparison there instead of at the start of the panel |
data-plf-area-label, data-plf-hue-label |
On the wrapper: translated names; Saturation and brightness and Hue by default |
<button value="#2563eb"> |
A swatch: a named button with a hex value in the panel; all swatches share one parent, the swatch grid |
data-plf-color-picker-apply |
The <button type="button"> that commits the draft |
data-plf-color-picker-eyedropper |
Optional <button type="button"> that picks a color from the screen into the draft; hidden where the browser has no EyeDropper API |
| Method | Behavior |
|---|---|
PLF. |
Returns the instance, creating it for valid markup |
PLF. |
Returns the instance or null |
instance. |
Returns {value, draft, open} as lowercase #rrggbb |
instance. |
Sets #rgb or #rrggbb, with or without #; returns false when invalid, unchanged or canceled |
instance., instance. |
Open or close the popup; return false when nothing changes |
instance. |
Removes the generated controls and error, restores the native field, and leaves a Popover instance it did not create |
| Event | When |
|---|---|
plf: |
Before a new value; cancelable |
plf: |
After the new value is kept |
Each event’s detail:
| Property | Value |
|---|---|
instance |
The Color Picker instance |
reason |
trigger or api |
trigger |
The control that set the color, such as a swatch, the apply button or the text field, or null from a method |
previousValue |
The color before, as lowercase #rrggbb |
value |
The new color, as lowercase #rrggbb |
The native input also fires input and change.
Keyboard
| Key | Action |
|---|---|
| Alt + Arrow Down | In the field, opens the popup with focus on the color area |
| Enter | In the field, applies the typed hex; in the color area or hue slider, applies the draft |
| Escape | In the field, restores the current value; in the popup, closes it and discards the draft |
| Arrow keys | In the color area, change saturation and brightness by 1%, or 10% with Shift; in the swatches, move through the grid |
| Page Up, Page Down | In the color area, change brightness by 10% |
| Home, End | In the color area, set the lowest or highest saturation; in the swatches, move to the first or last |
| Enter, Space | On a swatch, apply it and close the popup |
| Variable | Default |
|---|---|
--plf-color-picker-width |
max-content, the width of the swatch grid |
--plf-color-picker-columns |
8 |
--plf-color-picker-swatch-size |
24px |
--plf-color-picker-area-height |
9rem (144px); down to 6rem (96px) in a panel near the edge of a short window |