質問編集履歴
1
解決したソースを掲載しますした。
test
CHANGED
File without changes
|
test
CHANGED
@@ -85,3 +85,73 @@
|
|
85
85
|
Eclipse 内部ブラウザ および Google Chrome 49.0.2623.87 m
|
86
86
|
|
87
87
|
を使用。
|
88
|
+
|
89
|
+
|
90
|
+
|
91
|
+
|
92
|
+
|
93
|
+
###★解決結果
|
94
|
+
|
95
|
+
いただいた回答を元に問題を解決したソースを掲載します。
|
96
|
+
|
97
|
+
jquery-ui.cssにある.ui-dialogにoverflowの定義がありました。
|
98
|
+
|
99
|
+
.ui-dialog では hidden
|
100
|
+
|
101
|
+
.ui-dialog .ui-dialog-content では auto
|
102
|
+
|
103
|
+
この2つの定義を visible に変更することで、autocomplete のリストがダイアログを枠を超えて表示されました。
|
104
|
+
|
105
|
+
表示(open)の際に変更を行い、閉じる(close)の際に元に戻しています。戻さないとcssが変更されたままになるためです。
|
106
|
+
|
107
|
+
```
|
108
|
+
|
109
|
+
$("#hoge").click(function(){
|
110
|
+
|
111
|
+
var uiDialog_overflow;
|
112
|
+
|
113
|
+
var uiDialogContent_overflow;
|
114
|
+
|
115
|
+
$('<div id="dialogHoge"> /').dialog({
|
116
|
+
|
117
|
+
open: function() {
|
118
|
+
|
119
|
+
uiDialog_overflow = $('.ui-dialog').css('overflow');
|
120
|
+
|
121
|
+
$('.ui-dialog').css('overflow', 'visible');
|
122
|
+
|
123
|
+
uiDialogContent_overflow = $('.ui-dialog .ui-dialog-content').css('overflow');
|
124
|
+
|
125
|
+
$('.ui-dialog .ui-dialog-content').css('overflow', 'visible');
|
126
|
+
|
127
|
+
$(this)
|
128
|
+
|
129
|
+
.append('<div id="formDialogHoge">')
|
130
|
+
|
131
|
+
.append('<input type="text" id="hoge" name="hoge"/>')
|
132
|
+
|
133
|
+
.append('<input type="text" id="hogehoge" name="hogehoge"/>')
|
134
|
+
|
135
|
+
$("#hogehoge").autocomplete({
|
136
|
+
|
137
|
+
source: ["a", "aa", "ab", "bb", "b"]
|
138
|
+
|
139
|
+
});
|
140
|
+
|
141
|
+
},
|
142
|
+
|
143
|
+
close: function(event, ui) {
|
144
|
+
|
145
|
+
$(this).dialog("destroy").remove();
|
146
|
+
|
147
|
+
$('.ui-dialog').css('overflow', uiDialog_overflow);
|
148
|
+
|
149
|
+
$('.ui-dialog .ui-dialog-content').css('overflow', uiDialogContent_overflow);
|
150
|
+
|
151
|
+
}
|
152
|
+
|
153
|
+
});
|
154
|
+
|
155
|
+
});
|
156
|
+
|
157
|
+
```
|