I noticed that when this module is enabled and you go to input the address using firefox the arrangements of the input fields is wrong. However when you check with IE 7.0 it displays fine. There must be a difference in the way that the two browsers render the input fields. I've attached a screen shot of what it looks like in firefox. Thanks for your work on a very useful module!

CommentFileSizeAuthor
#9 Screenshot Comparison.JPG55.96 KBc_philip
#7 screen_10.png7.08 KBsshvetsov
#3 screen_9.png4.9 KBsshvetsov
firefox input fields.JPG19.9 KBc_philip

Comments

sshvetsov’s picture

sshvetsov commented

Yep, have the same problem in my Firefox as well. It looks like Apt. field is overlapping the street field.

rconstantine’s picture

rconstantine commented

Woah. What the??? I'm going to need more to go on. I am running Firefox 2.0.0.3 myself and everything looks great.

I'm on WinXP, what about you guys?

Are you using custom skins? If so, which ones and does changing the skin fix it?

Also, what values have you set for the maximum field lengths? That's the only thing I can think of that would be crazy. I am doing a little bit of hocus pocus to modify the visual lengths of the fields so that they more accurately represent the max numbers in 'ems'. If this ends up being the problem, I'll probably just take it out or make a checkbox to include it or not.

Anyway, try first to delete the contents of the css file or change it as you wish for a quick work around. Perhaps I should have a float:left in the entry for div.cck-address-apt .form-item {margin-right:1em;} as well. I don't know. If either of you try it, let me know how it goes.

Change to:
div.cck-address-apt .form-item {float: left; margin-right:1em;}

Let me know.

sshvetsov’s picture

sshvetsov commented
StatusFileSize
new screen_9.png4.9 KB

I'm on windows XP as well. Using unmodified "minnelli" theme. I left maximum field lengths empty as they were.
Changing CSS to have: div.cck-address-apt .form-item {float: left; margin-right:1em;} made it look like the image attached.

sshvetsov’s picture

sshvetsov commented

I figured some things out. Thanks to FireBug.

  1. The state div doesn't have correct css class generated in html. It says "cck-address-city" instead of "cck-address-state"
  2. If you plan to add "float: left" to "cck-address-apt" class, you have to also add same "float: left" to "cck-address-street2" class, otherwise weird overlapping occurs.
  3. If you want specific fields appear on specific rows you might want to add "clear: left" to the classes that should start on a new line.

Hope my explanation makes sense, I'm writing it real quick.

c_philip’s picture

c_philip commented

I tried changing the css file and added "div.cck-address-apt .form-item {clear: left; margin-right:1em;}" which fixed the issue with line breaks. However the street 1 field is shortened compared to the street 2 field. In order to fix that I removed the "float: left" on the div.cck-address-street1 .form-item value. I played around some more and realized that I did not need the clear: left value on the address-apt field either. So here is the final css file I've been using that seems to work well in firefox and IE:

@CHARSET "UTF-8";
fieldset.cck-address-fieldset .form-item {padding:0; margin:0;}
div.cck-address-street1 .form-item {margin-right:.5em;}
div.cck-address-apt .form-item {margin-right:1em;}
div.cck-address-street2 .form-item {margin-right:.5em;}
div.cck-address-city .form-item {float:left; margin-right:.5em;}
div.cck-address-state .form-item {float:left; margin-right:.5em;}
div.cck-address-zip .form-item {float:left; margin-right:.5em;}
fieldset.cck-address-fieldset .description {clear: both;}
rconstantine’s picture

rconstantine commented
Assigned: Unassigned » rconstantine
Status: Active » Needs review

Kindly see if the following works:

@CHARSET "UTF-8";
fieldset.cck-address-fieldset .form-item {padding:0; margin:0;}
div.cck-address-street1 .form-item {clear:left; float:left; margin-right:.5em;}
div.cck-address-apt .form-item {float:left; margin-right:1em;}
div.cck-address-street2 .form-item {clear:left; margin-right:.5em;}
div.cck-address-city .form-item {clear:left; float:left; margin-right:.5em;}
div.cck-address-state .form-item {float:left; margin-right:.5em;}
div.cck-address-zip .form-item {float:left; margin-right:.5em;}
div.cck-address-country .form-item {float:left; margin-right:.5em;}
fieldset.cck-address-fieldset .description {clear: both;}

Thanks for the input. As for the state and country having the save id as city, that should be okay for testing this since the css is the same, but I am changing the module file to reflect the correct naming as above. If you test this and it works, I'll commit the changes to both the css and module files.

Thanks.

sshvetsov’s picture

sshvetsov commented
StatusFileSize
new screen_10.png7.08 KB

Seems to be working in Firefox 2, screenshot attached.

rconstantine’s picture

rconstantine commented

@sshvetsov Cool. Thanks for checking.

@c_philip How about you?

c_philip’s picture

c_philip commented
StatusFileSize
new Screenshot Comparison.JPG55.96 KB

I looked at the new code and added it. It fixes the overlap problem but if you look at the other user and my screenshot, notice that the street line is truncated in Firefox. I've attached a copy of the screenshot.

rconstantine’s picture

rconstantine commented

@c_philip: what are your max length settings? Are they all 0?

c_philip’s picture

c_philip commented

All the maximum field lengths were left blank so that they could be unlimited.

CP

c_philip’s picture

c_philip commented

All the maximum field lengths were left blank so that they could be unlimited.

CP

rconstantine’s picture

rconstantine commented

Okay, I'll just change this so that 'apt' is on it's own line. I'll be finishing the recent changes on Wednesday, so by late that night, you should see the updated version posted. Meanwhile, change the css file to suit your needs.

Cheers.

c_philip’s picture

c_philip commented

Great! Thanks for all your work on this. I look forward to seeing the new version up.

rconstantine’s picture

rconstantine commented
Status: Needs review » Fixed

I just posted the new version. Drupal's cron will put it up within 12 hours. For this issue, all I did was change the code from #6 to read

div.cck-address-apt .form-item {clear:left; margin-right:1em;}

instead of

div.cck-address-apt .form-item {float:left; margin-right:1em;}

I hope that does it for you.

Anonymous’s picture

(not verified) commented
Status: Fixed » Closed (fixed)