LeptonX 5.3.0 – Visual and Sidebar Behavior Changes After Upgrade (ABP 10.3) #10641

3 Answer(s)

• 

  0

  maliming created 4 months ago

  Support Team Fullstack Developer

  Hi,

  Two separate things are happening here, and unfortunately downgrading inside ABP v10 won't avoid either of them. Details below.

  1) Sidebar dropdown not expanding

  This is a known LeptonX 5.3.0 regression — same root cause as the support question you already linked (#10622): initSideMenu runs once from SideMenuLayout.OnAfterRenderAsync against an empty #lpx-sidebar because MainMenuProvider.GetMenuAsync is still awaiting, and nothing re-binds the click handlers when the menu finally renders or re-renders.

  Until the patch is out, drop this script block into Pages/_Host.cshtml, after <abp-script-bundle name="@BlazorLeptonXThemeBundles.Scripts.Global"/> and the app.js script tag:

  <script>
  (function () {
      try {
          const allBinds = new WeakMap();
          let timer = null;
  
          const origAdd = EventTarget.prototype.addEventListener;
          EventTarget.prototype.addEventListener = function (type, fn, opts) {
              if (this instanceof Element
                  && this.classList && this.classList.contains('lpx-menu-item')
                  && this.closest && this.closest('#lpx-sidebar')) {
                  let arr = allBinds.get(this);
                  if (!arr) { arr = []; allBinds.set(this, arr); }
                  arr.push({ type: type, fn: fn, opts: opts });
              }
              return origAdd.call(this, type, fn, opts);
          };
  
          function cleanupBinds() {
              document.querySelectorAll('#lpx-sidebar .lpx-menu-item').forEach(function (el) {
                  const arr = allBinds.get(el);
                  if (arr) {
                      arr.forEach(function (b) { el.removeEventListener(b.type, b.fn, b.opts); });
                      allBinds.delete(el);
                  }
              });
          }
  
          const origInitLeptonX = window.initLeptonX;
          window.initLeptonX = function () {
              cleanupBinds();
              return origInitLeptonX.apply(this, arguments);
          };
  
          function reinit() {
              cleanupBinds();
              const fn = window.leptonx
                  && window.leptonx.init
                  && window.leptonx.init.initializers
                  && window.leptonx.init.initializers.get('initSideMenu');
              if (fn) fn();
          }
  
          function check() {
              const items = document.querySelectorAll('#lpx-sidebar .outer-menu-item > .lpx-menu-item');
              if (items.length === 0) return;
              let needs = false;
              for (let i = 0; i < items.length; i++) {
                  if (!allBinds.has(items[i])) { needs = true; break; }
              }
              if (needs) reinit();
          }
  
          function debounced() { clearTimeout(timer); timer = setTimeout(check, 300); }
  
          new MutationObserver(debounced).observe(document.body, { childList: true, subtree: true });
          debounced();
      } catch (err) {
          console.error('[lpx-fix] failed:', err);
      }
  })();
  </script>
  

  The proper upstream fix is already merged into the LeptonX rel-5.3 branch (GitHub PR volosoft/lepton#3487) and will ship with the next LeptonX 5.3.x patch (alongside the next ABP 10.3.x patch). Once you upgrade to that patch, this whole script block can be removed.

  Full background (root cause, repro, impersonation trigger) is in the support question you linked: https://abp.io/support/questions/10622/leptonx-530-blazor-server-menu-collapse-bug

  Note: downgrading v10 minor versions (10.3 → 10.2 / 10.1 / 10.0) does not reliably avoid this. The relevant TypeScript source in pro-side-menu.ts and base-side-menu.ts is identical from 5.0.0 through 5.3.0 — the race exists in earlier versions too, it just may not have been triggered for everyone. Cross-minor downgrades also bring DB / API churn that isn't worth it.

  2) .btn-light --bs-btn-bg color change

  This one is not a bug, it's an intentional theme change in LeptonX 5.x. I verified it directly from the LeptonX repo by comparing bootstrap-dim.css across versions:

  LeptonX 4.1.3 (ABP 9.1.3):  .btn-light { --bs-btn-bg: #eeeeee; }
  LeptonX 5.0.0 (ABP 10.0.0): .btn-light { --bs-btn-bg: #bbb; }
  LeptonX 5.0.1 (ABP 10.0.1): .btn-light { --bs-btn-bg: #bbb; }
  LeptonX 5.1.x:              .btn-light { --bs-btn-bg: #bbb; }
  LeptonX 5.2.x:              .btn-light { --bs-btn-bg: #bbb; }
  LeptonX 5.3.0 (ABP 10.3.0): .btn-light { --bs-btn-bg: #bbb; }
  

  (Just a heads-up: in your post you have the values swapped — 9.1.3 was #eeeeee and 10.3 is #bbb, not the other way around.)

  So the change happened at the LeptonX 4 → 5 major bump as part of the dim-theme palette refresh, and every v10 minor uses the new value. Downgrading inside v10 won't restore the old #eeeeee look.

  If you want the 9.1.x appearance back, override the variable in your own site CSS. LeptonX puts the active style on the <body> as a class (lpx-theme-dim / lpx-theme-light / lpx-theme-dark — set in SideMenuLayout.OnAfterRenderAsync), and bootstrap-{style}.css is loaded conditionally per theme by AppearanceStyles.razor. So the simplest, most reliable override is:

  body.lpx-theme-dim .btn-light {
      --bs-btn-bg: #eeeeee;
      --bs-btn-border-color: #eeeeee;
  }
  

  The body.lpx-theme-dim prefix beats the bare .btn-light selector in the LeptonX bundle on specificity (0,2,0 vs 0,1,0), so load order doesn't matter. Use body.lpx-theme-light / body.lpx-theme-dark if you also want to override those themes. The .btn-light.soft, .btn-light.grey etc. variants follow the same pattern.

  You wrote "Example: ..." in your post — if there are other visual differences besides .btn-light that you want to revert (specific buttons, panels, sidebars, etc.), please share screenshots or the exact selectors and we can give you the matching overrides.

  On the downgrade question

  Practical recommendation: stay on 10.3.0, apply the #10622 workaround for the sidebar, and override the CSS variables you care about. Then upgrade to 10.3.x once the LeptonX 5.3.x patch is out — the workaround can be removed at that point and the CSS override can stay (or not) depending on which look you prefer.

  Thanks

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel

  1
• 

  0

  pareeks@gccontractor.org created 4 months ago

  There are several theme improvements included in this upgrade, across ABP pages. However, some of the updated styles - primarily from /_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/side-menu/css/bootstrap-dim.css are rendering inconsistently and appear visually off in certain areas.

  ABP9

  ABP10

  ---

  ABP9

  ABP10

  ---

  ABP9

  ABP10

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  maliming created 5 months ago

  Support Team Fullstack Developer

  Hi,

  Thanks for the screenshots.

  The visual drift in the first two screenshot pairs comes from the Bootstrap version that ships with LeptonX:

  LeptonX 4.x (ABP 9.x)  → bootstrap "~5.2.0"
  LeptonX 5.x (ABP 10.x) → bootstrap "~5.3.0"
  

  Bootstrap 5.3 is a design refresh under a "minor" version (new .text-bg-* utilities, retuned token defaults, dark-mode nesting). LeptonX itself only changed one token between 4.1.3 and 5.3.0 — --lpx-light went from #eeeeee to #bbb. You can revert that single token to recover the lighter card-header / button look in the first screenshot:

  body.lpx-theme-dim {
      --lpx-light-rgb: 238, 238, 238;
      --lpx-light: #eeeeee;
  }
  

  The second screenshot (.bg-info badge) is purely Bootstrap 5.3's new .text-bg-* rendering — --lpx-info is unchanged in LeptonX itself.

  For the third screenshot the styling is complex enough that we'd rather inspect the actual project than keep reasoning about it from source. Could you put together a minimal reproducible project and email it to liming.ma@volosoft.com?

  • Start from the default ABP 10.3.0 Blazor Server template with the LeptonX SideMenu layout.
  • Add only what's needed to render the broken page from the third screenshot.
  • Strip out unrelated modules, custom auth, business data, etc. — keep dependencies as light as possible.

  Thanks

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel

  1