Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Date Picker - Layout Issues/Bugs?

ApocDev pro asked 6 years ago


Using the DatePicker (and other components, like Selects, etc) have some really odd layout.

I'm not sure if these are intentional, or just leftovers from something old? Currently, for the date picker, in order to make the default layout like every other form input we have to do the following:

styles.css:

.mydp {
line-height: unset !important; // MDB: 1.8 -> 1.1 -> etc. 1.5 is default IIRC
display: block !important; // MDB: inline-block
}

Then every time we use the datePicker, we also have to forcefully set other values on the "options" input:


export const defaultDatePickerOpts: IMyOptions = {
// Not sure where/why these are even changeable when using what is effectively an mdbInputDirective internally
height: null,
selectionTxtFontSize: null
};

So, with that said, why are these options here?

Also, secondarily, is there a way to *not* show the input, and instead just have the actual date picker modal shown in it's place? Sort of like a "static calendar" instead of a popup?

 

PS; The post editor here is pretty broken. The "code" stuff completely breaks down if you attempt to edit anything before posting.


Arkadiusz Idzikowski staff answered 6 years ago


Could you provide a screenshot showing the problems with layout?

The options input have some default values, so it shouldn't be necessary for you to update it unless you need to change some of them. 

Unfortunately in current version there is no way to display date picker without input element.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.0.0
  • Device: Desktop/Mobile
  • Browser: Chrome/Firefox
  • OS: Windows
  • Provided sample code: No
  • Provided link: No