D2 Problem with v_select in a template which wants to use too much height

Dashboard
1

I have a v_select in a ui_template which, on initial load looks like
image
which is fine. On making a selection I see this
image

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

<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.

[{"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"}}]
2

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.

3

I am on the latest

4

Does this custom class and CSS work?

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

[{"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"}}]
5

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

  .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

6

@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.

7

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.

8

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

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

Magic! That moves the text down into the widget space.
image

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.

1 Like