parent
a8f8840854
commit
7e5b99aa84
|
@ -10,7 +10,14 @@ export default function positionDropdown(element, opts) {
|
||||||
|
|
||||||
// Updates the position of the dropdown
|
// Updates the position of the dropdown
|
||||||
const updatePosition = opts => {
|
const updatePosition = opts => {
|
||||||
const { anchor, align, maxWidth, useAnchorWidth, offset = 5 } = opts
|
const {
|
||||||
|
anchor,
|
||||||
|
align,
|
||||||
|
maxHeight,
|
||||||
|
maxWidth,
|
||||||
|
useAnchorWidth,
|
||||||
|
offset = 5,
|
||||||
|
} = opts
|
||||||
if (!anchor) {
|
if (!anchor) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
@ -31,10 +38,11 @@ export default function positionDropdown(element, opts) {
|
||||||
styles.top = anchorBounds.top
|
styles.top = anchorBounds.top
|
||||||
} else if (window.innerHeight - anchorBounds.bottom < 100) {
|
} else if (window.innerHeight - anchorBounds.bottom < 100) {
|
||||||
styles.top = anchorBounds.top - elementBounds.height - offset
|
styles.top = anchorBounds.top - elementBounds.height - offset
|
||||||
styles.maxHeight = 240
|
styles.maxHeight = maxHeight || 240
|
||||||
} else {
|
} else {
|
||||||
styles.top = anchorBounds.bottom + offset
|
styles.top = anchorBounds.bottom + offset
|
||||||
styles.maxHeight = window.innerHeight - anchorBounds.bottom - 20
|
styles.maxHeight =
|
||||||
|
maxHeight || window.innerHeight - anchorBounds.bottom - 20
|
||||||
}
|
}
|
||||||
|
|
||||||
// Determine horizontal styles
|
// Determine horizontal styles
|
||||||
|
|
|
@ -14,6 +14,7 @@
|
||||||
export let align = "right"
|
export let align = "right"
|
||||||
export let portalTarget
|
export let portalTarget
|
||||||
export let maxWidth
|
export let maxWidth
|
||||||
|
export let maxHeight
|
||||||
export let open = false
|
export let open = false
|
||||||
export let useAnchorWidth = false
|
export let useAnchorWidth = false
|
||||||
export let dismissible = true
|
export let dismissible = true
|
||||||
|
@ -64,6 +65,7 @@
|
||||||
use:positionDropdown={{
|
use:positionDropdown={{
|
||||||
anchor,
|
anchor,
|
||||||
align,
|
align,
|
||||||
|
maxHeight,
|
||||||
maxWidth,
|
maxWidth,
|
||||||
useAnchorWidth,
|
useAnchorWidth,
|
||||||
offset,
|
offset,
|
||||||
|
|
|
@ -13,12 +13,7 @@
|
||||||
|
|
||||||
<div bind:this={popoverAnchor} class="help">
|
<div bind:this={popoverAnchor} class="help">
|
||||||
<button class="openMenu" on:click={show}>Help</button>
|
<button class="openMenu" on:click={show}>Help</button>
|
||||||
<Popover
|
<Popover maxHeight={1000} bind:show bind:hide anchor={popoverAnchor}>
|
||||||
class="helpMenuPopoverOverride"
|
|
||||||
bind:show
|
|
||||||
bind:hide
|
|
||||||
anchor={popoverAnchor}
|
|
||||||
>
|
|
||||||
<nav class="helpMenu">
|
<nav class="helpMenu">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<Heading size="XS">Help resources</Heading>
|
<Heading size="XS">Help resources</Heading>
|
||||||
|
|
Loading…
Reference in New Issue