フォーラム

ホーム » Alloy UI » English

構造的に表示 平面上に表示 ツリー上に表示
スレッド [ 前へ | 次へ ]
toggle
Yannick Weinz
change z-index of the auto-completion
2011/05/04 3:33
答え

Yannick Weinz

ランク: Junior Member

投稿: 69

参加年月日: 2010/11/15

最近の投稿

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?
José Manuel Domínguez Romero
RE: change z-index of the auto-completion
2011/05/05 0:54
答え

José Manuel Domínguez Romero

ランク: Regular Member

投稿: 219

参加年月日: 2010/02/03

最近の投稿

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.
Yannick Weinz
RE: change z-index of the auto-completion
2011/05/05 1:23
答え

Yannick Weinz

ランク: Junior Member

投稿: 69

参加年月日: 2010/11/15

最近の投稿

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...
José Manuel Domínguez Romero
RE: change z-index of the auto-completion
2011/05/05 5:30
答え

José Manuel Domínguez Romero

ランク: Regular Member

投稿: 219

参加年月日: 2010/02/03

最近の投稿

 1<aui:script use="aui-autocomplete">
 2
 3    var cities = [
 4             ['AH', 'Ahmedabad', 'The Land of IIM'],
 5             ['AM', 'Amritsar', 'City of golden Temple'],
 6             ['BL', 'Bangalore', 'Silicon Valley of India'],
 7             ['CA', 'Calcutta', 'City of Joy'],
 8             ['DL', 'Delhi', 'Land of Hearts'],
 9             ['JA', 'Jaipur', 'The Pink City'],
10             ['JP', 'Jodhpur', 'The Blue City'],
11             ['SU', 'surat', '.Diamond City']
12    ];
13
14   window.XXX = new A.AutoComplete(
15        {
16            dataSource: cities,
17            schema: {
18                resultFields: ['key', 'name', 'description']
19            },
20            matchKey: 'name',
21            delimChar: ',',
22            typeAhead: true,
23            contentBox: '#<portlet:namespace />drop-down-1'
24        }
25    );
26
27    XXX.formatResult = function(oResultData, sQuery, sResultMatch) {
28        var tmp = "" + this.overlay;
29        var node = document.getElementById(tmp.substring((tmp.indexOf("[") + 1), tmp.indexOf("]")));
30        alert(node.style.zIndex);
31        node.style.border = "5px solid black";
32
33        return (sResultMatch);
34    };
35    XXX.render();
36</aui:script>
Josh Hibschman
RE: change z-index of the auto-completion
2011/10/06 7:16
答え

Josh Hibschman

ランク: New Member

投稿: 1

参加年月日: 2011/07/05

最近の投稿

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

 1
 2//AUI ready, use, or require  'aui-overlay-manager'
 3
 4var overlayManager = new A.OverlayManager();
 5overlayManager.register(other-confilcting-overlays);
 6
 7var autoComplete = new A.AutoComplete(
 8                       ....
 9                        on:{
10                            containerExpand:function(e){
11                                overlayManager.register(this.overlay);
12                                overlayManager.bringToTop(this.overlay);
13                            }
14                )