search

vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.7k stars 6.95k forks source link

[Bug Report][3.4.9] Date Picker width attribute cuts off date-picker content #18951

Open hdrodel opened 9 months ago

hdrodel commented 9 months ago

Environment

Vuetify Version: 3.4.9 Vue Version: 3.4.0 Browsers: Chrome 120.0.0.0 OS: Windows 10

Steps to reproduce

when setting a width of 300 to the v-date-picker, the date-picker will be cut off on one side. The default size is way bigger than the v2 one and in a v-menu component it uses too much space. There doesn't seem to be a easy way to make the size smaller

Expected Behavior

The datepicker gets smaller but is still fully visible

Actual Behavior

the datepicker actually get cropped off

Reproduction Link

https://play.vuetifyjs.com/#...

milosmih-qcerris commented 8 months ago

Do we have any info on this one? Tbh, this is also affecting UX on a project I am working on.

LeWAIEN commented 8 months ago

Any updates? Im having the same problem in my project

johnleider commented 7 months ago

I have a fix going up for #19202 which improves this, but only down to 328px. I'm not going to close this issue so we can maybe explore other ways to make this better, but there is only so small we can go.

laurentfirdion commented 4 months ago

Thanks for the effort but the fix is far from the good responsiveness achieved with the previous version (in vuetify v2). I don't understand when you says "there is only so small we can go" since the previous version was able to go way down 328px.

johnleider commented 4 months ago

I don't understand when you says "there is only so small we can go" since the previous version was able to go way down 328px.

Time and resources.

mlebrasseur commented 2 months ago

I did a style workaround for anyone having the same issue.

<template>
  <v-date-picker
    show-adjacent-months hide-header
    id="date-picker"
    width="100%"
  ></v-date-picker>
<template>

<style>
  #date-picker .v-date-picker-controls {
    justify-content: end;
    padding-inline-start: 0px;
    padding-inline-end: 0px;
    transform: scale(0.9, 0.9);
  }
  #date-picker .v-date-picker-month {
    transform: scale(0.7804, 0.7804);
    margin: -36px 0 -36px 0;
  }
<style>

I used the CSS scale() function.

For my case, I wanted to put the v-date-picker in a v-navigation-drawer. VNavigationDrawer = 256px VDatePicker = 328px

Enjoy! 👊