Popup Calendar For Date Fields In The Responsive Forms

[peterhanse]

Hi all,

If we use the responsive code for a submit Form there is no popup calendar anymore for the date fields . is there  a possibility to do this anyway

 

regards Peter

[MayMusic]

On my page the pop up just works fine. What browser you are testing your page on? Can you give us the link to the page to test?

[peterhanse]

Hi Maymusic,

 

I just made ​​a test page( https://horseplanner.nl/test/ ) , with the same result .

On the PC , the popup is visible. but on the tablet or mobile not . If you say that it works for you than I think my wordpress ccs style overrules Caspio. I have te same problem whit the borders which i also can not changes. 

[peterhanse]

I tested it with a blank HTML page in notepad and then it works really well . any idea how I can change this in Caspio or wordpress

[wvantongeren]

Peter,

 

Wat wil je precies weten?

Zelf heb ik behoorlijk wat aan een agenda gekoppeld, kijk eens op: http://hemubo.weebly.com/dag_uren.html

PS: alleen even op de agenda een datum aanklikken en je krijgt (indien van toepassing) bijzonderheden te zien.

A.u.b. niet verder in het document zaken aanpassen, het is een live document.

 

Groet,

Willem.

[peterhanse]

Willem, 

Ik heb je een PB gestuurd.

 

vrg Peter

[MayMusic]

When I try the direct link of the same page it works fine: https://c1ebv509.caspio.com/dp.asp?AppKey=184440002a22325ff6834992a6c0

 

So it should be something on your web page. Try to remove scripts you have on the page one by one to narrow it down and find which one is causing the issue

[LWSChad]

All(most) external styles will over-rule Caspio styles.

 

As to how to fix your wordpress styling that's messing it up...

 

Find a scenario where it's not working.

Use the code-inspector. (found in Chrome by right-clicking > inspect. IDK how in other browsers, Google it)

 

search for id="CalendarToolBox"

Look at the active styles to see why it's not showing... be aware, I doubt you'll find a style for "#CalendarToolBox", but maybe some encompassing "div" style that is hiding things.

 

If this only is a problem on the phone or tablet, try shrinking your screen to try to get the same behavior.

- if you get the same behavior on any small screen that tells you that the CSS hiding your calPop is in the media queries section

 

 

If you only see this on a phone, it could be a tough find, as IDK how to use a code inspector on a phone.

 

 

WORKAROUND

Try playing with HTML 5 input type dates...

document.getElementById('InsertRecorddate').type = 'date';

Research It: http://www.w3schools.com/html/html_form_input_types.asp

Try It: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_date

 

Input Type: date

The <input type="date"> is used for input fields that should contain a date.

Depending on browser support, a date picker can show up in the input field.

Example

<form>
  Birthday:
  <input type="date" name="bday">
</form>

Think Easy

[georgep]

I had this problem also and go the following from Support as a fix for the Responsive Code you put in the header.  Issue was that Caspio styles were being overwritten in the website css.

 

Hope this helps.

 

George

 

Please replace the code below (from your Header):
#datapage-form img[alt~=Calendar] {
  position: relative !important; left: -19px; top: 4px !important; z-index: 10000;
}
With this code:
#datapage-form img[alt~=Calendar] {
    position: relative; left: -19px; max-width: 100px;
}
 
It seems the code below from your style sheet (consolidated-all-80.css) is the issue:
 
img {
                border-style: none;
                max-width: 100%;
                height: auto;
}

[peterhanse]

A little bit late but I workaround as follow: Styles> go to your Style> Edit> tab: Source >User-defined Styles>

insert this  code in :

#CalendarToolBox
{
	z-index: 1000 !important;
	left: 10px!important;
	top: 256px;
	width: 300px!important;
	height: 300px!important;
}
#CalendarToolBox .BodyTable tr
{
	height: 35px!important;
}

The calendar is now larger . works for me. 

thanks everyone.