Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Day cell aligment depends on user agent stylesheet [Bug] #608

Closed
asavartsov opened this issue May 25, 2021 · 0 comments · Fixed by #610
Closed

Day cell aligment depends on user agent stylesheet [Bug] #608

asavartsov opened this issue May 25, 2021 · 0 comments · Fixed by #610

Comments

@asavartsov
Copy link
Contributor

asavartsov commented May 25, 2021

Vue2-datepicker version: 3.9.0
Vue version: 2.6.12
Browser: Google Chrome

In Google Chrome the datepicker depends on default user agent CSS with vertical-align property on tbody element which defaults to middle. This dependency shoud be avoided to not clash with user defined styles for tables. Also UA styles may change over time. Setting global vertical-align to tables also mangle with the datepicker. For example, my current project has sets baseline on tbody, which breaks aligment fo date cells.

Steps to reproduce

  1. Override vertical-align property on tbody or tr to something other than middle
  2. Open datepicker

Reproduction Link or Source Code

tbody {
  vertical-align: baseline;
}

The code

.#{$namespace}-table {
  /* ... */
  vertical-align: middle;
}

may have no effect in Google Chrome because it overrides it in tbody with own stylesheet and td inherits this propery from tbody.

image

Expected behavior
Rendering of datepicker does not change

Actual behavior
Date cells change alignment
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant