change z-index of the auto-completion

[12年前 に Yannick Weinz によって更新されました。]

Hi,

we are using the aui-autocomplete modul of the Alloy framework in our liferay server, unfortunately, the auto-complete box has a z-index of 0 and can't be overwritten by any css-class, because someone had to code it in a way that the style of the auto-complete box is already set with a z-index of 0...

any way to change it?

[12年前 に José Manuel Domínguez Romero によって更新されました。]

Hi,

A way to modify the css styles of an element is through javascript.

You get the element to which you want to modify an attribute css and then, change his value. Simple.

Regards.

[12年前 に Yannick Weinz によって更新されました。]

ah well thanks but that doesnt help me at all.

the Problem is that the aui-autocomplete modul sets the style attribut for the autocompletion box, and sets the z-index to 2. It also sets the class and id automatically and i CANT set an id, class or anything to that (or at least i don't know any way to do that). So i have no way to acces this element via javascript directly. All i can do (that is the current solution that we are using) is searching for all elements with the class "aui-autocomplete-results" (because that is one of the classes that all those autocomplete elements have) and change the z-index for all of them to 2. Problem is, i only want to change one specific autocomplete element's z-index to 2 and not all but well, it works right now.... but would be nice if there was a way to set the z-index when creating the autocompletion...

[12年前 に José Manuel Domínguez Romero によって更新されました。]

<aui:script use="aui-autocomplete">

    var cities = [
             ['AH', 'Ahmedabad', 'The Land of IIM'],
             ['AM', 'Amritsar', 'City of golden Temple'],
             ['BL', 'Bangalore', 'Silicon Valley of India'],
             ['CA', 'Calcutta', 'City of Joy'],
             ['DL', 'Delhi', 'Land of Hearts'],
             ['JA', 'Jaipur', 'The Pink City'],
             ['JP', 'Jodhpur', 'The Blue City'],
             ['SU', 'surat', '.Diamond City']
    ];

   window.XXX = new A.AutoComplete(
        {
            dataSource: cities,
            schema: {
                resultFields: ['key', 'name', 'description']
            },
            matchKey: 'name',
            delimChar: ',',
            typeAhead: true,
            contentBox: '#<portlet:namespace />drop-down-1'
        }
    );

	XXX.formatResult = function(oResultData, sQuery, sResultMatch) {
		var tmp = "" + this.overlay;
		var node = document.getElementById(tmp.substring((tmp.indexOf("[") + 1), tmp.indexOf("]")));
		alert(node.style.zIndex);
		node.style.border = "5px solid black";

		return (sResultMatch);
	};
	XXX.render();
</aui:script>

[12年前 に Josh Hibschman によって更新されました。]

Another solution would be to use alloy's overlay manager, for example:

//AUI ready, use, or require  'aui-overlay-manager'

var overlayManager = new A.OverlayManager();
overlayManager.register(other-confilcting-overlays);

var autoComplete = new A.AutoComplete(
                       ....
                        on:{
                            containerExpand:function(e){
                                overlayManager.register(this.overlay);
                                overlayManager.bringToTop(this.overlay);
                            }
                )