Search jQuery

jQuery Forum

Using jQuery UI

wrowlands

Accordian cutting off initial form select values in IE9

Need more info

Need more info
Working on it
Answered

in Using jQuery UI • 11 years ago

When the according in IE9 has a form inside and any the fields and the form that includes select values that are preselected with a value from the select list, the last letter or number is cut off until the select drop-down field is clicked on. For instance if the select list is ages and the preselected value is "40", only "4" shows up. If the pre-selected value is a word and the longest word in the select list is the one selected, the last letter is cut off. For instance if the select list is "man", and "woman" and the preselect value is "woman", the value that shows when the page loads is "woma". If the preselect value is "man", the value that shows up is "man". This issue is not happening in prior versions of IE nor is this happening in versions of Firefox, Safari and Opera that I have tested.

Replies(9)

rdworth

Re: Accordian cutting off initial form select values in IE9

11 years ago

Step 1: Construct the same using static html including all the accordion generated html and css classes but no Accordion/jQuery UI JavaScript to identify whether the issue is purely CSS related. That is, save a version of the generated HTML (Firebug can help you do this) and load it on another page with only the jQuery UI theme CSS included, no JavaScript.

Step 2: If Step 1 shows the issue is purely CSS related, keep removing classes and/or rules to determine which is the culprit.

Step 3: If Step 1 shows the issue is not purely CSS related, create a minimal test page on jsfiddle.net or jsbin.com so we can see what you're seeing.

wrowlands

Re: Re: Accordian cutting off initial form select values in IE9

11 years ago

I do not believe this is a CSS issue. On my site I have other pages that have this same form that are not in the accordian and there are no problems.

As to step 3, this will be quite difficult since I would have to link a database to the the form. It will be better if I showed you the site and you could see the issues there.

Run this in IE9 and you will see the problem. This does not happen in other versions of IE, Firefox, Chrome, Safari or Opera.

Step 1: Go to www.cruizing.co
Step 2: To get into the site the user name is "cruizing" and the password is "driving4success" and this will bring you to the home page.
Step 3: In the upper right hand corner log on as user name "jable@able.net, password "12345678"
Step 4: Once in the site hover over the "Search" tab and click on "Quick Search". You will notice that this form has all the fields showing up properly.
Step5: Hover over the "Search" tab and click on "My Searches". You should now see the problem in the first form within the accordian.

Thanks for your help, Wayne

rdworth

Re: Re: Accordian cutting off initial form select values in IE9

11 years ago

I do not believe this is a CSS issue. On my site I have other pages that have this same form that are not in the accordion and there are no problems.

The accordion has css and your form control is inside the accordion so it could be affected by the accordion's css. Before we look at sources of the problem in JavaScript we need to ensure the source of the problem is not in CSS.

As to step 3, this will be quite difficult since I would have to link a database to the the form. It will be better if I showed you the site and you could see the issues there.

We can't work on an issue without confirming that the issue exists completely separate from your system, other than the minimal circumstances and steps required to reproduce it. That means creating a simple page outside of your system that has only three things on it (from your description):

A jQuery UI Accordion
A form inside it
A select box inside it with values (one pre-selected)

That can and needs to be done without your system. It's a bit of html and css and javascript, no database or any other back-end required. It's essential that this page have on it nothing that can be removed and still have the issue present itself. Then we open that minimal test page in IE9 and can prove that the issue exists in the jQuery UI Accordion. Until then, respectfully, we have to assume that the issue exists in your system, because that's the only place it's been seen.

You're saying

A. my select box works inside my page

B. my select box doesn't work when it's inside the accordion

I'm saying

A. your select box works inside your page

B. your select box doesn't work when it's inside the accordion inside your page

Where we need your help is to be able to say

C. your select box doesn't work when it's inside the accordion NOT inside your page

The fact that the select box has no issue inside your page doesn't alone prove that the problem is in the accordion when that accordion is also inside your page.

rdworth

Re: Re: Accordian cutting off initial form select values in IE9

11 years ago

Here's a minimal test case

<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>Select font-size</title>
<style>
.foo { font-size: 1.1em; }
.foo .a { font-size: 1em; }
</style>
<script>
setTimeout(function() {
document.getElementById("container").className = "foo";
}, 1000);
</script>
</head>
<body>
<div id="container">
<select class="a">
<option>1234567890</option>
</select>
<select class="b">
<option>1234567890</option>
</select>
</div>
</body>
</html>

This is a bug in IE9. Feel free to report it to Microsoft (see http://ejohn.org/blog/a-web-developers-responsibility/ for how).

There is a workaround for your situation. Change

<div id="search">

<div id="search" class="ui-widget">

wrowlands

Re: Accordian cutting off initial form select values in IE9

11 years ago

I actually rewrote some of the javascript and got the problems fixed. I no longer have the issue. I always seem to have issues with IE and not the other browsers.

rdworth

Re: Re: Accordian cutting off initial form select values in IE9

11 years ago

Glad you figured something out that works for you.

I always seem to have issues with IE and not the other browsers.

Don't take it personally ;)

pcmaclouis

Re: Re: Accordian cutting off initial form select values in IE9

11 years ago

I am currently experiencing the very same problem and would be most obliged if you could let me know what you changed to correct it. Thanks in advance.