cforms II User Forum

	Current User: Guest	FAQs

cforms II User Forum CSS Styling and Layout cf_upload width value no effecting FireFox

cf_upload width value no effecting FireFox

Page: 1

Reply to Post

Add a New Topic

Post

Guest

Eyal

10:08 pm May 15, 2008

Quote and Reply

Please replace the ??? with your data!

Your URL: http://still.in.process
The browser used: IE7 / FF2
cforms version: v8.4.2
Your Wordpress version: v2.5.1

[desc]:

Before I even begin, I MUST say whay a great work you have done on this plugin. You are setting the highest standards for WordPress plugins !!!

I added a small form with file upload to my side-bar using the widgets management.

The form style is set to sidebar-layout.css (of course)

My problem was that the "Browse…" button gets cut due to the narrow dimensions of the side bar.

I opened sidebar-layout.css and set the following:

.cform input.cf_upload {
width: 156px;
background: #f9f9f9;
border:1px solid #888888;
}

It works great on IE7 as the textbox got smaller and the button is fully seen:

Firefox, however, completly ignores this.

For debugging, I added an extreme height value and it showed well on both browsers.

So why wouldn't my settings effect FireFox?

Any advice will be highly appreciated.

Thank you for your great work

Eyal.

Admin

Oliver

Munich, Germany

posts 6096

7:18 am May 16, 2008

Quote and Reply

The upload field / browse file feature is very dependent on the browser used. Unfortunately they all handle this form field differnetly and allow for different ways to style it (or show lack thereof).

The only way to change the size of the field for FF is to add an attribute to the field (in the HTML): size="XX"which currently is not supported.

It's on the "wishlist" though…Possible workaround: you can use jQuery or simple javascript call to add this attribute to the field after the form has loaded, e.g. (jQuery!):

cforms(
function() {
cforms(".cf_upload").attr('size','30');
}
);

this code should then be added to the JS code that gets loaded when cforms header gets loaded in cforms.php, after line 763:

echo '<script type="text/javascript" src="' . $cforms_root. '/js/cforms.js"></script>'."\\n";

the new line would then be:

echo '<script type="text/javascript">cforms( function() { cforms( ".cf_upload" ).attr( 'size','30' ); }); </script>'."\\n";

(disclaimer: this is off top of my head ;-)

** cforms home page ** donations

Guest

Eyal

3:33 pm May 17, 2008

Quote and Reply

Dear Oliver

Thank you so much for your help and support.

I am not a PHP/JS programmer, so I just added the code you provided after the line that loads cforms.js (in my editor, it was line #757)

echo '<link rel="stylesheet" type="text/css" href="' . $cforms_root . '/styling/' . get_option('cforms_css') . '" />'."\\n";
echo '<script type="text/javascript" src="' . $cforms_root. '/js/cforms.js"></script>'."\\n";

echo '<script type="text/javascript">cforms( function() { cforms( ".cf_upload" ).attr( 'size','30' ); }); </script>'."\\n";

if( get_option('cforms_datepicker')=='1' ){
$nav = get_option('cforms_dp_nav');
$dformat = str_replace(array('M','EE','E'),array('m','dddd','ddd'),stripslashes(get_option('cforms_dp_date')));

When attpeting to view my wordpress in the browser, I get the following error messages: