Solved

Firefox styling of input fields changes size of field

Posted on 2010-11-21
18
1,258 Views
Last Modified: 2012-05-10
I am using styling to highlight the contents of an input field depending upon which field is "in use". The text is put into bold and colored red.

In Internet Explorer and Safari, this effect is working as intended. However, in Firefox, the addition of the style caused the input field size to get larger. See the image for a clear example.

Again, in both IE and Safari, the styling does not change the size of the input field.

What styling would I use to compensate for this in Firefox?

Firefox showing larger input field size when styling is applied
0
Comment
Question by:jasimon9
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 5
  • 3
  • +1
18 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 34183765
The field is being adjusted to the size of the characters in the font.  Can you show us the code that is generating that?
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 34184100
When you change to BOLD in a mouse over or hover, this will always happen, as the BOLD font is higher and wider than the normal font.  I had to get rid of bolding on mouse over just because of this problem.  The color change doesn't affect it.
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 34184102
The other way to do this is to pick a smaller font size -- like go down from 11pt to 10pt when you bold it.  There will still be some movement, but if you have to use bold, that is a better solution than seeing the menu pop in an out to a larger size.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 44

Expert Comment

by:scrathcyboy
ID: 34184106
And the input field is just mirroring the font width (so many characters allowed times char. width), so in this case you would be better not to use bold, or pick a smaller font size, as noted above
0
 

Author Comment

by:jasimon9
ID: 34184490
It seems to me that all four answers so far are missing the point. This problem only occurs in Firefox, on both Windows and the Mac. As I stated, the problem does not occur at all in Internet Explorer or Safari. I am expecting therefore that by omitting this part of the question, that any solution would deal with Firefox, but then cause a problem in these other two browsers.

I suppose I should have posted a screen shot of Internet Explorer in the original post, but I though my explanation would be sufficient. But I will added it now.

Please note: obviously I don't want to make it look proper in Firefox, only to have it not look proper in other browsers.
Internet-Explorer-showing-normal.png
0
 

Author Comment

by:jasimon9
ID: 34184496
You asked to see the code. The code is obscured in a way that would require irrelevant explanation. However its effect is to add the following styling:

   'color:red; font-weight:bold'
0
 
LVL 6

Expert Comment

by:blueghozt
ID: 34187369
are you fixing the size of the inputs with css e.g. input[type="text"]{width:200px;} or just using HTML e.g. <input size="32" type="text" />

if you fix the size with CSS I don't think the emboldening would affect it.
0
 

Author Comment

by:jasimon9
ID: 34190729
I am using CSS. If you look at the two screen shots above, you see that there is a clear difference between the browsers. Firefox makes the field size larger. The code changes the CSS as described in my last comment.
0
 
LVL 6

Expert Comment

by:blueghozt
ID: 34195253
you have shown us the snippet of CSS that gets added onto the active input but can you show us the CSS that applies to the inputs before these extra styles are applied? For example I have created a small page with 4 text inputs that are styled with CSS and I have then applied extra styles to the first one with red and bold and it still remains the same size in Firefox 3.6.12 - have a look here: http://sandbox.nubz.com/inputs.html - you will see I added line-height to the inputs to ensure bold text fits comfortably. Maybe this fix will do it for you?

This does lead me to believe either you are not using CSS to style the inputs originally or there is something within the CSS that is peculiar to Firefox, either way it would be good to see how the inputs are drawn on the page.
0
 

Author Comment

by:jasimon9
ID: 34197155
The difficulty in "showing the code" is that the contents of the field is loaded from serialized data that is loaded from a file. So the source code itself is not that useful to look at. There are two "code views" that might be helpful however.

The first "code view" is the php that changes the styling, which is shown in the first snippet, along with the related php that creates the html.

 
if ($_POST['submitUse'])
{
	// load saved search criteria
	$query = <<<SQL
	SELECT data
	FROM search_saved
	WHERE userid = {$_SESSION['userid']} AND search_id = {$_POST['submitUse']}
SQL;
	$_SESSION['POST'] = unserialize(SQLOne($query));

	// set highlight of used search
	$aSavedSearchColor = array();
	$aSavedSearchColor[$_POST['submitUse']] = 'color:red; font-weight:bold';
}

Open in new window


You can see under the comment where the styling is added. Then the php code is as follows:

 
<td><input type="text" name="name$i" id="name$i" value="{$aSavedSearchName[$i]}" size="30" maxlength="30" style="{$aSavedSearchColor[$i]}" /></td>

Open in new window


As I have stated, this works for IE and Safari, but Firefox in some cases makes the field size larger as shown in the screen shots. In other cases, it makes the field smaller. In Firefox on Windows, the field size gets bigger, and that is where the screen shots come from. However, oddly, Firefox on the Mac makes the field size smaller. So I am attaching a screen shot of that too.

 Firefox on the Mac with a smaller field size after styling is applied
The second "code view" that could be helpful is a screen shot of what Firebug shows for the attributes of the field. I am expecting even before I prepare this, that some mozilla attributes may be seen. If we can figure out how to override these, then the problem will be solved. It is not that helpful to try to capture all the data from Firebug, but I do notice some differences in the "normal" fields and the ones with changed size. In the "Computed" pane, in the "Box Model" section, on the Mac the normal fields have a width of 216.5px. However, the shrunken field has 210px. On Windows, the box model for the normal field is 202px whereas the expanded field has 233px.

So my next obvious step was to try in Firebug to override the field widths. Setting it to 202px in Windows and 216.5 on the Mac in Firebug sized the text fields to exactly the right size.

This is very much a kludge in my opinion. However, my next step is to put these overrides into the code. It might even be worth reporting this oddity to the Mozilla team because in my opinion this can't be compliant behavior.

So I went ahead and did that, changing the php from the first snippet to the following:

 
if ($_POST['submitUse'])
{
	// load saved search criteria
	$query = <<<SQL
	SELECT data
	FROM search_saved
	WHERE userid = {$_SESSION['userid']} AND search_id = {$_POST['submitUse']}
SQL;
	$_SESSION['POST'] = unserialize(SQLOne($query));

	// set highlight of used search
	if ($is_firefox)
	{
		$FF_width = ($is_mac)  ? 'width: 216.5px;' : 'width: 202px;';
	}
	$aSavedSearchColor = array();
	$aSavedSearchColor[$_POST['submitUse']] = 'color:red; font-weight:bold; ' . $FF_width;
}

Open in new window


After making this change, the field size no longer expands in Firefox, and all is well for the moment.

So I solved my problem myself, due to the "prodding" from the responders.
0
 
LVL 6

Accepted Solution

by:
blueghozt earned 250 total points
ID: 34197235
did you see my example? it would seem that if the fields have CSS declarations for width and line-height then they will remain unchanged in Firefox when text is made bold by your routine - resizing only appears to occur when you are relying on the attribute size=30 to draw the width of the fields rather than a css style of width:200px; (for example)

anyway if your fix works for you well done!
0
 

Author Comment

by:jasimon9
ID: 34197529
I see your point, I think. That is, use the CSS width rather than the HTML width, and no resizing will occur. Probably a better solution.
0
 
LVL 6

Expert Comment

by:blueghozt
ID: 34197550
yes, as well as width I would also use line-height to ensure a comfortable growth space... good luck.
0
 

Author Comment

by:jasimon9
ID: 34231800
Since I solved my problem with a workaround, others have provided a better, more robust IMHO solution, I went ahead and backed my hack out and replaced it with the better solution, which is simply to use CSS width instead of the html size attribute. The better solution works for IE, Firefox on Win, Firefox on Mac, and Safari.

Pending some advice from the moderator, points to be awarded.
0
 
LVL 6

Expert Comment

by:blueghozt
ID: 34231860
well I do hope you take into account the advice I gave in answer ID: 34197235 (and ID: 34187369) which was to use CSS and not HTML's size attribute for the inputs to avoid resizing. I had been hinting at the possiblity that I suspected you were not using CSS in the answers prior to your showing us your mark-up.
0
 

Author Comment

by:jasimon9
ID: 34234410
basically that is what I want to do - figure out how to split the points properly
0
 

Author Comment

by:jasimon9
ID: 34234526
Actually, I think I am going to just give the points to blueghozt for the correct solution implied in his post: do not use  HTML size then override it for Firefox; instead just forget about the HTML size and style with CSS width to begin with.

When that is done, you have a more robust solution, and the hack is not needed.
0
 

Author Closing Comment

by:jasimon9
ID: 34234534
I changed my code to use CSS width to begin with, and eliminate the hack entirely.
0

Featured Post

[Webinar] Learn How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

690 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question