Strange behaviour of Datepicker

QuestionsStrange behaviour of Datepicker
pcattani asked 3 years ago

I have three datepickers I’m using in a modal edit form.  The first two datepickers work fine, but the third one doesn’t work.

When I try to use the third datepicker, I can browse a new date normally, but when I click on the date, the form scrolls to the top of the screen and the new date is not selected.

I think this may have something to do with it being a field which is offscreen and you have to scroll down to use it.

I am styling the form grid heights manually using:

.FormGrid {
height: 800px !important;
}

So that the scroll bars appear.  This is the only relevant information I can think of at this time.

 

Any ideas how to fix?

 

 

 

8 Answers
pcattani answered 3 years ago

Update:   I changed another field after the first two dates to a datepicker, and it behaves normally.  So this lends more credence to the idea that it has something to do with the form being scrolled down.   One other thing: I was wrong, the date on the weird datepicker *does* update when it is selected.  It\\\’s just that the form scrolls to the top for some reason.

Abu Ghufran Staff answered 3 years ago

Hi,

This is a known issue and a quick fix is to set dialog modal to false:

$opt["add_options"]["modal"] = false;
$opt["edit_options"]["modal"] = false;
...
$g->set_options($opt);

Update: New solution retains modal dialog behavior and enable datepickers:

$opt["add_options"]["jqModal"] = false;
$opt["edit_options"]["jqModal"] = false;
...
$g->set_options($opt);
_________________________
Abu Ghufran - Dev Team
Grid 4 PHP Framework
 
pcattani answered 3 years ago

Hi Abu,   Thanks for the reply.  Yes, that does fix the problem.  Unfortunately, it\’s not a great idea to have a click outside the form cancel the form.  Users could have entered a lot of information in that area.   Is there any javascript hack you\’re aware of that would prevent a click from closing the form?   Thanks again,   pcattani

Abu Ghufran Staff answered 3 years ago

After your request, i reviewed the solution further and found a better solution.

Instead of above said “modal” property, if you set “jqModal” following to false, it will still behave as modal with working datepickers.

$opt["add_options"]["jqModal"] = false; 
$opt["edit_options"]["jqModal"] = false;
// ...
$g->set_options($opt);

This change is incorporated in latest build now as well.

Ref: https://stackoverflow.com/a/12282798/385377

_________________________
Abu Ghufran - Dev Team
Grid 4 PHP Framework
 
pcattani answered 3 years ago

That works perfectly!   Thanks for looking in to this and thanks for the update.  Very much appeciated!

pcattani answered 3 years ago

Just another note in case this helps anyone else.

 

I had the same problem with the form jumping to the top when I used the Autocomplete feature for fields and then clicked on a selection to select it.  I solved the problem the same way as above:

$opt[“edit_options”][“modal”] = false;

 

 

Saurabh Arora answered 3 years ago

But it’s not working me ,on click datepicker ,I have tried both way

(a) form is closing without filling other fields.

$grid["edit_options"]["modal"] = false;

(b) while after putting

$opt["edit_options"]["jqModal"] = false;

bottom fields have been invisible due to missed scrolling as showing image

View post on imgur.com

pcattani answered 3 years ago

Hi.  I also had this problem.

 

You need to do two things:

 

On your edit settings, you need to set the height to ‘auto’.   For example:

$edit_settings = array(‘width’=>’600’, ‘height’=>’auto’,’resize’=>false,’position’=>’center’,’closeAfterEdit’=>true,’jqModal’=>false);

 

Then you need to style the FormGrid to a sufficient heigh.  For example:

//You need this so scroll bars are activated on the modal edit forms
.FormGrid {
height: 800px !important;
}

Your Answer

6 + 17 =

Login with your Social Id:

OR, enter

Attach code here and paste link in question.
Attach screenshot here and paste link in question.



How useful was this discussion?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate it.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?