ITADN

[Sidebar] `margin-right` and `padding-right` not removed on dynamic sidebar

#3434Openghabriel25 创建于 2026-01-15
type/bugstate/awaiting-investigationstate/awaiting-triage
G
ghabriel25commented
# Bug Report I'm using dynamic sidebar with [Alpine JS](https://alpinejs.dev/) to toggle the class like this ```blade <div class="ui left vertical menu" x-bind:class="{ 'sidebar': isTablet, 'fixed': ! isTablet }"> ... </div> ``` and add event listener to window ```js let mediaQuery = window.matchMedia('(max-width: 991px)') let isTablet = mediaQuery.matches mediaQuery.addEventListener('change', (e) => isTablet = e.matches) ``` Whenever I change the window's width to 991px or below that, the `.left.fixed.menu` becomes `.left.sidebar.menu` (which is hidden by default). Then I open the sidebar just like the example provided by documentation ```js $('.ui.sidebar').sidebar({ transition: 'overlay', mobileTransition: 'overlay', scrollLock: true, blurring: true }).sidebar('toggle') ``` This add `margin-right: 15px` to the `.pusher` element (which is my content's container) and add `padding-right: calc(15px)` to `.top.fixed.menu` where sidebar toggler located. This is the html structure on body element from the top - `.left.menu` either `.fixed` or `.sidebar` - `.top.fixed.menu` (hidden when `isTablet` false) - `.pusher` ### Problem This `margin-right` and `padding-right` is not removed if I'm not closing the sidebar using toggle instead just change the window's width. I did try to close the sidebar manually when then window event triggered, however the styles, class `.locked` on body, class `.blurring.dimmed` on `.pusher` element still persist. ## Version 2.9.4
0 条评论