# Using v-time-picker in ui-template, appears as size 0x0

**URL:** <https://discourse.nodered.org/t/using-v-time-picker-in-ui-template-appears-as-size-0x0/86430>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [14 March 2024 15:52 UTC](https://discourse.nodered.org/t/using-v-time-picker-in-ui-template-appears-as-size-0x0/86430 "2024-03-14T15:52:11Z")\
**Posts on this page:** 4\
**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:** [14 March 2024 15:52 UTC](https://discourse.nodered.org/t/using-v-time-picker-in-ui-template-appears-as-size-0x0/86430/1 "2024-03-14T15:52:11Z")

</div>

I am trying to use v-time-picker in a ui-template. I looked at the first example on [Time Picker Component — Vuetify.js](https://v15.vuetifyjs.com/en/components/time-pickers/) and tried, in a ui-template

```auto
<template>
  <div>
    <v-checkbox v-model="landscape" label="Landscape"></v-checkbox>
    <v-time-picker v-model="picker" :landscape="landscape"></v-time-picker>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        picker: null,
        landscape: false
      }
    }
  }
</script>

```

I specified 6x6 for the template size. In the dashboard I see the Landscape checkbox, and the space under it for the picker, but it is empty. Inspecting the DOM I can see it is there  
`<v-time-picker landscape="false"></v-time-picker>`  
but hovering over that pops up in the dashboard `v-time-picker 0x0`

I see from the docs that the width can be specified so set it to 290 but it made no difference.

Am I missing something?

---

<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:** [14 March 2024 21:14 UTC](https://discourse.nodered.org/t/using-v-time-picker-in-ui-template-appears-as-size-0x0/86430/2 "2024-03-14T21:14:48Z")

</div>

Hello Colin .. the link you shared seems to be from an older version of Vuetify  
From what i read on Github for Vuetify 3, they havent yet implemented the `v-time-picker` component  
but someone has a PR for it ([link](https://github.com/vuetifyjs/vuetify/pull/18153)) and its on the [roadmap](https://vuetifyjs.com/en/introduction/roadmap/)

---

<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:** [14 March 2024 21:41 UTC](https://discourse.nodered.org/t/using-v-time-picker-in-ui-template-appears-as-size-0x0/86430/3 "2024-03-14T21:41:59Z")

</div>

It seems you are right, thanks. It looks like I will have to use the text-input node in time mode for the moment.  
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:** [28 March 2024 21:42 UTC](https://discourse.nodered.org/t/using-v-time-picker-in-ui-template-appears-as-size-0x0/86430/4 "2024-03-28T21:42:40Z")

</div>

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