質問編集履歴

1

解決したソースを掲載しますした。

2016/03/19 23:16

投稿

Hiroshi-Aoki
Hiroshi-Aoki

スコア804

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
+ ```