Jump to content

Popup Calendar For Date Fields In The Responsive Forms

Recommended Posts

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. 

Link to comment
Share on other sites



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.




Link to comment
Share on other sites

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.




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.

compatible_opera2020.gifcompatible_safari2020.gifcompatible_chrome2020.gifincompatible_firefox2020.gifincompatible_ie2020.gif Example
  <input type="date" name="bday">

Think Easy

Link to comment
Share on other sites

  • 2 weeks later...

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.




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;

Link to comment
Share on other sites

  • 4 months later...

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

insert this  code in :

	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. 


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...