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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

2回答

675閲覧

プルダウンセレクトで画面スペースを有効活用したい

退会済みユーザー

退会済みユーザー

総合スコア0

jQuery UI

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2019/02/14 09:36

編集2019/02/14 09:43

モーダルの中で

北海道: 北海道
東北:  青森 岩手 秋田 ...
関東:  茨木 栃木 群馬 ...

というレイアウトのプルダウンを作りたいのですがいろいろ試行錯誤してうまくいきません

まずシンプルに <select> を使ってみたのですが
option や optgroup に CSS をつけてもレイアウトが反映されず横並びになりません

そこで jquery-ui の selectmenu (https://jqueryui.com/selectmenu/) というのを使って
スタイルのあたるブロック要素に変換してみたんですが
optgroup と option が全て兄弟要素に展開されてしまってグループごとに横に並べられません

クラスはついているので after に改行をはさもうとしたりしましたがうまくいかず
現状最後にのせたコードのように

.ui-menu-item { display: inline-block; }

が一番ましな見栄えなのですがまだ以下のような問題があります

bootstrap モーダル表示中は body にスクロールがつかないため画面外にいくと見切れてしまう
メニュー側に bottom:10%, overflow: auto とかをつけると表示されず、
max-height もレイアウト次第でかわるので固定値にできない

PC画面だとまだ横幅に余裕があり縦幅があふれるので
地域: 県名 を同じ行に並べたい

この2つをうまく解決する方法はないでしょうか

jquery-ui を使う以外にも簡単にいけてるUIを実現できる方法があれば教えていただけるとありがたいです

<head> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.3.1.min.js" data-turbolinks-eval=false></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <style> .ui-front { z-index: 2000; } .ui-menu-item { display: inline-block; } </style> </head> <body> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#sampleModal"> モーダル・ダイアログ 呼び出し </button> <!-- モーダル・ダイアログ --> <div class="modal fade" id="sampleModal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span>×</span></button> <h4 class="modal-title">タイトル</h4> </div> <div class="modal-body"> <select class="prefecture" id="<%= id %>"> <option>指定なし</option> <optgroup label="北海道"> <option>北海道</option> </optgroup> <optgroup label="東北"> <option >青森県</option> <option >岩手県</option> <option >秋田県</option> <option >山形県</option> <option >宮城県</option> <option>福島都</option> </optgroup> <optgroup label="関東"> <option >茨城県</option> <option >栃木県</option> <option >群馬県</option> <option >埼玉県</option> <option >千葉県</option> <option >東京都</option> <option>神奈川県</option> </optgroup> <optgroup label="甲信越"> <option >新潟県</option> <option >山梨県</option> <option>長野県</option> </optgroup> <optgroup label="東海"> <option >静岡県</option> <option >愛知県</option> <option >岐阜県</option> <option>三重県</option> </optgroup> <optgroup label="北陸"> <option >富山県</option> <option >石川県</option> <option>福井県</option> </optgroup> <optgroup label="近畿"> <option >滋賀県</option> <option >京都府</option> <option >大阪府</option> <option >和歌山県</option> <option>兵庫県</option> </optgroup> <optgroup label="中国"> <option >岡山県</option> <option >広島県</option> <option >鳥取県</option> <option >島根県</option> <option>山口県</option> </optgroup> <optgroup label="四国"> <option >徳島県</option> <option >香川県</option> <option >愛媛県</option> <option>高知県</option> </optgroup> <optgroup label="九州"> <option >福岡県</option> <option >佐賀県</option> <option >長崎県</option> <option >熊本県</option> <option >大分県</option> <option >宮崎県</option> <option>鹿児島県</option> </optgroup> <optgroup label="沖縄"> <option >沖縄県</option> </optgroup> </select> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button> <button type="button" class="btn btn-primary">ボタン</button> </div> </div> </div> </div> <script> $('select').selectmenu(); </script> </body>

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

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

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

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

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

guest

回答2

0

ベストアンサー

メニューの追加先を選択できるので、ダイアログ内のどこかにいれるととりあえずはスクロールバーが出るようになると思います。

jQuery

1$('select').selectmenu({ 2 appendTo: '.modal-body' 3});

https://api.jqueryui.com/selectmenu/#option-appendTo

並びについては float を使えばいいかもしれません。

CSS

1.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup { 2 float: left; 3 clear: both; 4 margin: 0; 5 padding: 3px 0.4em; 6} 7 8.ui-menu-item { 9 float: left; 10} 11 12.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup::before, 13.ui-selectmenu-menu > ul:after { 14 content: ''; 15 display: block; 16 clear: both; 17}

投稿2019/02/15 05:01

x_x

総合スコア13749

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

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

退会済みユーザー

退会済みユーザー

2019/02/15 06:29

回答ありがとうございます >追加先を選択できる トップレベルのオプションに appendTo: というオプションがあったのですね render の仕方を変更するメソッドの方ばかり見ていて調べ方が足りませんでした >並びについては float を使えばいいかもしれません 最初に float もためして optgroup の before に clearfix をはさむまではやったのですが 全部横並びになって clear がうまくきかなかったので断念したのですが optgroup 自体にも clear: both をつけないといけなかったのですね 大変参考になりました
guest

0

bootstrap モーダル表示中は body にスクロールがつかないため画面外にいくと見切れてしまう

メニュー側に bottom:10%, overflow: auto とかをつけると表示されず、
max-height もレイアウト次第でかわるので固定値にできない

まずこちらですが、
①全体を囲むul要素に、vh単位を用いたmax-heightを指定(ブラウザサイズによって可変)
②同じ要素に、overflow: scrollを指定

でそれっぽくなるかと思います。

PC画面だとまだ横幅に余裕があり縦幅があふれるので

地域: 県名 を同じ行に並べたい

こちらについては、地域と件名を囲む要素をもう一つ作って、flex-boxかinline-blockで並べるしかない&HTML構造として適切かと思うのですが、bootstrap詳しくないのでそれ以上わかりません、すみません。

投稿2019/02/14 12:09

yu-smc

総合スコア610

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

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

退会済みユーザー

退会済みユーザー

2019/02/15 02:14

回答ありがとうございます ① 今は質問の都合上モーダル中にプルダウンしかおいてませんが 他にもいろいろ配置してモーダル内でスクロールできるようにする予定で プルダウン時の top の値が固定ではないので縦幅の最大値を決められないのです top がいくつであっても bottom が body 限界で収まるようにできればいいのですが bottom 指定をするとなぜか表示されなくなってしまいます bootstrap モーダルの中でさらに jqueryui の absolute 要素を生成してるのでそのへんが干渉してるっぽいですが ② >flex-boxかinline-blockで並べるしかない bootstrap というより jqueryui がプルダウンのHTMLを生成しているので ボタンを押すと出現するプルダウンと その中のレイアウトをコーディングするしかないということですね ライブラリを使って楽するつもりが使い方がわからず困ってる時間のほうが長いのは本末転倒なので 自力で部品をかく方向ですすめることにします ありがとうございました
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問