TitlePane: closing then opening makes text in !ValidationTextBox disappear (IE6, IE7)

[maruthupandian sb]

Hi, we are using spring webflow project with dojo elements with the help of spring decoration for UI.

In my jsp screen, i have created a title pane element using 'dijit.TitlePane?' and kept few validation text box elements in it. when i run the jsp in IE explorer, while toggle the title pane the words return in the validation text box is jumbled from its position and when i mouse over or move the curser its coming to its position. sometimes even worsen than that, when i mouse over each of the validation textbox then only its displaying the word.

I have created a sample Apache deployable application to show the Dojo issue i mentioned in my earlier post. but i cannot upload the WAR file in this location. so i have attached the JSP file which implements the Title Pane and you can use INTERNET EXPLORER to see the issue in title pane.

i am having three validation text boxes in title pane, write some value in those validation text box and toggle the title pane and see those values written in the textbox will be hidden or jumbled from its position. On mouseover or moving your mouse will arrange the jumbled words.

[bill]

Please attach an HTML file test case. Basically, whatever HTML is getting sent to your browser (although as small a testcase as possible).

[maruthupandian sb]

Hi Bill, i have attached the "TitlePane?.html" file, which can directly open in the IE browser. When you open the File you can see a TitlePane? with three ValidationTextBox?, please enter some value in those ValidationTextBox? and Toggle the TitlePane? Twice to open it again. After that you can see the text entered in the ValidationTextBox? will be hidden until you move your mouse (or) mouse over to those fields.

please let us know how to fix this issue, Also please note that we have tested it with IE 7 Explorer. Thanks in Advance!!

[bill]

Thanks, that's a good testcase, I'll take a look, although these rendering glitches are hard to fix.

Likely the workaround is to do something like layoutHackIE7() does, namely calling the code below on each of your ValidationTextBox widgets after the open completes:

myWidget.domNode.style.filter = (new Date()).getMilliseconds();

Could of course use dojo.query() to find the nodes that need to be updated, rather than listing them explicitly.

[maruthupandian sb]

Hi Bill,
we have tried your suggestion with the onShow event in the title pane, but still we are experiancing the same issue. For your reference i have attached the HTML file with onShow Event implementation.

Please refer the HTML and let me know if i understand your suggestion correctly.

[bill]

I think unfortunately onShow() fires at the start of the show animation rather than the end. Can you try connecting to TitlePane._wipeIn.onEnd? Or just doing it on a setTimeout?

[maruthupandian sb]

Hi Bill,
As per your suggestion we have tried connecting to TitlePane?._wipeIn.onEnd, but still we are facing the same issue,

the coding snippet I have added to implement your suggestion,
dojo.addOnLoad(function() {

var tp = dijit.byId('TitlePaneID');

dojo.connect(tp._wipeIn, "onEnd", function(){

dijit.byId("testBoxID").style.filter = (new Date()).getMilliseconds();

});

});

the another suggestion with setTimeout, i dont know how to implment it. could you please help me to understand more on this.

[bill]

There's a little (but important) mistake you made; you need to set style on the DOMNode associated with the widget, not on the widget itself.

Doing

dijit.byId("testBoxID").domNode.style.filter = (new Date()).getMilliseconds();

or

dijit.byId("testBoxID").focusNode.style.filter = (new Date()).getMilliseconds();

works.

A less fragile solution is:

dojo.connect(tp._wipeIn, "onEnd", function(){
	dojo.query(".dijitTextBox", tp.domNode).style("filter", (new Date()).getMilliseconds());
});

I'm attaching a working file.

I'll leave this ticket open because I think in the future I'll convert TitlePane to use CSS animations and hopefully that will make the problem go away.

[bill]

file demonstrating workaround to get ValidationTextBox? text to reappear

[maruthupandian sb]

Thank you Bill,

we have implemented the changes in our Application and its working perfectly fine. Even its working for Filtering Select and other components as well. it was a very nice learning for me. Thank you so much Bill.

i am waiting to see the CSS animations for TitlePane?.

[bill]

Closing this as wontfix, given the declining popularity of IE6 & IE7, and the workaround.