Timepicker is incorrectly scaled when applying font size to


Topic: Timepicker is incorrectly scaled when applying font size to html

Arsenii pro asked 6 years ago

When I apply

@media only screen and (max-width: 992px) { html { font-size: 80%; } }

to scale the app for mobile devices, time picker fails to scale it's content properly due to using rem/pixels together. Is it possible to do some workaround here? Screenshot attached https://ibb.co/J34y8qY


Arsenii pro answered 6 years ago

The fix that worked for me:

@media only screen and (max-width: 992px) {
  :host >>> .picker .picker__frame {
    min-width: 20rem;
    max-width: 25.39rem;
    width: 23.4375rem;
  }
  :host >>> .clockpicker-plate {
    width: 21.09375rem;
    height: 21.09375rem;
  }

  :host >>> .clockpicker-plate .clockpicker-canvas, .clockpicker-plate .clockpicker-dial {
    width: 21.09375rem;
    height: 21.09375rem;
  }

  :host >>> .clockpicker-plate .clockpicker-dial .clockpicker-tick {
    line-height: 3.125rem;
    width: 3.125rem;
    height: 3.125rem;
  }
}

(all numbers provided for 80% font reduce, for other value they should be recalculated)


Arkadiusz Idzikowski staff commented 6 years ago

Glad it works, thank you for posting the solution.


Arkadiusz Idzikowski staff answered 6 years ago

We will take a closer look at this problem. I'm afraid there is no easy workaround for that, you can try to inspect the component in developer tools and overwrite some styles.

Timepicker is a pro component and according to our system, you use free version. Please, provide us a number of your order or registered email to confirm your access to MDB Pro components and premium support.

You can send it to me on email: a.idzikowski@mdbootstrap.com


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.1
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10 x64
  • Provided sample code: No
  • Provided link: Yes