Semantic-Org/Semantic-UI · error

The position you specified is not a valid position

Error message

The position you specified is not a valid position

What it means

In set.position() the resolved position is fed to a switch (popup.js:818-883) covering the nine valid positions ('top left', 'top center', 'top right', 'left center', 'right center', 'bottom left', 'bottom center', 'bottom right'). If none of the cases match, positioning stays undefined and popup.js:884-886 logs error.invalidPosition with the bad value.

Source

Thrown at src/definitions/modules/popup.js:1454

  // transition settings
  duration       : 200,
  transition     : 'scale',

  // distance away from activating element in px
  distanceAway   : 0,

  // number of pixels an element is allowed to be "offstage" for a position to be chosen (allows for rounding)
  jitter         : 2,

  // offset on aligning axis from calculated position
  offset         : 0,

  // maximum times to look for a position before failing (9 positions total)
  maxSearchDepth : 15,

  error: {
    invalidPosition : 'The position you specified is not a valid position',
    cannotPlace     : 'Popup does not fit within the boundaries of the viewport',
    method          : 'The method you called is not defined.',
    noTransition    : 'This module requires ui transitions <https://github.com/Semantic-Org/UI-Transition>',
    notFound        : 'The target or popup you specified does not exist on the page'
  },

  metadata: {
    activator : 'activator',
    content   : 'content',
    html      : 'html',
    offset    : 'offset',
    position  : 'position',
    title     : 'title',
    variation : 'variation'
  },

  className   : {
    active       : 'active',

View on GitHub (pinned to 597843ab84)

Solutions

  1. Use exactly one of the nine supported positions: 'top left', 'top center', 'top right', 'left center', 'right center', 'bottom left', 'bottom center', 'bottom right'.
  2. Check data-position attributes and settings.position for typos, dashes, or British spellings.
  3. If you need a custom placement, pick the closest valid position and tune with offset/distanceAway/jitter instead of inventing a position name.

Example fix

// before
$('.btn').popup({ position: 'top centre', content: 'Hi' }); // typo -> [90]

// after
$('.btn').popup({ position: 'top center', content: 'Hi' });
Defensive patterns

Strategy: type-guard

Validate before calling

var valid = ['top left','top center','top right','left center','right center','bottom left','bottom center','bottom right'];
if (valid.indexOf(cfg.position) === -1) throw new Error('Invalid popup position: ' + cfg.position);
$('.btn').popup(cfg);

Type guard

function isValidPosition(p){ return ['top left','top center','top right','left center','right center','bottom left','bottom center','bottom right'].indexOf(p) !== -1; }

Prevention

When it happens

Trigger: Passing a position string that is not one of the nine supported values: $('.popup').popup({ position: 'middle' }) or .popup('set position', 'topside'); also triggered when settings.position or data-position holds an unsupported value after RTL swapping.

Common situations: Typos in the position setting ('top centre' with British spelling, 'top-center' with a dash, 'top middle'); using CSS-y names like 'absolute'/'relative'; data-position attributes copied from another library.

Related errors


AI-assisted analysis of Semantic-Org/Semantic-UI@597843ab84 (2026-08-13). Data as JSON: /api/errors/bf73161f2462bcfd. Report an issue: GitHub.