vuetifyjs / vuetifyjs/vuetify

[Feature Request] VAppBar and VToolbar should be able to calculate and emit it's own height

Open
#19,632 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

C: VAppBar C: VLayoutItem C: VToolbar T: enhancement
Dominant language
TypeScript
Stars
41k
Forks
7.1k
Avg merge
1d 21h
Merged PRs (30d)
11

Description

Problem to solve

This is something that I've ran into frequently. I often need to change the contents of my VToolbar or VAppBar dynamically depending on the height of the contents with in it. That way I might swap out contents depending on my route by using something like use PortalVue, or by some other means.

If you want to use VAppBar or VToolbar in a layout (and I am using VToolbar as a Layout Item for reasons) it's best to define the height of the element so it can pass that information along to the layout system. But that also means that if you want to automatically adjust the size of the VAppBar or VToolbar depending on it's contents, you have to handle that yourself, which can really make things difficult if you don't want to interfere with the styles built into Vuetify.

Proposed solution

Make it an option for vuetify to apply a resize observer to the container v-toolbar__content in the toolbar components via a prop. Get the height of the element with the v-toolbar__content class (I'm not saying use a class selector, that's dumb. That's just how I'm identifying the element you should use) and also get the border and padding heights that exist outside of the the observed element within the component (so you can get the actual height of the toolbar which is content height + padding height + border height). Emit that to the layout system if applicable and expose an event on the component so if you need to wrap VToolbar in VLayoutItem, you can wire them together.

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 with the VAppBar and VToolbar component implementations and trace how VLayoutItem receives layout sizing information. Then inspect the v-toolbar__content element and the existing layout integration points, including the proposed event and prop behavior. Done means dynamic content height can be observed, the full component height is reported, and the result can be connected to VLayoutItem.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 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.