質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

コンボボックス

GUIの要素のひとつです。Listboxと同様にいくつかのうちひとつを選択する機能だが、Comboboxの場合は選択されたもののみがデフォルトとして表示される。

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

1648閲覧

【jQuery UI使用】コンボボックス内の横スクロールバーを出したい

teratai23

総合スコア6

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

コンボボックス

GUIの要素のひとつです。Listboxと同様にいくつかのうちひとつを選択する機能だが、Comboboxの場合は選択されたもののみがデフォルトとして表示される。

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/02/23 01:03

編集2018/02/23 01:12

前提・実現したいこと

Javaベースで企業向けのWebシステムを作っており、
とあるページのコンボボックスで、表示値が横枠に収まり切らない時に
横スクロールを出したいが、出ない。
(縦スクロールは出ています。)

UIの制御にはjQuery UI(v1.12.1)とCSSを使用しており、
ブラウザはIE11を使用しています。

発生している問題・エラーメッセージ

上記の通り、横スクロールを出したいが、出ない。

該当のソースコード

【HTML側】
<html:select property="daibunruiList" size="13" styleClass="wide_select">
<html:optionsCollection name="a2Response" property="daibunruiList" value="CD_MITU_MIDASI_DAI_BUNRUI" label="DISP" />
</html:select>

【上で適用しているスタイルクラス】
.wide_select {
width:400px;
}

試したこと

jQueryの設定ファイル(jquery-ui.css, jquery-ui.min.css, jquery-ui.min.js)内で、
oveflow=hidden, oveflow-x=hidden
と定義されている属性の値をscrollに変えた上でビルドし、
再確認したが、依然としてコンボボックスの横スクロールは出ない。

補足情報(FW/ツールのバージョンなど)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2018/02/23 01:05

コンボボックスにあたるソースは提示できますか?
teratai23

2018/02/23 01:10

はい、以下の通りです。
teratai23

2018/02/23 01:19

該当のソースコード欄に記入しました。よろしくお願い致します。
guest

回答1

0

jQuery UI は関係ないと思います。関係あるようなら言ってください。
IEにはきかないようなので、ラッパーに……

CSS

1.wrapper { 2 max-width: 400px; 3 overflow: scroll; 4 border: 1px solid #707070; 5} 6 7.wide_select { 8 /*width:400px;*/ 9 border-width: 0; 10}

投稿2018/02/26 03:23

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問