# D2 Problem with v\_select in a template which wants to use too much height

**URL:** <https://discourse.nodered.org/t/d2-problem-with-v-select-in-a-template-which-wants-to-use-too-much-height/97480>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [8 June 2025 13:08 UTC](https://discourse.nodered.org/t/d2-problem-with-v-select-in-a-template-which-wants-to-use-too-much-height/97480 "2025-06-08T13:08:19Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [8 June 2025 13:08 UTC](https://discourse.nodered.org/t/d2-problem-with-v-select-in-a-template-which-wants-to-use-too-much-height/97480/1 "2025-06-08T13:08:19Z")

</div>

I have a v\_select in a ui\_template which, on initial load looks like  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/2/128cbf17b2c80a4e74f3f6293b464eca8c965f12.png)  
which is fine. On making a selection I see this  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/d/8d411e3de1292fbf85c657258a32bfa3811ef73f.png)

The label has moved up into the border, which is as it should be, but the top of the text is chopped off. I have tried putting a top margin on the div, but that moves the whole thing down so that the lower edge moves into cell below. It seems that the v\_select is sized to take up the whole row height, but that the text extends off the top of the cell.  
I have tried understanding the CSS but it is beyond my knowledge boundaries so any help would be appreciated.  
All I have in the template is

```auto
<template>
    <div>
        <v-select
            label="States"
            :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
            variant="outlined"
            hide-details
            >
        </v-select>
    </div>
</template>

```

To see the problem place the widget at the top of the group.

```auto
[{"id":"754f20a403568cb8","type":"ui-template","z":"997da33a0beedade","group":"4f87bd59a15b847e","page":"","ui":"","name":"Test template","order":1,"width":0,"height":0,"head":"","format":"<template>\n <div>\n <v-select\n label=\"States\"\n :items=\"['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']\"\n variant=\"outlined\"\n hide-details\n >\n </v-select>\n </div>\n</template>\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":450,"y":60,"wires":[[]]},{"id":"4f87bd59a15b847e","type":"ui-group","name":"test","page":"c6ff182a4185f2f2","width":"6","height":"1","order":3,"showTitle":false,"className":"","visible":"true","disabled":"false"},{"id":"c6ff182a4185f2f2","type":"ui-page","name":"Test page","ui":"ID-BASE-1","path":"/testpage","icon":"home","layout":"grid","theme":"f9b6670b127dc219","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":5,"className":"","visible":"true","disabled":"false"},{"id":"ID-BASE-1","type":"ui-base","name":"Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-control","ui-notification","ui-gauge-classic"],"showPathInSidebar":false,"headerContent":"page","titleBarStyle":"default","showReconnectNotification":false,"notificationDisplayTime":"1","showDisconnectNotification":true,"allowInstall":true},{"id":"f9b6670b127dc219","type":"ui-theme","name":"FlowForge Theme","colors":{"surface":"#152a47","primary":"#005aff","bgPage":"#ffffff","groupBg":"#ffffff","groupOutline":"#cc3e3e"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px","density":"default"}}]

```

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [8 June 2025 13:18 UTC](https://discourse.nodered.org/t/d2-problem-with-v-select-in-a-template-which-wants-to-use-too-much-height/97480/2 "2025-06-08T13:18:48Z")

</div>

Are you on dashboard v 1.24? Try updating to 1.24.1.  
Mind you, I think the change to 1.24.0 introduced this problem with other widgets, and the fix for 1.24.1 was to confine the change to templates. So not hopeful

I see 1.24.2 is available now too, not installed that one yet.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [8 June 2025 13:27 UTC](https://discourse.nodered.org/t/d2-problem-with-v-select-in-a-template-which-wants-to-use-too-much-height/97480/3 "2025-06-08T13:27:18Z")

</div>

I am on the latest

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [8 June 2025 13:52 UTC](https://discourse.nodered.org/t/d2-problem-with-v-select-in-a-template-which-wants-to-use-too-much-height/97480/4 "2025-06-08T13:52:39Z")

</div>

Does this custom class and CSS work?

Edit - sorry I changed the css selector to 'morespace' but left the class as 'padtop' so mismatched.

```auto
[{"id":"754f20a403568cb8","type":"ui-template","z":"5b51326bcca478fd","group":"4f87bd59a15b847e","page":"","ui":"","name":"Test template","order":1,"width":0,"height":0,"head":"","format":"<template>\n <div>\n <v-select\n label=\"States\"\n :items=\"['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']\"\n variant=\"outlined\"\n hide-details\n >\n </v-select>\n </div>\n</template>\n<style>\n .morespace > div:first-of-type {\n margin-top: 10px;\n }\n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"morespace","x":510,"y":460,"wires":[[]]},{"id":"4f87bd59a15b847e","type":"ui-group","name":"test","page":"c6ff182a4185f2f2","width":"6","height":"1","order":1,"showTitle":false,"className":"","visible":"true","disabled":"false"},{"id":"c6ff182a4185f2f2","type":"ui-page","name":"Test page","ui":"e9c974f7c1d080d1","path":"/testpage","icon":"home","layout":"grid","theme":"f9b6670b127dc219","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":5,"className":"","visible":"true","disabled":"false"},{"id":"e9c974f7c1d080d1","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":1,"showDisconnectNotification":true},{"id":"f9b6670b127dc219","type":"ui-theme","name":"FlowForge Theme","colors":{"surface":"#152a47","primary":"#005aff","bgPage":"#ffffff","groupBg":"#ffffff","groupOutline":"#cc3e3e"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px","density":"default"}}]

```

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [8 June 2025 14:17 UTC](https://discourse.nodered.org/t/d2-problem-with-v-select-in-a-template-which-wants-to-use-too-much-height/97480/5 "2025-06-08T14:17:24Z")

</div>

the css `overflow-y: auto` on the widget class chops the label off  
you can also use :

```auto
  .nrdb-ui-widget.nrdb-ui-template {
        overflow-y: unset;
    }

```

.. to unset it .. dont know if this could cause any other layout issues for other components though since i dont use D2 extensively to test

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [8 June 2025 14:50 UTC](https://discourse.nodered.org/t/d2-problem-with-v-select-in-a-template-which-wants-to-use-too-much-height/97480/6 "2025-06-08T14:50:05Z")

</div>

@jbudd, that is the sort of thing I tried previously. The problem is that it pushes the select box down into the next widget below, rather than shrinking the box so that it fits in the space that it should.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [8 June 2025 14:56 UTC](https://discourse.nodered.org/t/d2-problem-with-v-select-in-a-template-which-wants-to-use-too-much-height/97480/7 "2025-06-08T14:56:38Z")

</div>

> [@UnborN](#):
>
> you can also use :
> 
> ```auto
> .nrdb-ui-widget.nrdb-ui-template {
> overflow-y: unset;
> }
> 
> ```

That does allow the text to show, the problem is that I run with a very compact theme so if there is, for example, a button above it then the text overlaps the button.

Ideally I want to shrink the select box so that it fits in the row height when the text is showing.

Edit, I don't mean it should dynamically shrink, but it should be smaller from the start.

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [8 June 2025 15:45 UTC](https://discourse.nodered.org/t/d2-problem-with-v-select-in-a-template-which-wants-to-use-too-much-height/97480/8 "2025-06-08T15:45:38Z")

</div>

possibly adding some top padding to the label to make it more compact

```auto
    .nrdb-ui-widget.nrdb-ui-template {
        overflow-y: unset;
    }
    .v-field--active .v-label.v-field-label {
        visibility: hidden;
        padding-top: 10px;
    }

```

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [8 June 2025 20:45 UTC](https://discourse.nodered.org/t/d2-problem-with-v-select-in-a-template-which-wants-to-use-too-much-height/97480/9 "2025-06-08T20:45:13Z")

</div>

Magic! That moves the text down into the widget space.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/d/dd9b73550dcaebf1eab37b89266580b5e18e9c45.png)

And it fixes the same issue on the built in ui-dropdown node!  
In fact the overflow-y setting is no longer needed, just the second part, presumably because it is no longer overflowing.

I will have to inspect the CSS and make sure I understand what it does so that next time I will have a better chance of sorting a problem myself.

Many thanks.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [1 July 2025 08:23 UTC](https://discourse.nodered.org/t/d2-problem-with-v-select-in-a-template-which-wants-to-use-too-much-height/97480/10 "2025-07-01T08:23:55Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.