Fix long input form elements with Firefox on Linux (3.6.8 as shipped with Ubuntu Lucid)

I'm not sure what this issue is about. Can you explain more?

I think buwk is saying that some of the forms are too wide, and that breaks the layout. Can someone else reproduce such a bug?

I have to say, it's not the lack of English that's confusing, it's these screenshots! Oh my. LOL.

Before:

After:

The screenshots are not available at the moment due to the site being in maintenance - would be good if they can be added here - this is directly related to #881264: Username/password input fields overlap content (Firefox 3.6 on Ubuntu Linux) (which I marked as duplicate since this issue is older).

Heres the screenshot from that issue:

I dont have a linux setup to test with right now, I could run one and test this but if someone else could apply a simple fix such as the following to confirm the issue and a plausible fix, or provide some detailed debug info as to why this happens:

Downloaded 7.x-dev and quickly check with Chrome on Firefox 3.6.8 and was NOT able to confirm this. Login input boxes displayed fine.

buwk: Can you please state what browsers and versions you were seeing this issue in?

Quoting from my original bug report: "This only happens when rendering the page with Firefox on Linux (3.6.8 as shipped with Ubuntu Lucid), the page looks fine in the Google Chromium browser."

Probably relates to #903450: Form elements too long for Opera

Attached is the home page screenshot from various browsers, OS Ubuntu 10.04, everything looks fine here. Is it fixed ?

Nothing has changed with regards to form elements in Bartik recently afaik.

something is broken there

http://www.zone-h.com/mirror/id/10678386

I'm setting this to needs more info. All the screenshots of bugs are broken. The original screenshots just open spam windows.

I don't know that we have a problem here.

I can confirm the bug. Screenshot attached. This is with Firefox 4 RC1 on Ubuntu Linux.
It looks like a problem with the font rendering width in firefox, since Chrome is fine.

Using 'Lucida Grande' makes the text input box wider than it should, using any other font is fine.

To fix:
a) Change font from 'Lucida Grande' or
b) Set width on text input element with css.

Setting css width for input elements is probably a good idea, since the size attribute renders differently across browsers.

related issues: #833184: 60 col fields can overflow the main content column and #903450: Form elements too long for Opera

Wow, so are you saying that if we change the font the bug goes away? Really? That would be most interesting. Certainly we can put widths on the form inputs. Has anyone seen this issue with anything other than search block, really like to see a block build with webform or some module just to see if this is more generic (I would think that it is).

8.x is open now so fixes go to D8 then backport to D7.

On further investigation, the issue is reported in this bug: https://bugzilla.mozilla.org/show_bug.cgi?id=491114
The font file for Lucida Grande in circulation reports a much wider character width than it should, which causes Firefox to make the text input boxes too wide when width is only specified in the size attribute.

Replacing the faulty font file fixes the issue.

Would someone be so good as to test with Lucida Sans, its already in the stack and if the changes is cosmetically minor then I have no problem changing this, looks like a real edge case bug that affects very few users but easy enough for us to workaround without sacrificing anything.

Lucida Sans is not installed by default on Ubuntu, so should degrade gracefully to the next available font. I did test with a copy of Lucida Sans I found on an old install (LSANS.TTF) and it displays fine.

confirming the bug.
Attached is a screenshot of the Drupal.org login page as I see it on my Firefox 4.0.1

fixed the issue on my own Drupal 7 install by changing the order of the Lucida fonts. (see code herunder)
in Bartik's "css/style.css"

input,
textarea,
select,
a.button {
  font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, sans-serif;  /* was font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; */
}

Not sure if Lucida Sans is installed on all systems tho and will therefor degrade gracefully.

updated version (apologies for the initial change)

@sunchaser can you post the md5sum of your Lucida Grande font file?

should I have mentioned I'm not on Ubuntu ? (just windows xp here)
completely in the dark on how I could provide the md5sum of that ttf file ...
If you tell me what to do , I'd gladly help you out obviously.

Why not apply css to the input element:

input {
  max-width: 100%;
}

That works for me and is better than an explicit size (will work in all scenarios).

a.ross - sounds like a plan to me, its what I'm doing now all the time also.

@sunchaser You can use this (or a number of other utilities) to generate the md5 sum of that file: http://www.winmd5.com/

@Jeff Burnz: alright good to hear. I suppose you don't need me to create a patch :)
I'd be willing to nevertheless.

If you can create a patch for review that would be great!

Ok, how about this.

Markup changed.

Tested on Ubuntu FF4.0 without patch, it's fine. Is it only for FF3.6 ?? Please document it :).

Updating issue title

Hello ma'am/sir,

How about if the input has size attribute? like this screenshot, In other browser like chrome it not happen.

I'm using Firefox 11.0, Linux (Ubuntu). Drupal 7 - but here says dup http://drupal.org/node/881264, that's why I post here.

here the example, what I mean:

I solved this in my other theme by:

/**
 * Without declaring the font size in outer element of the input it will not work
 */
.form-item {
  font-size: 12px;
}

input {
  font: inherit;
  max-width: 100%;
}

I don't know why but it works, strange.

not good in css, maybe not the solution.

Setting the form width to 100% would probably be a better idea than setting a fixed width.. am I wrong?

Novice issue cleanup.

No one has touched this issue in a really long time. If this is still a current issue please feel free to poke me and reopen.

Thanks for reporting this issue and thanks to everyone who contributed. We rely on issue reports like this one to resolve bugs and improve Drupal core.

As part of the Bug Smash Initiative, we are triaging issues that are marked "Postponed (maintainer needs more info)".

Given that this issue was logged in 2011 and no work has been done on it since 2012, I'm marking the issue "Closed (cannot reproduce)". If anyone can provide complete steps to reproduce the issue (starting from "Install Drupal core"), document those steps in the issue summary and set the issue status back to "Active".