Topic: Datepicker, Timepicker & Select issues

NitinMistry free asked 5 years ago


Expected behavior

DatePicker should open the component wherever the user maybe in the HTML file.

TimePicker should open the component wherever the user maybe in the HTML file.

Select should not throw mdb js error in console.

Actual behavior

The following is observed on my monitor with 1440x900 resolution...

DatePicker: opens but in the top of the document. If user is some distance down the the HTML document, it just opens in the top. So, if the document isn't too lenghty, user can only see part of the component and not the whole of it. If the document is even lengthier then the entire component is not visible.

TimePicker: Same as above.

Select: after selecting an option the component throws an error... "Uncaught TypeError: Cannot read property 'length' of undefined" in mdb.min.js file.

Resources (screenshots, code snippets etc.)

Please visit link... https://prototype.womb.healthcare.cp-49.webhostbox.net/formly/test/test10.html


Piotr Glejzer staff commented 5 years ago

With date & time picker it's not a bug because these components are positioning absolute so if you will add wrapper with position relative it will be positioning to this div, not to the body. We fixed this problem with that length, can you download our newest package now? Thanks.


MDBootstrap staff answered 4 years ago


This issue got fixed in this MDB jQuery release.

Version 4.8.11 I hope it serves your development needs.


NitinMistry free commented 4 years ago

Thank you very much Piotr. I checked and found the issue to be resolved now.

The only issue is whatever, color customization I had applied earlier doesn't hold true as some/most of the id's have changed. But that's absolutely fine.

Thanks once again.


MDBootstrap staff answered 5 years ago


Hi NitinMistry,

thank you for this prototype. You are using everything correctly so now we can try to make it work as you planned. For now, please hard code picker position to be displayed where you intend. I created a simple solution:

https://mdbootstrap.com/snippets/jquery/pjoter-2-0/849037

We will further investigate the behaviour of this component in the future development to make those component behave consistently.

If you need additional help I am here for you.

Best Regards, Piotr


NitinMistry free commented 5 years ago

Thanks Piotr. I will try this and let you know at the earliest.


MDBootstrap staff commented 5 years ago

You can always make it responsible by checking innerHeight of element and styling it accordingly with jQ. My first workaround for you is the simplest way of implementing it. Sadly not the best.


NitinMistry free commented 5 years ago

Hi Piotr,

I tried your fix and it works in the sample I had shared with you but unfortunately it doesn't work in the production version which I am unable to share right now as my server is having some issues.

But what I've noticed is that the cover div with class 'picker picker--opened' in Datepicker is added to the body while in the Timepicker it is added to the parent element. Hence, the Datepicker component opens fine while the Timepicker component opens in the parent at the top of the document.

I guess if the Timepicker covering div is also created in the body then this should solve this issue. What's your opinion?


Mikołaj Smoleński staff commented 5 years ago

Hi there,

You're right, time picker container option is not working correctly, so in Your case it could be a problem. We'll try to fix it soon.

Best regards


NitinMistry free commented 4 years ago

Hello team, do we have an update to this issue? It's been hanging around for over 4 months now...


MDBootstrap staff commented 4 years ago

Hi, sorry but this issue wasn't fixed yet. This topic is on our to-do list. It will be fixed but not in this release cycle.


NitinMistry free answered 5 years ago


Hi guys,

Can someone please provide an update as to when can this issue be resolved? It has been hanging for 2 months now without any success.


MDBootstrap staff commented 5 years ago

NitinMistry, I will take care of this case. I apologize for not dealing with the topic earlier. I will try to understand the problem from scratch. Can you provide me a simple example of your time picker usage? I would like to see how you implement this component and with this information I will try to create working solution for you. I understand that your project is complicated but if you can create snippet with example of this 2 components initialization I will try to serve you good workaround that will work in default project. I understand that you need you need a window displayed on the top of the page at any height of the scroll.


NitinMistry free commented 5 years ago

Hi Piotr,

Thanks for reverting. Please see below link with simple scrolling body and both controls at the end. Adding container: "body" to the initialization does work for Datepicker but doesn't work for Timepicker. Please see this is created using v4.8.0

https://prototype.womb.healthcare.cp-49.webhostbox.net/formly/test/test10.html


gianlucagiacometti priority answered 5 years ago


Have you tried to set the body as container? I have no problems with datepicker in whatever modals, and it's always centered:

$('.timepicker').pickatime({ container: 'body' })

NitinMistry free commented 5 years ago

Thanks Gianlucagiacometti,

This helped but only partially as it worked for DatePicker but not for TimePicker. TimePicker still opens the component in the top of the document and since the user is at the bottom of the document it is not visible (same as my previous example).

Thanks for your suggestion. Appreciated.

Piotr, now that one of the issues is resolved, what can be done to the TimePicker? Please suggest...


Piotr Glejzer staff commented 5 years ago

This should work with this pickatime method 'container', are you sure is not working?


NitinMistry free commented 5 years ago

No Piotr. As you can see, I've added container: "body" for both but works fine with DatePicker and not with TimePicker. Same behavior is observed in Chrome v74.0.3729.131 as well as Firefox v66.0.5 Please check this link...

https://prototype.womb.healthcare.cp-49.webhostbox.net/formly/html/formly.html?eOB3Mv

The code used to activate the controls is...

$("#dateControl").pickadate({
    container: "body",
    selectYears: 200
});
$("#timeControl").pickatime({
    container: "body",
    twelvehour: false
});

Piotr Glejzer staff commented 5 years ago

Hmm, I thought the problem was with a placing a component relative/absolute to the body but not for disappearing. Can you update your code to the latest version?


NitinMistry free commented 5 years ago

No Piotr, it is still the same. With the container: "body" parameter the DatePicker works fine but TimePicker displays the component at the top of the document while the user is still at the bottom. Same behavior as seen in v4.7.7.

You can verify it at the link below...

http://formly-dev.com/html/formly.html?eOB3Mv


Piotr Glejzer staff commented 5 years ago

We will try to fix as soon as possible this week, we have a lot of tasks and our team is working very hard to help everybody. I will let you know if something will change.


NitinMistry free commented 5 years ago

Thanks Piotr for the update. We look forward to a resolution to this issue at the earliest as possible.


NitinMistry free answered 5 years ago


Hi Piotr,

Sorry I am unable to follow what you're saying.

Regarding Select component yesterday you said the issue has been fixed and that I should download the latest package. Now you say that you have uploaded packages after release. Doesn't that mean that the latest 4.7.7. should have the fix?

As for DatePicker and TimePicker yesterday you asked me to wrap the components in a div having position:relative which I did and now that it doesn't seem to work, you're suggesting something which I am unable to follow. Even your online examples don't mention any such workarounds should the need arise.

I would request you to please show me an example of the actual code which I need to use to ensure that both the components open in the same location where they are embedded in the document.


Piotr Glejzer staff commented 5 years ago

Selected has a fixed after release and we updated packages 4.7.7 about that. I didn't tell you that to wrap a component with a div and a with position relative. I assumed that if you will do that It will be broken because time picker and date picker should have position absolute to body not to the other element.


NitinMistry free commented 5 years ago

I'm afraid we're going around in circles. You are going on telling me that the script error with the Select component has been fixed in v4.7.7 and I'm clearly telling you for the third time that I am already using v4.7.7 and yet the script error has NOT BEEN FIXED.

Anyone can easily see the sample code and realize the the tag for CSS and the tag for the JS both clearly are including relevant files from folders for MDB v4.7.7.

Regarding DatePicker & TimePicker issues, I have also stated earlier that what you are suggesting is not clear to me. If you'd be kind enough to tell me exactly what code I should add to the HTML and/or CSS to fix this, I'd be more than grateful.

I'm sorry if I sound a bit rude, but the current situation is going from bad to worse to hopeless and we're on the verge of a launch of our product.


Piotr Glejzer staff commented 5 years ago

I downloaded the latest package from our FTP server and there is no error in console with this length. I know that was an error about that but we fixed this in this package and we updated packages about this. https://pglejzer.pl/test4/ -- see? no error and I change position top with picker--opened .picker_holder


NitinMistry free commented 5 years ago

Hi Piotr,

Sorry I misunderstood when you said that the Select has been fixed after the v4.7.7 was published, I was expecting a new version to be uploaded. I didn't know that you had fixed it in the same version and uploaded a new package under the same version.

I have downloaded the updated v4.7.7. and the script error is no longer visible in the console.

Regarding the DatePicker & TimePicker components, the issue still persists.

I am sharing the link to my actual product where it is implemented rather than share a dummy page. Because the solution you provided works in the dummy page but not in my actual product.

The product is a survey tool which allows users to create forms with questions of different types. So all questions are created dynamically based on how the author decided to create them. The DatePicker & TimePicker components are in the last question at the bottom of the page.

Original form without your suggested fix... https://prototype.womb.healthcare.cp-49.webhostbox.net/formly/html/formly.html?eOB3Mv

Original form with your suggested fix. When the DatePicker is clicked it jumps to the top and the overlay just gets restricted to the first question's display area . When the TimePicker is clicked nothing happens (I'm assuming the TimePicker is displayed at the top of the page but since it doesn't jump, nothing is visible). https://prototype.womb.healthcare.cp-49.webhostbox.net/formly/html/formly1.html?eOB3Mv

Please take a look at both and suggest what can be done to fix this issue.


Piotr Glejzer staff commented 5 years ago

I will add to our list to do to check that component more specifically. Sorry about that We will try to do it as soon as possible.


NitinMistry free commented 5 years ago

Hi Piotr,

Any updates on when can I expect the fix for both DatePicker and TimePicker?

We're basically just waiting to release our product for want of this fix.


Piotr Glejzer staff commented 5 years ago

did you try use this?

$('.timepicker').pickatime({ container: '#your-element-id' })


NitinMistry free commented 5 years ago

Yes, just tried it... same result, no improvement.

Can you please let me know when can I approximately expect a solution/fix for this issue?


NitinMistry free answered 5 years ago


Hi Piotr,

I wrapped both the DatePicker & TimePicker components with a 'relative' positioned div but no such luck. You can check it out on the same link. https://prototype.womb.healthcare.cp-49.webhostbox.net/formly/test/test10.html

Unless, I'm doing something totally different than what you suggested.

Also, for the Select component, the Orders page shows the latest version as 4.7.7 which is what I'm already using and that's whats giving the 'length' error.


Piotr Glejzer staff commented 5 years ago

Yes, select has a problem with length but we uploaded packages after release about that.
About time picker and date picker should have an overlay to the whole document (body) not to separate div because it will be not showing properly as you see on your example.



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

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.7.7
  • Device: Desktop
  • Browser: Chrome 73.0.3683.103 (64-bit)
  • OS: Windows 8.1
  • Provided sample code: No
  • Provided link: Yes
Tags