{"record":{"id":"cd0bab0c66d40a3f","repo":"Semantic-Org/Semantic-UI","slug":"sticky-element-is-larger-than-its-container-canno","errorCode":null,"errorMessage":"Sticky element is larger than its container, cannot create sticky.","messagePattern":"Sticky element is larger than its container, cannot create sticky\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"src/definitions/modules/sticky.js","lineNumber":964,"sourceCode":"\n  // Called when element is stuck to viewport\n  onStick        : function(){},\n\n  // Called when element is unstuck from viewport\n  onUnstick      : function(){},\n\n  // Called when element reaches top of context\n  onTop          : function(){},\n\n  // Called when element reaches bottom of context\n  onBottom       : function(){},\n\n  error         : {\n    container      : 'Sticky element must be inside a relative container',\n    visible        : 'Element is hidden, you must call refresh after element becomes visible. Use silent setting to surpress this warning in production.',\n    method         : 'The method you called is not defined.',\n    invalidContext : 'Context specified does not exist',\n    elementSize    : 'Sticky element is larger than its container, cannot create sticky.'\n  },\n\n  className : {\n    bound     : 'bound',\n    fixed     : 'fixed',\n    supported : 'native',\n    top       : 'top',\n    bottom    : 'bottom'\n  }\n\n};\n\n})( jQuery, window, document );\n","sourceCodeStart":946,"sourceCodeEnd":978,"githubUrl":"https://github.com/Semantic-Org/Semantic-UI/blob/597843ab84d565cccfd8fd7719416350ae73e734/src/definitions/modules/sticky.js#L946-L978","documentation":"Emitted by Sticky's checkErrors() (sticky.js:163-165) when module.cache.element.height > module.cache.context.height — the sticky element is taller than its container/context. There is no room for it to travel while scrolling, so Sticky calls module.reset() and aborts stickiness. It is a console.error (sticky.js:776), not thrown.","triggerScenarios":"A sticky element whose rendered height exceeds the context height — e.g. a tall sidebar or large ad inside a short context — at the moment checkErrors runs.","commonSituations":"Responsive layouts where content collapses into a tall narrow column, late-loading images/ads inflating element height after init, very short context (small banner area).","solutions":["Shorten the element's content or let it scroll internally so it fits within the context.","Choose a taller context element via settings.context.","Call $('.sticky').sticky('refresh') after images/content finish loading so heights are recomputed.","Reconsider whether sticky positioning is appropriate for that element."],"exampleFix":"// before\n$('.tall-ad').sticky(); // ad taller than its context -> sticky disabled\n// after\n$(window).on('load', function(){\n  $('.tall-ad').sticky('refresh'); // recompute after images load\n});","handlingStrategy":"validation","validationCode":"// Verify the element is shorter than its context before initializing.\nfunction safeSticky($el, $ctx){\n  if ($el.outerHeight() > $ctx.outerHeight()) {\n    console.warn('Element taller than context; sticky disabled by design.');\n    return;\n  }\n  $el.sticky({ context: $ctx });\n}\n// call after layout settles:\n$(window).on('load', function(){ $('.sticky').sticky('refresh'); });","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Call sticky('refresh') after images/fonts/async content load so cached heights are correct.","Avoid making very tall elements sticky; give them a max-height and internal scroll instead.","Pick a context that is genuinely taller than the sticky element."],"tags":["sticky","layout","responsive"],"backgroundTag":null,"analyzedSha":"597843ab84d565cccfd8fd7719416350ae73e734","analyzedAt":"2026-08-13T01:44:23.827Z","schemaVersion":2},"datasetVersion":"2026-08-13T04:17:16.726Z"}