Field width OK in chrome but not firefox or IE 9

[cmendla]

I have a site with 2 embedded forms at
http://www.campusparkeast.com/refer-a-friend.html
http://www.campusparkeast.com/contact-2.html

The field widths look fine in Chrome. However, in IE 9 or Firefox, the fields extend across the page.

I have a feeling that it has something to do with the following

<input id="referrak___Your_name" name="referrak___Your_name" size="20" maxlength="255" class="fabrikinput inputbox  text" value="" type="text">

I'd appreciate any thoughts on this.. Using the default template but with the change to the template suggested by Robb at http://fabrikar.com/forums/index.php?threads/how-do-i-set-line-spacing-in-forms.33191/ The problem existed before modifying the template files though.


Thanks

Chris

 

[cmendla]

Also, the captch shows up in chrom and IE9 but not if firefox. However, if I leave the captcha blank in FF, the form seems to submit.

Here is the html for the referral article where I am embedding the referral form.

<p>&nbsp;</p>
<table style="height: 351px; width: 788px;" border="0" cellpadding="12">
<tbody>
<tr>
<td style="text-align: center; background-color: #e04d4d;" colspan="2"><span style="color: #ffffff;"><em><strong><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; line-height: normal;"><span style="font-size: 18pt;">Refer your friends</span>,</span></strong></em></span></td>
</tr>
<tr>
<td><img src="images/2327785_s.jpg" alt="" /></td>
<td>
<p style="text-align: center;"><strong><span style="font-size: 12pt;">Refer your friends or even your roommates and<br /> get a<span style="font-size: 14pt;"> $50 gift card</span> for each referral!!</span></strong></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p style="color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; line-height: normal;">Name of referral must be emailed to _______________________ to qualify. Gift card not issued until after referral has moved into the property.</p>
<p><span style="color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; line-height: normal;">&nbsp;..</span></p>
<p><span style="color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; line-height: normal;">&nbsp;</span></p>
<p>&nbsp;</p>
<br />{fabrik view=form id=3 layout=default show-title=0} <br />
<p>*Offer may be discontinued at any time.</p>
</td>
</tr>
</tbody>
</table>

 

[cmendla]

Just realized.. I am running fabrik 3 . I've been posting in the wrong forum. Sorry bout that.

 

[troester]

It's the same reason as in your other post:
your Joomla template is defining
input[type="text"], input[type="password"], input[type="email"], input[type="url"], textarea {
color: #3D5166 !important;
font-family: Arial,'Arial Unicode MS',Helvetica,Sans-Serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
padding: 4px 0;
text-shadow: none;
width: 100%;
}
So you have to "reset" the width to it's standard setting in your custom_css.php
input[type="text"], input[type="password"], input[type="email"], input[type="url"], textarea {
width: auto;
}
Captcha:
I can't see the correct captcha in Chrome (but ok in FF), image is broken, this seems to stop the validation, error
Resource interpreted as Image but transferred with MIME type text/html: "http://www.campusparkeast.com/plugins/fabrik_element/captcha/image.php?foo=277619656".
On page reload the captcha (+validation) is ok, same error message

 

[cmendla]

Troester

Thanks

Here is the code in my custom_css.php (I tried it with and without the # in front of input). Did I make a mistake with the code you gave me above. ??

allows you to be be more specific in your selectors, we will also include
* a custom.css we find in the same location as this file.
*
*/

header('Content-type: text/css');
$c = (int) $_REQUEST['c'];
$view = isset($_REQUEST['view']) ? $_REQUEST['view'] : 'form';
echo "

/* BEGIN - Your CSS styling starts here */

#{$view}_$c .foobar {
display: none;
}

#form_$c fieldset label{
display: inline;
}

#input[type="text"], input[type="password"], input[type="email"], input[type="url"], textarea {
width: auto;
}




/*Note that the order of pixel specifications here follows this rule - top, right, bottom, left*/
/* Styling for main element list in form view */
#form_$c fieldset > ul{
padding:10px 10px 10px 10px;
}

/* Styling for the main element list in detail view*/
#details_$c .fabrikGroup > ul{
padding:10px 10px 20px 10px;


/* END - Your CSS styling ends here */

";
?>

Also, is there any fix for the captcha??

thanks

chris

 

[troester]

It should be
#{$view}_$c input[type="text"], input[type="password"], input[type="email"], input[type="url"], textarea {
width: auto;
}

Captcha? Maybe an issue with your Joomla template, too.
Did you try with a standard Joomla template (e.g. beez5)?

 

[cmendla]

For info - I tried the code you mentioned adn that didn't work. I tried the Beez template as you mentioned and the problem does not occur there. The template I'm using is an artisteer template. I'm going to open a ticket with them and reference this thread. I'll get back to you when I get an answer.

The custom_css.php file is in /public_html/components/com_fabrik/views/form/tmpl/default ? Correct? I think I am right with this because the previous code you folks gave me for the line spacing worked.


This is the code right now of the custom_css.php

llows you to be be more specific in your selectors, we will also include


If I inspect the element with firefox, I see

ul><li class="fabrikElementContainer internalid fabrikHide" style="clear: both; width: 100%;"></li><li class="fabrikElementContainer date fabrikHide" style="clear: both; width: 100%;"></li><li class="fabrikElementContainer field fabrikDataEmpty" style="clear:both;width:100%;"><div class="displayBox" style="width: 988px;"><div class="leftCol"></div><div class="fabrikElement" style="width: 834px;"><input id="referrak___Your_name" class="fabrikinput inputbox text" type="text" value="" maxlength="50" size="20" name="referrak___Your_name"></input></div></div></li><li class="fabrikElementContainer field fabrikDataEmpty" style="clear:both;width:100%;"></li><li class="fabrikElementContainer field fabrikDataEmpty" style="clear:both;width:100%;"></li><li class="fabrikElementContainer field fabrikDataEmpty" style="clear:both;width:100%;"></li><li class="fabrikElementContainer field fabrikDataEmpty" style="clear:both;width:100%;"></li><li class="fabrikElementContainer field fabrikDataEmpty" style="clear:both;width:100%;"></li><li class="fabrikElementContainer captcha fabrikDataEmpty" style="clear:both;width:100%;"></li></ul><div style="clear:both"></div></fieldset><input type="hidden" value="3" name="listid"></input><input type="hidden" value="3" name="listref"></input><input type="hidden" value="0" name="rowid"></input><input type="hidden" value="170" name="Itemid"></input><input type="hidden" value="com_fabrik" name="option"></input><input type="hidden" value="form.process" name="task"></input><input type="hidden" value="1" name="isMambot"></input><input type="hidden" value="3" name="formid"></input><input type="hidden" value="0" name="returntoform"></input>

 

[troester]

Hmm, your site is showing custom_css.php as

<b>Parse error</b>: syntax error, unexpected T_STRING, expecting ',' or ';' in <b>/home/paulvent/public_html/components/com_fabrik/views/form/tmpl/default/custom_css.php</b> on line <b>55</b><br />

there seems to be a typo

 

[cmendla]

Here are lines 51-63

#form_$c fieldset label{
display: inline;
}

#{$view}_$c input[type="text"], input[type="password"], input[type="email"], input[type="url"], textarea {
width: auto;
}




/*Note that the order of pixel specifications here follows this rule - top, right, bottom, left*/
/*

The #{$view line is 54

 

[cmendla]

FOUND THE FIELD WIDTH CAUSE -

The problem is a setting in the artisteer template. I'll post more details fri or sat. Essentially, if you are using artisteer templates you have to make a change in the "Controls" area of the template builder to set the input box to "Auto".. I"ll double check this and post the details either fri or sat.

 

[troester]

Glad you found the artisteer reason.

I found the typo: I did a copy/paste from firefox, not considering that you can't use "" inside the echo "...";
(+ missing some #{$view}_$c)
So (if still necessary) it should be
#{$view}_$c input[type='text'],
#{$view}_$c input[type='password'],
#{$view}_$c input[type='email'],
#{$view}_$c input[type='url'],
#{$view}_$c textarea {
width: auto;
}

 

[cmendla]

OK for anyone having a similar problem who is using Artisteer for your templates, here is what I did.

• Go to Artisteer and open up your template
• Go to the CONTROLS tab
• Look at the left margin, you should see CONTROLS under STYLING. Click on CONTROLS
• At the top is INPUT. Select that and select MORE OPTIONS...
• On the right, click on INPUT
• Look for WIDTH TYPE
• Set the WIDTH TYPE to AUTO
• Save your template, export it, and load it in Joomla.

That seems to have resolved the issue for me.