homepage Welcome to WebmasterWorld Guest from 54.166.84.82
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Applying Class in IE 9 "Chops off" default list item
rocknbil

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4433633 posted 7:07 pm on Mar 26, 2012 (gmt 0)

Browser: IE 9 specific (to my knowledge)

Jquery versions: Appears to be any version

Doctype: XHTML transitional

The problem: I have a form set up that during validation if the fields are empty a class is applied that highlights the fields/selects list and bolds the text. In IE 9 only, this causes the first item in the select list to trucate by exactly one character. In the example below, the word "-SELECT-" truncates to "-SELECT". I'd "sorta" worked around it by adding dashes on either side of the default list item, but you can see without them it would truncate to "SELEC".

I've also eliminated other select lists from this form - these too were getting their last character "chopped."

I've tried a couple things to get around it (example, drawing all the space out of the state list) but can't seem to get at the cause. Any ideas or is this just another Internet Destroyer bug?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1
/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Some Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
form .needsfilled { background: #ffff00; color: #000; font-weight: bold; }
form select { width: 200px; }
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
lp_required = {
'state': 'state'
};
$("#lp-forms").submit(function(){
for (key in lp_required) {
var input = $('#lp-forms #'+key);
if (input.val() == "") {
input.addClass("needsfilled");
} else {
input.removeClass("needsfilled");
}
}
return false;
});
});
</script>
</head>
<body>
<form method="post" id="lp-forms" action="">
<p><label for="state">State/Province: <span>*</span></label>
<select id="state" name="state">
<option value="">-SELECT-</option><option value="AK">AK</option><option value="AL">AL</option>
<option value="AR">AR</option><option value="AZ">AZ</option><option value="CA">CA</option>
<option value="CO">CO</option><option value="CT">CT</option><option value="DC">DC</option>
<option value="DE">DE</option><option value="FL">FL</option><option value="GA">GA</option>
<option value="HI">HI</option><option value="IA">IA</option><option value="ID">ID</option>
<option value="IL">IL</option><option value="IN">IN</option><option value="KS">KS</option>
<option value="KY">KY</option><option value="LA">LA</option><option value="MA">MA</option>
<option value="MD">MD</option><option value="ME">ME</option><option value="MI">MI</option>
<option value="MN">MN</option><option value="MO">MO</option><option value="MS">MS</option>
<option value="MT">MT</option><option value="NC">NC</option><option value="ND">ND</option>
<option value="NE">NE</option><option value="NH">NH</option><option value="NJ">NJ</option>
<option value="NM">NM</option><option value="NV">NV</option><option value="NY">NY</option>
<option value="OH">OH</option><option value="OK">OK</option><option value="OR">OR</option>
<option value="PA">PA</option><option value="RI">RI</option><option value="SC">SC</option>
<option value="SD">SD</option><option value="TN">TN</option><option value="TX">TX</option>
<option value="UT">UT</option><option value="VA">VA</option><option value="VT">VT</option>
<option value="WA">WA</option><option value="WI">WI</option><option value="WV">WV</option>
<option value="WY">WY</option>
</select></p>
<p id="submit-row"><input type="submit" name="submitButton" id="submitButton" value="Submit"/></p>
</form>
</body>
</html>

 

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4433633 posted 7:59 pm on Mar 26, 2012 (gmt 0)

It seems to be related to setting it to be bold, but I wasn't able to determine why. Very strange.

rwilson



 
Msg#: 4433633 posted 9:15 pm on Mar 26, 2012 (gmt 0)

Not sure why this works but, try this. Define bold in the input specifically.


form .needsfilled { background: #ffff00; color: #000; /* font-weight: bold; */}
input.needsfilled{font-weight: bold;}

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4433633 posted 10:33 pm on Mar 26, 2012 (gmt 0)

That would work because it's not making the select element bold, but if the desired result is that the select element gets bolded, then this doesn't help.

rocknbil

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4433633 posted 4:34 pm on Mar 27, 2012 (gmt 0)

Well, it works in that it stops chopping the word -SELECT- but it no longer bolds it. :-) I tried form select.needsfilled { font-weight:bold; } and it does the exact same thing.

It's as if IE has a "rendering space" for the select element option's text and doesn't know to expand it when applying bold dynamically. When I set the style in the sheet, or do this,

<select id="state" name="state" class="needsfilled">

then

$(document).ready(function(){
$('#lp-forms #state').removeClass("needsfilled");

It accepts it normally without chopping it off. Pretty tacky workaround. :-/

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4433633 posted 5:47 pm on Mar 27, 2012 (gmt 0)

Got it down to a base case:
[jsfiddle.net...]
Removing any of the remaining options results in the text NOT getting snipped.

rocknbil

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4433633 posted 4:26 pm on Mar 28, 2012 (gmt 0)

You mean shortening the list? I'd noticed that early on, that it made the problem go away, but obviously that's not an "option" (ugh, awful pun . . .) That's also why I drew space out of it. Unless I'm missing something else more significant (besides the doctype.)

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4433633 posted 4:53 pm on Mar 28, 2012 (gmt 0)

Yes, I meant shortening the list (which, as you mentioned, is not an option). It's an interesting problem. I'd love to know what the cause is. Why does the problem go away with 18 items or less? It's a very strange mystery.

rocknbil

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4433633 posted 3:45 pm on Mar 29, 2012 (gmt 0)

The funny thing about that (and why I didn't mention it, because it's a rather long tangent) is that was the first solution I arrived at. I fiddled with it a bit (like almost an hour) and then . . .

There are **other** select lists in this form. They too were getting the default item "chopped." I'd had my attention focused on the state list and didn't even notice. :-\. These lists were only in the range of 12 and 10 items, respectively. So the long list theory fell apart at that point.

I even wondered if "state" was some internal word that was getting futzed up on rendering (answer was no.)

+1 new species of I.E. bug. :-\

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4433633 posted 4:23 pm on Mar 29, 2012 (gmt 0)

I wonder if the string length of the options affects it somehow.

rocknbil

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4433633 posted 5:16 pm on Mar 30, 2012 (gmt 0)

LOL . . . thought I'd play Dudley Do-right and submit a bug report, after 15 minutes or so of creating a Windows live account, etc., "We are currently only accepting bug reports for IE 10 beta."

Microsoft is ignorant and apathetic: we don't know, and we don't care. :-\

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved