I am implementing jQuery-ui autocomplete function in my website. In IE6, the autocomplete box appears below other html elements select, input etc. These elements overlap the autocomplete suggestions box. In IE7, 8, it works fine.
I tried changing the z-index of parent div. I changed the z-index of parent div of input, to which I have attached the autocomplete, to 99. Then I set the style for parent div of other elements to 0. But this did not work.
Anybody else had same problem?
Thanks
Try using the bgiframe plugin. It addresses this specific problem.
Related
I am using jquery ui tabs
Inside a tab i want to inset an autocomplete combobox
When the combobox is outside the tabs it works perfect, but when inside the tabs it doesnt look good.
Here is a screenshot:
Any ideas how to solve this issue?
solved it. i had a class for span inside the tabs ( #tabs span {......} ) –
I need to format multiple containers (div) in a web page to look like a jquery-ui dialog.
The divs should automatically change if I change the theme.
So far I'm applying a jquery-ui tab to the div, but this don't have the same title bar and I need to add a lot of html for each div
Thanks In Advance
Just use the same css as jQuery UI and apply it to your divs.
Examples:
http://jsfiddle.net/Fyj7L/
http://jsfiddle.net/Fyj7L/1/
http://jsfiddle.net/Fyj7L/2/
The problem happens only in IE7:
When I go to the next tab some elements (text input fields, buttons) from the previous tab are not completely 'hidden' and shown on the next tab (just on top of it). Buttons disappear when I mouse over them, but text inputs stay there forever.
I am using jQuery 1.4 and JqueryUI 1.8
Has anyone seen that problem before?
Thanks
i faced the same problem before. My advice - begin with empty tabs, then add step-by-step all elements to their tab-containers. one of them is parsed incorrectly by ie.
I have a textbox that I am attaching jQuery UI's Autocomplete functionality to and I am using CSS to give it a max height via the example here. My problem is that doing this causes the z-index problem that bgiframe solves to come back again, but in a different way. The initial autocomplete menu is above all the controls underneath it, but when I begin to scroll the autocomplete menu falls behind them.
Any suggestions?
EDIT:
This is purely an IE6 bug.
As you can see, after scrolling down the autocomplete falls behind the other controls.
I could solve the problem by replacing offsetHeight by scrollHeight in the following line (from jquery.bgiframe.js) :
height:'+(s.height=='auto'?'expression(this.parentNode.offsetHeight+\'px\')':prop(s.height))+';'+
This change solved the bug for the autocomplete fields with vertical scrollbars. I could not spot any regression in other kinds of dialogs (but I did not run extensive tests).
You need to reverse the z-index order of the form elements (or their containers) using javascript. I.e., "Social Worker" has the lowest, "DX Code" the highest z-index.
You could change the offsetHeight to scrollHeight, like Siggen says, but I have encountered problems when there is only 1 result returned from the autocomplete. The 1 result is squished into a window that only like 2 pxs high.
I found a fix though.
When you have a data.length<2, you should use the offsetHeight, rather than the scrollHeight.
You have to modify autocomplete.js.
Locate this code:
if($.fn.bgiframe)list.bgiframe();
And make it this:
if($.fn.bgiframe){
if(data.length<2)
list.bgiframe({height:'expression(this.parentNode.offsetHeight+\'px\')'});
else
list.bgiframe();
}
Remember, this code should be used in combination with Siggen's fix.
I have used a combination of both parameter for the height like this:
'height:'+(s.height=='auto'?'expression(Math.max(this.parentNode.offsetHeight,this.parentNode.scrollHeight)+\'px\')':prop(s.height))+';'
Look at the max function. Now it is good with no scroll bar (shorter list and longer list as well)
and now the autocomplete component looks perfect in IE6.
Well here's the problem:
I have a PHP index page which uses show/hide layers javascript. I am using the on menu.click function to show and hide content relevant to each menu. On.click all divs are hidden except the content for that menu item , which fades in. The content relating to each menu item are displayed within separate DIVS. The property is applied to all the text within all the divs.
See: http://jobe-group.com/jobeco/uk/2010live/dynamic/content/index.php#
The trouble is that SIFR only appears to be applied to the displayed on.load when the page is first loaded. When this is hidden and the other s shown through the "show" function they load in classic CSS fonts without the SIFR applied.
Is this unavoidable with the SIFR setup. Or am I not calling the divs properly. I have set the SIFR to apply to the selector and indeed it works fine on the for the displayed on load. It doesn't work for the within other . In theory I would think its possible to load the SIFR on all divs on page.load even if those divs are presently visibility:hidden.
What's the verdict on this?
Hope someone can help.
Cheers,
John
After you show the previously hidden div, execute the sIFR.replace calls again to replace the content in those elements.