Jump to content
Sign in to follow this  
malcfinch

Cforms Javascript Date issue

Recommended Posts

malcfinch

Hi I've added a form to my site - http://www.imdi.co.uk/prices/request-an-appointment/ I have enabled the javascript date picker option in the global settings for the plugin, however it doesn't appear. I've checked the plugin homepage which is saying it's a problem with te template. Any ideas ? cheers malc

Share this post


Link to post
Share on other sites
cmunns

It does appear, but it's loading to the bottom left...and I don't see any js errors so it seems as if that is the desired action

Share this post


Link to post
Share on other sites
malcfinch

Hi Any ideas on how to move from the bottom left ? cheers malc

Share this post


Link to post
Share on other sites
Kate

Hi Malc, This should get you on the right track:

#li-3-3{position:relative;}
	#li-3-3 label{margin-bottom:25px;}
	#li-3-3 .dp-choose-date{position:absolute;top:25px;left:0px;}

You can add that to Settings->Custom Code->CSS.

Share this post


Link to post
Share on other sites
malcfinch

Hi Kate Thanks for the reply...tried that, didn't change anything. cheers malc

Share this post


Link to post
Share on other sites
cmunns

The issue is likely that you have cforms default styling disabled...and the PP style for it doesn't have anything applied for the #dp-popup container that the datepicker uses....try to reference the styles from cforms style folder and add it in. I found this in the calendar.css of cforms ` table.jCalendar { border: 1px solid #666; background: #aaa; border-collapse: separate; border-spacing: 2px; } table.jCalendar th { background: #444; color: #fff; font-weight: bold; padding: 3px 5px; } table.jCalendar td { background: #f0f0f0; color: #000; padding: 3px 5px; text-align: center; } table.jCalendar td.other-month { background: #ddd; color: #aaa; } table.jCalendar td.today { background: #666; color: #fff; } table.jCalendar td.selected { background: #f66; color: #fff; } table.jCalendar td.selected:hover { background: #f33; color: #fff; } table.jCalendar td:hover, table.jCalendar td.dp-hover { background: #fff; color: #000; } table.jCalendar td.disabled, table.jCalendar td.disabled:hover { background: #bbb; color: #888; } /* For the popup */ div.dp-popup { position: relative; background: #d6eafe; font-size: 10px; font-family: arial, sans-serif; padding: 2px; width: auto; line-height: 1.2em; } div#dp-popup { position: absolute; z-index: 199; border:2px solid #c2e0f8; } div.dp-popup h2 { font-size: 12px; text-align: center; margin: 3px 0pt 4px; padding: 0; } a#dp-close { font-size: 11px; padding: 4px 0; text-align: center; display: block; } a#dp-close:hover { text-decoration: underline; } div.dp-popup a { color: #000; text-decoration: none; padding: 3px 2px 0; } div.dp-popup div.dp-nav-prev { position: absolute; top: 2px; left: 4px; width: 100px; } div.dp-popup div.dp-nav-prev a { float: left; } /* Opera needs the rules to be this specific otherwise it doesn't change the cursor back to pointer after you have disabled and re-enabled a link */ div.dp-popup div.dp-nav-prev a, div.dp-popup div.dp-nav-next a { cursor: pointer; } div.dp-popup div.dp-nav-prev a.disabled, div.dp-popup div.dp-nav-next a.disabled { cursor: default; } div.dp-popup div.dp-nav-next { position: absolute; top: 2px; right: 4px; width: 100px; } div.dp-popup div.dp-nav-next a { float: right; } div.dp-popup a.disabled { cursor: default; color: #aaa; } div.dp-popup td { cursor: pointer; } div.dp-popup td.disabled { cursor: default; } `

Share this post


Link to post
Share on other sites
malcfinch

Excellent, that did the trick...will this now get added to the next PP update ? Many thanks malc

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×