Calendar covers the field box

asked on August 17, 2017

I have a client that has a required Date of Birth field in nearly all their forms. I am having an issue where if you select the date from the popup it covers the field box showing the value.

and also tested the suggestion on checking the Responsive checkbox and adding the html, body CSS code and still having issues.

Here is the Custom CSS:

.inline {display:inline-block; vertical-align:top;}
.empid {width: 150px;}
.name {width: 230px;}
.dept {width: 330px;}
.translate {width: 160px;}
.inline15 {width: 125px;}
.inline20 {width: 170px;}
.inline25 {width: 235px;}
.inline35 {width: 335px;}
.inline45 {width: 450px;}
.lblhide>li>label {display: none;}
.linehide .cf-section-header {display: none !important;}
.fieldhide {display: none !important;}
select {height:26px !important;}
input {height:26px !important;}
.checkpic {text-align:center;}

I am pretty sure it wouldn't be caused by the JavaScript but here is the Custom JavaScript

$(document).ready(function () {
$('.ro input').attr('readonly','True');
   $('.ro select').attr('readonly','True');

$('.dobcheck').on('blur', 'select', checkvalues);
   $('.dobcheck').on('click', checkvalues);
   $('.dobcheck').on('change', checkvalues);
   checkvalues();

   function checkvalues() {
$('.ro input').removeAttr('readonly');
$('.ro select').removeAttr('readonly');
var match='y';

if ($('.empdob input').val() != $('.dob input').val()) {
   match='n';
    $('.doberror').show();}
else {
$('.doberror').hide();}

if (match == 'n') {
$('.Submit').hide();}
else {
$('.Submit').show();}

$('.ro input').attr('readonly','True');
$('.ro select').attr('readonly','True');
}
});

0 0

replied on August 17, 2017

Hi Jonathan,

Your CSS/Javascript looks like the one in https://answers.laserfiche.com/questions/94823/Date-Field-Calendar-Popup-Blocking-Entry-Box#94926 so I assume your process used Google Translate as well, is that right?

It seems that the old workaround in the other answers post did not work in Forms 10.2.1. Here is another workaround (add to custom script) which works for me:

	$(document).on('focusin', '.hasDatepicker', function () {
		if (!$('#ui-datepicker-div').is(':visible')) {
			$.reInitializeDateField(this);
		}
		$(this).datepicker('show');
		$('#ui-datepicker-div').position({
				my: "left top",
				at: "left bottom",
				of: $(this)
			});
	});

Note: Google Translate is not well compatible with JQuery datepicker. See https://answers.laserfiche.com/questions/119631

0 0

replied on August 18, 2017

This did not work when I added the custom script to JavaScript. I am not sure if we used Google Translate, it was our project manager who wrote the custom scripts.

0 0

Question

Question

Replies

Sign in to reply to this post.