Gabriel

Sorry, that CSS does nothing but beautify the jqTransform date picker a little (it still doesn’t show on top of other elements, but that’s irrelevant). Since jqTransform still modifies the date picker, it still prevents The Events Calendar from intercepting the click events (a known problem with jqTransform). The only solution I’ve found is to prevent the plugin from loading on specific pages.

I’d appreciate code that would prevent jqTransform from modifying only drop down menus, rather than the all or nothing approach of disabling per page.

Believe me, I don’t want to style the date picker. I can do that myself with CSS. I’m not even sure where in the code jqTransform is being called, as this theme has a whole javascript library integrated into the theme. I believe I would have to edit the javascript itself to prevent this code from running on this particular page, as it’s loaded dynamically through the scripts as opposed to the template. And I need some of the other JS for the UI of the page.

In short, i’m just wondering if you’re aware of a quick way to exclude this code from running on this page?

I’m self taught, so I know some of the advanced stuff, while lacking some of the basics. Any help is GREATLY appreciated.

@nick, PJAX, referring to jquery.pjax.js, used by Events Calendar, which indeed uses an AJAX request.

You don’t seem to understand. I really don’t care about styling the elements. My theme is using jqTransform on the form elements, which is completely screwing up the date picker, causing it not to work.

The only thing that seems to be relevant with ajax here is the fact that jqTransform naturally doesn’t affect the refreshed date picker after an ajax request, and the refreshed date picker works fine…

The Events Calendar and jqTransform are not playing well in my theme, and I’m trying to fix that.

I’m pretty sure it’s the jqTransform script that the theme uses. It’s trying to style the form used for the date picker. Haven’t had time to look at this. Any idea how to disable this just for this page, preferably from my child-theme folder? If there’s no quick fix, don’t worry about it, I’ll figure something out later.

I think since PJAX reloads the form control without the header/footer reloading, it avoids the jqTransform restyling. The only fix on your end I can think of is a toggle for loading the calendar with PJAX after page load, which would isolate it from any header/footer scripts affecting it.

I can’t be the first person ever to use an input field and a checkbox in the same form using CF7, and changing the size of them independently using CSS. This is such a basic thing, there must be a simple solution

This should be a simple CSS issue, surely someone knows?

So here’s the CSS I added:

#contact{
list-style:none;
}
#contact li .text,#contact li .ta-label{
width:487px;
background: #4b4b4b;
padding:0 10px 0;

position:absolute;
z-index:100;

border-top-right-radius: 5px;
-moz-border-radius-topright:5px;
-webkit-border-top-right-radius:5px;
border-top-left-radius: 5px;
-moz-border-radius-topleft:5px;
-webkit-border-top-left-radius:5px;
}
#contact li .ta-label{
position:relative;
padding:0 10px 3px;
}
#contact li .plain{
padding:0;
position:absolute;
z-index:100;
}

#contact li .wpcf7-form-control-wrap input, #contact li .wpcf7-form-control-wrap textarea{
width: 500px;
z-index:100;
margin:0 0 1px;

border-bottom-right-radius: 5px;
-moz-border-radius-bottomright:5px;
-webkit-border-bottom-right-radius:5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomleft:5px;
-webkit-border-bottom-left-radius:5px;
}

#contact li .wpcf7-form-control-wrap textarea{
line-height:26px;
height:100px;

border-top-right-radius: 5px;
-moz-border-radius-topright:5px;
-webkit-border-top-right-radius:5px;
}

input.wpcf7-text { width: 10px; }
#contact li .captcha{
max-width:75px;

border-radius: 5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

Minus the Submit button styles.
The only thing I’m trying to fix here is the checkbox, which is inheriting my input boxes 500px width, at:

GreekStoneStudios.com/contact

I only added one span class, via the CF7 form editor:

<li><span class="check">[checkbox checkbox-73 "Send 25 cards to my address? (add $26.75 + S&H)"]</span> </li>

Any other span tags are coming from either CF7, or my Weaver theme itself. So I’m not going to edit those two professionally done packages just to eliminate what appears to be, and I’ll agree with you, too many span tags.

You know what, i should have just posted all the CSS i added here. I’m not at my computer tonight, so I’ll post it tomorrow, if you guys would care to check back. Much appreciated.

It’s CSS that i added. And I’ve been trying to correct the checkbox width at the end of my style sheet, but it’s not taking a new width. My lack if CSS keeps me from coming up with a solution, and countless google searches aren’t helping.

So either a new way to set the input box width that doesn’t include the checkboxes, or a method of resizing the checkbox after the fact.

I know the smart thing to do is study CSS, but this is for a holiday ad, and i just don’t have enough time.

And to reiterate, if you look at the check box, you’ll see it’s inheriting the 500 pixel width i set for the input boxes. When i remove the width property, then the checkbox looks fine, but then the rest of the form naturally doesn’t line up.

Thank you for the well thought out reply, but I’ve already done that to ensure my CSS doesn’t get overwritten when updating. I’m also not having difficulty with CF7 short codes, only the CSS.

If you just take a quick look at my form in Firebug, you should be able to easily see where i may have gone wrong.

GreekStoneStudios.com/contact

Thank you again

No, doesn’t do anything for me