ColdFusion datefield interfering other CSS

Question

When I add a cfinput type="datefield", the ColdFusion CFIDE/scripts are interfering another div on the page.

Good:

Bad:

The code:

<aside id="sideLeft">
<--- CMS generated --->
<div  class="ktcssmenu thenav_ff_green"><div class="ktvertical ktopts_showtimeout_100 ktopts_hidetimeout_100 ktopts_imgreplace_no ktopts_imgreplacestyle_img ktopts_imgdir_ ktopts_imgnames_">
<ul class='lev1 clearfix'><li class="lev1 pos1 lev1_pos1 first lev1_first"><a href="/hr/index.cfm" class="lev1 pos1 lev1_pos1 first lev1_first" target="_self">Human Resources Home</a></li>
<li class="lev1 pos2 lev1_pos2 last lev1_last"><a href="http://www.blah.com/hr" class="lev1 pos2 lev1_pos2 last lev1_last" target="_new">Public Site</a></li>
</ul></div></div>
<--- regular non-CMS code --->
        <div class="gspecial">
            Restricted Access
            <a href="url.cfm">New Hire Forms</a>
            <a href="url.cfm">Jobs / Employment Admin</a>
            <a href="url.cfm">Eligibility Lists Admin</a>
        </div>  
...

The CSS:

#sideLeft {
    float: left;
    width: 230px;
    margin-left: -100%;
    position: relative;
    padding: 10px 10px 10px 10px;
    background-color: #f5f5f5;
    border: 1px solid #d5d5d5;
    }
/* test */
.thenav_ff_green {
    border: dashed 5px #990000;
    } 
.gspecial {
    border: dotted 5px #003333;
    }

The website is using a CMS, and I cannot edit much within the "green" pre-packaged Navigation.

The ColdFusion CFIDE/script causing my headache is /CFIDE/scripts/ajax/ext/adapter/yui/ext-yui-adapter.js

I have tried various CSS clearing and floating.

I am willing to try anything again. Thanks.

I had [a similar issue](http://stackoverflow.com/questions/209491/css-bleed-through-with-cfinput-type-datefield) I never did find a good solution. I ended up re-arranging the page and the project got killed in any event. — ale, Jan 17 '13 at 18:41
I have something in my blog drafts from a year ago but blogger won't let me see it on my phone... It has something to do with messing with the z-index. I will try to see what I found when I get to a desktop. — genericHCU, Jan 17 '13 at 19:15
After reading Al's link I don't think my outdated blog post will have much to offer. — genericHCU, Jan 17 '13 at 19:52
Would you be able to create a [fiddle](http://jsfiddle.net/) for the page so that we could take a look? — Sean Walsh, Jan 17 '13 at 22:21

score 5 · Accepted Answer · answered Jan 17 '13 at 21:21

5

I feel the best solution would be to not use cfinput, and instead try something like this: http://jqueryui.com/datepicker/#icon-trigger

Then you'll have much more control over the styling, and functionality as it's something you can actually edit, rather than just receiving whatever rolled in js/css cfinput gives you.

otherwise you might just have to use firebug to find what exactly is causing the issue to add in some extra css to fix it.

CSS bugs like this are tricky to debug without having an example page to play with. Any way you can simmer this down to a page you can share with us?

answered Jan 17 '13 at 21:21

Nicklepedde

566
2
11

I second this comment, and would go further to recommend using jquery for all UI components over CFs built in UI components. – Jason Jan 18 '13 at 00:38
I third this comment. I try to disuade anyone from using CFFORM. CFFORM was supposed to make client side stuff easy with simple CF tags but it ends up getting all mucked up. There are several JS libraries out there that make this just as easy with far more control. I believe CF uses YUI so you could get the same date picker that way. This is one of my favorite date pickers if you don't want to use JQueryUI or YUI http://dhtmlx.com/docs/products/dhtmlxCalendar/index.shtml?mn – genericHCU Jan 18 '13 at 14:44
Not the "easy" answer I was hoping and praying for... but what the hey. Thanks. – nope_four Jan 22 '13 at 18:05

ColdFusion datefield interfering other CSS

1 Answers1