トップ回答者
ajax cotrol toolkitのコンボボックスがChromeで縦並びになってしまう

質問
-
visual web developer 2010 Expressを使用してWeb アプリケーションプロジェクトを作成しています。
環境は以下です。
WEBサーバ:Windows Server 2008 R2 Standard
SQLServer:microsoft SQL SERVER 2008 R2 Express版
IISのバージョン:Version7.5.7600.16385
.NET のバージョン:Microsoft .NET Framework 4
使用ブラウザ:IE,Firefox,Chrome(すべて最新バージョン)
使用言語:VB
ajax cotrol toolkitを使ってコンボボックスをいくつか配置しています。
IE,Firefoxではうまく表示されているのですが,
Chromeだと,コンボボックスを配置すると自動的に改行されてしまい?,
コンボボックスを横並びにできません。
(横幅はじゅうぶんあります。)
図で示すと
IE,Firefoxだと
□ □ □
と表示されているのが,Chromeだと
□
□
□
となってしまいます。
もし対処法があれば修正したいと思っています。
ちなみにコンボボックス部分のコードは以下のようになっています。
<cc1:ComboBox ID="cmbtanto" runat="server" Width="50px" Height="16px" DataSourceID="SqlDataSource6"
DataTextField="AAA" DataValueField="AAA" MaxLength="0"
style="display: inline;" AutoCompleteMode="SuggestAppend"
ItemInsertLocation="Prepend" AppendDataBoundItems="True">
<asp:ListItem></asp:ListItem>
</cc1:ComboBox> (←全角スペースをふたつ配置してます)
<cc1:ComboBox ID="cmbkakudo" runat="server" Width="50px" Height="16px" DataSourceID="SqlDataSource7"
DataTextField="BBB" DataValueField="BBB" MaxLength="0"
style="display: inline;" AutoCompleteMode="SuggestAppend"
ItemInsertLocation="Prepend" AppendDataBoundItems="True">
<asp:ListItem></asp:ListItem>
</cc1:ComboBox> (←全角スペースをふたつ配置してます)
<cc1:ComboBox ID="cmbshojyo" runat="server" Width="150px" Height="16px" DataSourceID="SqlDataSource5"
DataTextField="CCC" DataValueField="CCC" MaxLength="0"
style="display: inline;" AutoCompleteMode="SuggestAppend"
ItemInsertLocation="Prepend" AppendDataBoundItems="True">
</cc1:ComboBox>
”(←全角スペースをふたつ配置してます)”
とありますが,
スペースを除いても縦並びのままです。
お気づきの点ありましたら教えていただけますでしょうか。
よろしくお願いいたします。- 編集済み masunona 2014年5月16日 6:17
回答
-
どう違うかを見比べるのは、回答者がやるのではなくて、質問者さんにお願いしたいんですが・・・
見比べるのは大変なので、とりあえずの対症療法ですが table を使ってみてはどうですか? 以下のような感じです。
<table> <tr> <td> <asp:ComboBox ID="ComboBox1" ...> </asp:ComboBox> </td> <td> <asp:ComboBox ID="ComboBox2" ...> </asp:ComboBox> </td> <td> <asp:ComboBox ID="ComboBox3" ...> </asp:ComboBox> </td> </tr> </table>
【PS】表題の Chromed を Chrome に訂正していただくようお願いします。
- 編集済み SurferOnWww 2014年5月16日 6:05 PS 追記
- 回答としてマーク masunona 2014年5月16日 6:27
すべての返信
-
生成される html ソースコードを見て、Chrome と他でどう違うか見比べて、その結果を書いていただけませんか?
Chrome のバージョンは 34.0.1847.137 m ですか? 違う場合はそれも書いてください。
- 編集済み SurferOnWww 2014年5月16日 4:42 一行追加
-
いつもありがとうございます!
生成されるソースコードがブラウザによって変わるのですね。
知らなかったです。Chromeのバージョンは34.0.1847.137 mです。
visual web developerで,ブラウザでプレビューし,
IEとChromeのhtmlソースを見てみました。
AAA:□ BBB:□
となっている部分です。Chromeだと
AAA:
□
BBB:
□
となってしまいます。
【IE】
AAA:<div id="MainContent_cmbAAA" style="display:inline;">
<table id="MainContent_cmbAAA_cmbAAA_Table" class="ajax__combobox_inputcontainer" cellspacing="0" cellpadding="0" style="border-width:0px;border-style:None;border-collapse:collapse;display:inline;;top:5px;">
<tr>
<td class="ajax__combobox_textboxcontainer"><input name="ctl00$MainContent$cmbAAA$cmbAAA_TextBox" type="text" maxlength="1" id="MainContent_cmbAAA_cmbAAA_TextBox" autocomplete="off" style="height:16px;width:50px;" /></td><td class="ajax__combobox_buttoncontainer"><button id="MainContent_cmbAAA_cmbAAA_Button" type="button"></button></td>
</tr>
</table><ul id="MainContent_cmbAAA_cmbAAA_OptionList" class="ajax__combobox_itemlist" style="display:none;visibility:hidden;">
<li>b</li><li>c</li><li>f</li><li>fc</li><li>g</li><li>gb</li><li>gc</li><li>h</li><li>i</li><li>k</li><li>kg</li><li>m</li><li>ng</li><li>y</li>
</ul><input type="hidden" name="ctl00$MainContent$cmbAAA$cmbAAA_HiddenField" id="MainContent_cmbAAA_cmbAAA_HiddenField" value="-1" />
</div> (←全角スペースふたつ)
BBB:<div id="MainContent_cmbBBB" style="display:inline;">
<table id="MainContent_cmbBBB_cmbBBB_Table" class="ajax__combobox_inputcontainer" cellspacing="0" cellpadding="0" style="border-width:0px;border-style:None;border-collapse:collapse;display:inline;;top:5px;">
<tr>
<td class="ajax__combobox_textboxcontainer"><input name="ctl00$MainContent$cmbBBB$cmbBBB_TextBox" type="text" maxlength="1" id="MainContent_cmbBBB_cmbBBB_TextBox" autocomplete="off" style="height:16px;width:50px;" /></td><td class="ajax__combobox_buttoncontainer"><button id="MainContent_cmbBBB_cmbBBB_Button" type="button"></button></td>
</tr>
</table><ul id="MainContent_cmbBBB_cmbBBB_OptionList" class="ajax__combobox_itemlist" style="display:none;visibility:hidden;">
<li></li><li>0</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
</ul><input type="hidden" name="ctl00$MainContent$cmbBBB$cmbBBB_HiddenField" id="MainContent_cmbBBB_cmbBBB_HiddenField" value="-1" />
</div> (←全角スペースふたつ)
【Chrome】
AAA:<div id="MainContent_cmbAAA" style="display:inline;">
<table id="MainContent_cmbAAA_cmbAAA_Table" class="ajax__combobox_inputcontainer" cellspacing="0" cellpadding="0" style="border-width:0px;border-style:None;border-collapse:collapse;display:inline;;top:5px;">
<tr>
<td class="ajax__combobox_textboxcontainer"><input name="ctl00$MainContent$cmbAAA$cmbAAA_TextBox" type="text" maxlength="1" id="MainContent_cmbAAA_cmbAAA_TextBox" autocomplete="off" style="height:16px;width:50px;" /></td><td class="ajax__combobox_buttoncontainer"><button id="MainContent_cmbAAA_cmbAAA_Button" type="button"></button></td>
</tr>
</table><ul id="MainContent_cmbAAA_cmbAAA_OptionList" class="ajax__combobox_itemlist" style="display:none;visibility:hidden;">
<li>b</li><li>c</li><li>f</li><li>fc</li><li>g</li><li>gb</li><li>gc</li><li>h</li><li>i</li><li>k</li><li>kg</li><li>m</li><li>ng</li><li>y</li>
</ul><input type="hidden" name="ctl00$MainContent$cmbAAA$cmbAAA_HiddenField" id="MainContent_cmbAAA_cmbAAA_HiddenField" value="-1" />
</div> (←全角スペースふたつ)
BBB:<div id="MainContent_cmbBBB" style="display:inline;">
<table id="MainContent_cmbBBB_cmbBBB_Table" class="ajax__combobox_inputcontainer" cellspacing="0" cellpadding="0" style="border-width:0px;border-style:None;border-collapse:collapse;display:inline;;top:5px;">
<tr>
<td class="ajax__combobox_textboxcontainer"><input name="ctl00$MainContent$cmbBBB$cmbBBB_TextBox" type="text" maxlength="1" id="MainContent_cmbBBB_cmbBBB_TextBox" autocomplete="off" style="height:16px;width:50px;" /></td><td class="ajax__combobox_buttoncontainer"><button id="MainContent_cmbBBB_cmbBBB_Button" type="button"></button></td>
</tr>
</table><ul id="MainContent_cmbBBB_cmbBBB_OptionList" class="ajax__combobox_itemlist" style="display:none;visibility:hidden;">
<li></li><li>0</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
</ul><input type="hidden" name="ctl00$MainContent$cmbBBB$cmbBBB_HiddenField" id="MainContent_cmbBBB_cmbBBB_HiddenField" value="-1" />
</div> (←全角スペースふたつ)
見落としがあったら大変申し訳ないのですが,違いがないように思います。
またお気づきの点ありましたら教えてください。お願いいたします。 -
かるあ 様
ありがとうございます!
失礼しました。DOCUTYPE以下です。
【IE】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
【Chrome】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
引き続きよろしくお願いいたします! -
どう違うかを見比べるのは、回答者がやるのではなくて、質問者さんにお願いしたいんですが・・・
見比べるのは大変なので、とりあえずの対症療法ですが table を使ってみてはどうですか? 以下のような感じです。
<table> <tr> <td> <asp:ComboBox ID="ComboBox1" ...> </asp:ComboBox> </td> <td> <asp:ComboBox ID="ComboBox2" ...> </asp:ComboBox> </td> <td> <asp:ComboBox ID="ComboBox3" ...> </asp:ComboBox> </td> </tr> </table>
【PS】表題の Chromed を Chrome に訂正していただくようお願いします。
- 編集済み SurferOnWww 2014年5月16日 6:05 PS 追記
- 回答としてマーク masunona 2014年5月16日 6:27
-
Hoshinaです
こんにちはこのような場合の常道は,可能な限り単純な書式にしてみることだと思います。
・要素が三つで試されているようですが,これを二つにしてみる
・javascriptやCSSも,可能な限り無くしてみるそこで,SurferOnWwwさんのアドバイスと同様になりますが,
・HTMLの<table>タグを1つだけ使用して
(投稿された内容では,複数の<table>タグを使用しているので)
・要素が二つで試す
・それ以外の要素は外すまず,この条件で試されてはどうですか?
きちんと表示されている状態からスタートしないと,中々原因が分からないと思います。可能な限り単純にしても,現象が再現できる場合,そのHTMLはかなり短くなっているでしょうから,そのまま投稿して,有志の方に再現の有無の確認をお願いできる可能性があると思います。
それでは
-
すでに解決しているので、参考までに
どうもchromeと他のブラウザーで、tableタグのdisplay:inlineに対する挙動が違うのが問題っぽいです。
ACTのコンボボックスのスタイルはインラインで書かれているので、css側からいじるのはちょっとむずかしいですね。
もしtableレイアウトを使わない場合は、Javascriptで実行時にどうにかすればいけるかな。こんな感じ?
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.js"></script> <script type="text/javascript"> $(function($) { $(".ajax__combobox_inputcontainer").css("display", "inline-table"); })($); </script>