postcode input field appears way of to the right

hi,

I'm having a really strange problem ... the field postcode rendered in tpl_create_account.php appears completely unaligned to the right ... strange because I checked the stylesheet and input fields have all the same rules ... but postcode doesn't follow them ... :frusty:

Here is a code excerpt

<label class="inputLabel" for="postcode"><?php echo ENTRY_POST_CODE; ?></label>
<?php echo zen_draw_input_field('postcode', '', zen_set_field_length(TABLE_ADDRESS_BOOK, 'entry_postcode', '40') . ' id="postcode"') . (zen_not_null(ENTRY_POST_CODE_TEXT) ? '<span class="alert">' . ENTRY_POST_CODE_TEXT . '</span>': ''); ?>
<br class="clearBoth" />

From there I can see it uses zen_draw_input_field() function, but strangely instead of appear normally the input field is shifted all the way to the right!

THis is what I mean:
postcode xxx

The others:
city:
xxx

Perfectly aligned to the left ...

why? don't know all the other input fields are properly aligned ...
and ruled by:

INPUT {
margin:.3em .5em;
}
LABEL.inputLabel {
width:85%;
float:left;
margin:.3em 0;
}

plus there are no differences in the php code or anything that might cause this behavior ...

If anybody has found a solution please let me know ...

icecold:

hi,

I'm having a really strange problem ... the field postcode rendered in tpl_create_account.php appears completely unaligned to the right ... strange because I checked the stylesheet and input fields have all the same rules ... but postcode doesn't follow them ... :frusty:

Here is a code excerpt

<label class="inputLabel" for="postcode"><?php echo ENTRY_POST_CODE; ?></label>

<?php echo zen_draw_input_field('postcode', '', zen_set_field_length(TABLE_ADDRESS_BOOK, 'entry_postcode', '40') . ' id="postcode"') . (zen_not_null(ENTRY_POST_CODE_TEXT) ? '<span class="alert">' . ENTRY_POST_CODE_TEXT . '</span>': ''); ?> <br class="clearBoth" /> ``` > > From there I can see it uses zen_draw_input_field() function, but strangely instead of appear normally the input field is shifted all the way to the right! > > THis is what I mean: > postcode xxx > > The others: > city: > xxx > > Perfectly aligned to the left ... > > why? don't know all the other input fields are properly aligned ... > and ruled by: > ``` INPUT { margin:.3em .5em; } LABEL.inputLabel { width:85%; float:left; margin:.3em 0; } ``` > > plus there are no differences in the php code or anything that might cause this behavior ... > > If anybody has found a solution please let me know ...

The above problem happens with Firefox 3.04 Opera, IE7 and Chrome renders it fine ...

Will float the affecting code to the left solve this issue?

I read the function that renders the input field and there was nothing there that might cause this odd behavior.

As I said the label is correctly aligned, but the input field appears in the same line and in the far right, instead of below ...

This is the code that has the error ...

<label class="inputLabel" for="postcode"><?php echo ENTRY_POST_CODE; ?></label>
<?php echo zen_draw_input_field('postcode', '', zen_set_field_length(TABLE_ADDRESS_BOOK, 'entry_postcode', '40') . ' id="postcode"') . (zen_not_null(ENTRY_POST_CODE_TEXT) ? '<span class="alert">' . ENTRY_POST_CODE_TEXT . '</span>': ''); ?>
<br class="clearBoth" />

And this is code from another label and field ...

<label class="inputLabel" for="city"><?php echo ENTRY_CITY; ?></label>
<?php echo zen_draw_input_field('city', '', zen_set_field_length(TABLE_ADDRESS_BOOK, 'entry_city', '40') . ' id="city"') . (zen_not_null(ENTRY_CITY_TEXT) ? '<span class="alert">' . ENTRY_CITY_TEXT . '</span>': ''); ?>
<br class="clearBoth" />

The difference is the first one doesn't display the input field where it should be ... the latter does ...

Both call the same function ... and use the same CSS rules ... so why this is happening?

I isolated the problem but still couldn't solve it ... I replaced the code for the postcode input field by the code for city commenting out the old code and it worked ... so from there I started to debug the problem code ... so far I found if I copy exactly the same code but replacing the entries corresponding to city by the one from postcode, then the error appears again ... It's related to these functions:

// function to return field length
// uses $tbl = table name, $fld = field name
  function zen_field_length($tbl, $fld) {
    global $db;
    $rs = $db->MetaColumns($tbl);
    $length = $rs[strtoupper($fld)]->max_length;
    return $length;
  }

////
// return the size and maxlength settings in the form size="blah" maxlength="blah" based on maximum size being 50
// uses $tbl = table name, $fld = field name
// example: zen_set_field_length(TABLE_CATEGORIES_DESCRIPTION, 'categories_name')
  function zen_set_field_length($tbl, $fld, $max=50, $override=false) {
    $field_length= zen_field_length($tbl, $fld);
    switch (true) {
      case (($override == false and $field_length > $max)):
        $length= 'size = "' . ($max+1) . '" maxlength= "' . $field_length . '"';
        break;
      default:
        $length= 'size = "' . ($field_length+1) . '" maxlength = "' . $field_length . '"';
        break;
    }
    return $length;
  }

This is the line that's causing trouble ...

<?php echo zen_draw_input_field('postcode', '', zen_set_field_length(TABLE_ADDRESS_BOOK, 'entry_postcode', '40') . ' id="postcode"') . (zen_not_null(ENTRY_POST_CODE_TEXT) ?

I din't know if the value 40 is referred to maxlength, or not
the argument $max in the above function ...
Or why it's 40 when the maxlength for that field should be 10 ...
if anyone can explain the way the function works?

I might understand why the input value is 40 instead of what I think ... 10

Does the field align properly if you change the value to 10? I don't see any reason to have it larger anyway.

Rob

Well, I was not sure if that might be the issue, so I didn't try it, what I did try was to replace postcode with city, and it worked fine ... I couldn't find anything that might cause this strange behavior ... in the code, nor in DEFINEs, or the css, I even tried to add a css rule for #postcode INPUT {float:left;} but that didn't work either ...

I will try replacing 40 with 10 and see what happens ...

thanks for the tip ...

I found the parent function

////
// Output a form input field
  function zen_draw_input_field($name, $value = '', $parameters = '', $required = false, $type = 'text', $reinsert_value = true) {
    $field = '<input type="' . zen_output_string($type) . '" name="' . zen_output_string($name) . '"';

    if (isset($GLOBALS[$name]) && ($reinsert_value == true) && is_string($GLOBALS[$name])) {
      $field .= ' value="' . zen_output_string(stripslashes($GLOBALS[$name])) . '"';
    } elseif (zen_not_null($value)) {
      $field .= ' value="' . zen_output_string($value) . '"';
    }

    if (zen_not_null($parameters)) $field .= ' ' . $parameters;

    $field .= '>';

    if ($required == true) $field .= TEXT_FIELD_REQUIRED;

    return $field;
  }

It's still not clear why the value is 40 ...
Anyway I changed all instances to 10 and it didn't work either ...

If someone with a good knowledge of these functions can explain why this is happening it will be really appreciated ...

Did anyone ever solve this as I have the same problem?

Hi, have been trying to fix this on and off for months, then finally cracked it- I just added a clearBoth between the label and the field, so change this:

<label class="inputLabel" for="postcode"><?php echo ENTRY_POST_CODE; ?></label>
<?php echo zen_draw_input_field('postcode', '', zen_set_field_length(TABLE_ADDRESS_BOOK, 'entry_postcode', '40') . ' id="postcode"') . (zen_not_null(ENTRY_POST_CODE_TEXT) ? '<span class="alert">' . ENTRY_POST_CODE_TEXT . '</span>': ''); ?>
<br class="clearBoth" />

to this

<label class="inputLabel" for="postcode"><?php echo ENTRY_POST_CODE; ?></label>
<br class="clearBoth" />
<?php echo zen_draw_input_field('postcode', '', zen_set_field_length(TABLE_ADDRESS_BOOK, 'entry_postcode', '40') . ' id="postcode"') . (zen_not_null(ENTRY_POST_CODE_TEXT) ? '<span class="alert">' . ENTRY_POST_CODE_TEXT . '</span>': ''); ?>
<br class="clearBoth" />

Hope this helps!