nuxt / nuxt/ui

How to use a UBanner with a layout based on UDashboardGroup?

Open
#4,574 8 comments 6 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

v5
Dominant language
TypeScript
Stars
6.9k
Forks
1.1k
Avg merge
1d 7h
Merged PRs (30d)
57

Description

Description

Hi 👋 First of all, thank you for your awesome library — it's been a pleasure to use so far!

I'm trying to use a UBanner in a layout based on UDashboardGroup, which itself contains a UDashboardSidebar and a UDashboardPanel with a UDashboardNavbar.

The issue I'm running into is that the UBanner floats above the layout instead of pushing the UDashboardGroup down. Its height isn't accounted for, so it overlaps with the rest of the layout.

Is there a recommended way to make the layout adapt to the presence of a UBanner, so it pushes the dashboard content accordingly?

Thanks again for your great work!

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reading the UBanner, UDashboardGroup, UDashboardSidebar, UDashboardPanel, and UDashboardNavbar component entry points and their layout documentation. Reproduce the described composition, then determine how the layout should account for the banner height; done means the banner no longer overlaps the dashboard content and the behavior is covered by the relevant test or example.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.