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

モーダルの中で

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

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

まずシンプルに <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画面だとまだ横幅に余裕があり縦幅があふれるので
地域：　県名　を同じ行に並べたい

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

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>

行動規範の内容に同意します

回答2件

ベストアンサー

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

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 をつけないといけなかったのですね大変参考になりました

行動規範の内容に同意します

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を生成しているのでボタンを押すと出現するプルダウンとその中のレイアウトをコーディングするしかないということですねライブラリを使って楽するつもりが使い方がわからず困ってる時間のほうが長いのは本末転倒なので自力で部品をかく方向ですすめることにしますありがとうございました

行動規範の内容に同意します

あなたの回答