NitinMistry free commented 4 years ago

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

MDBootstrap staff commented 4 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 4 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 4 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.

MDBootstrap staff commented 4 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 4 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

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.

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?

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.