Semantic-Org/Semantic-UI · warning

Element is hidden, you must call refresh after element becom

Error message

Element is hidden, you must call refresh after element becomes visible. Use silent setting to surpress this warning in production.

What it means

Semantic UI Sticky warning logged at sticky.js:161 inside checkErrors() when the sticky element is hidden at the moment stickiness is evaluated. Sticky needs measurable dimensions to position; a hidden element can't be measured, so the module warns the developer to refresh once the element becomes visible. Use silent:true to suppress in production.

Source

Thrown at src/definitions/modules/sticky.js:961

  // Called on each scroll
  onScroll       : function(){},

  // Called when element is stuck to viewport
  onStick        : function(){},

  // Called when element is unstuck from viewport
  onUnstick      : function(){},

  // Called when element reaches top of context
  onTop          : function(){},

  // Called when element reaches bottom of context
  onBottom       : function(){},

  error         : {
    container      : 'Sticky element must be inside a relative container',
    visible        : 'Element is hidden, you must call refresh after element becomes visible. Use silent setting to surpress this warning in production.',
    method         : 'The method you called is not defined.',
    invalidContext : 'Context specified does not exist',
    elementSize    : 'Sticky element is larger than its container, cannot create sticky.'
  },

  className : {
    bound     : 'bound',
    fixed     : 'fixed',
    supported : 'native',
    top       : 'top',
    bottom    : 'bottom'
  }

};

})( jQuery, window, document );

View on GitHub (pinned to 597843ab84)

Solutions

1. Call $('.el').sticky('refresh') once the element becomes visible.
2. Defer $('.el').sticky() initialization until the parent is shown (e.g. on modal 'onVisible').
3. Set silent:true to suppress the warning in production once you have wired refresh correctly.

Example fix

// before
$('.ui.sticky').sticky({ context: '#content' }); // ancestor hidden
// after
$modal.modal({ onVisible: function(){ $('.ui.sticky').sticky('refresh'); } });

function ensureVisibleThenSticky($el, opts) {
  if (!$el.is(':visible')) {
    var obs = new MutationObserver(function(){
      if ($el.is(':visible')) { $el.sticky(opts); obs.disconnect(); }
    });
    obs.observe(document.body, { attributes: true, subtree: true, attributeFilter: ['class','style','hidden'] });
    return;
  }
  $el.sticky(opts);
}

function isStickyElementVisible($el) { return $el.length > 0 && $el.is(':visible'); }

When it happens

Trigger: Initializing .sticky() on an element inside a hidden modal, collapsed accordion, display:none tab, or any zero-size ancestor; toggling the element's visibility at runtime without calling $('.el').sticky('refresh').

Common situations: Lazy-rendered panels; SPA route changes; modals that initialize sticky before opening; CSS hiding via parent opacity/display.

Related errors

• Element is hidden, you must call refresh after element becom
• Sticky element must be inside a relative container
• Console cannot be restored, most likely it was overwritten o
• The method you called is not defined.
• The before send function has aborted the request

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