Blazorise Select not respecting Size attribute #10774

4 Answer(s)

• 

  0

  AI-Bot created 2 months ago

  Support Team ABP Agent

  • In ABP 10.5.0, the “oversized select” behavior you’re seeing after moving to Blazorise 2.0 is typically not caused by Blazorise <Select Size="..."> itself, but by the theme layer (LeptonX): LeptonX enhances Bootstrap/Blazorise selects (select.form-select) with its own custom wrapper/overlay. In such cases, the visible element may not respect Blazorise’s Size parameter the way you expect.

  • Fix / Workaround options (pick one):

    1. Prefer Bootstrap sizing classes on the Select (works even when a theme overlay is involved)
       Add Class="form-select-sm" (Bootstrap 5) to the select:

  <Select TValue="Guid?"
               Class="form-select-sm"
               @bind-SelectedValue="MyValue">
           ...
       </Select>
  

   If your markup results in `form-select` being applied by the theme/components, `form-select-sm` will apply the small sizing reliably.
  

  2. If you’re using LeptonX and it’s overriding sizes, explicitly style the wrapper Since LeptonX can render a wrapper element as the “visible” select, you may need to target the wrapper in your global-styles.css (or equivalent) and enforce small sizing there (e.g., font-size/padding/height). This is the correct approach if the overlay is what’s actually being displayed.

  3. Disable/avoid the LeptonX custom select overlay for specific selects If your LeptonX version is applying a custom select renderer that doesn’t respect sizing (or has other select-related issues), the safest workaround is to render a native <select> (or otherwise avoid the enhanced path) for the affected places.

  • If this started exactly after moving to Blazorise 2.0 as part of the ABP upgrade path, ensure you also followed ABP’s Blazorise 2.0 upgrade guidance (package alignment matters, and theme behavior changed across versions).

  (Links checked)

  • https://abp.io/docs/10.2/release-info/migration-guides/blazorise-2-0-migration

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Markdown supported.

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

  Save Cancel
• 

  0

  cellero created 2 months ago

  none of the suggestions work. Please provide a solution so that the Size attribute of the blazorise.select continues to work as it previously did.

  Thanks.

  Markdown supported.

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

  Save Cancel
• 

  0

  cellero created 2 months ago

  fixed it myself:

  The root cause (LeptonX silently replacing the native <select> with a custom flex widget) meant every standard Blazorise/Bootstrap sizing approach was always targeting the wrong element. The :has() selector to bridge from the hidden select to the visible display div was the key. To summarise what ended up being needed for future reference: • Blazorise Size="Small" → adds form-select-sm to the hidden <select> ✗ no visual effect • Class="form-select-sm" → same hidden element ✗ • Inline Style= → same hidden element ✗ • Raw <select> → LeptonX still wraps it ✗ • CSS targeting .custom-select-wrapper:has(.form-select-sm) .custom-select-display → targets the visible flex div ✓

  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 2 months ago

  Support Team Fullstack Developer

  Hi,

  You're right, this is a bug on our side. The size class lands on the hidden native <select>, so it never reaches the visible element LeptonX renders.

  You can use this CSS for now (covers both Small and Large):

  .custom-select-wrapper:has(> select.form-select-sm) > .custom-select-display {
      font-size: .765625rem;
      padding: .375rem 1.125rem .375rem .75rem;
      border-radius: var(--bs-border-radius-sm);
      min-height: 0;
  }
  
  .custom-select-wrapper:has(> select.form-select-lg) > .custom-select-display {
      font-size: .984375rem;
      padding: .825rem 1.125rem .825rem 1.5rem;
      border-radius: var(--bs-border-radius-lg);
      min-height: 0;
  }
  

  We'll fix this in the theme in the next LeptonX release so Size works out of the box again and you can drop the CSS above.

  Thanks

  Markdown supported.

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

  Save Cancel