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

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

ただいまの
回答率

87.61%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,246
退会済みユーザー

退会済みユーザー

モーダルの中で

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

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

まずシンプルに <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>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

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

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


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

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

.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
  float: left;
  clear: both;
  margin: 0;
  padding: 3px 0.4em;
}

.ui-menu-item {
  float: left;
}

.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup::before,
.ui-selectmenu-menu > ul:after {
  content: '';
  display: block;
  clear: both;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/15 15:29

    回答ありがとうございます

    >追加先を選択できる
    トップレベルのオプションに appendTo: というオプションがあったのですね
    render の仕方を変更するメソッドの方ばかり見ていて調べ方が足りませんでした

    >並びについては float を使えばいいかもしれません
    最初に float もためして optgroup の before に clearfix をはさむまではやったのですが
    全部横並びになって clear がうまくきかなかったので断念したのですが
    optgroup 自体にも clear: both をつけないといけなかったのですね
    大変参考になりました

    キャンセル

0

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

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/15 11:14

    回答ありがとうございます


    今は質問の都合上モーダル中にプルダウンしかおいてませんが
    他にもいろいろ配置してモーダル内でスクロールできるようにする予定で
    プルダウン時の top の値が固定ではないので縦幅の最大値を決められないのです
    top がいくつであっても bottom が body 限界で収まるようにできればいいのですが
    bottom 指定をするとなぜか表示されなくなってしまいます
    bootstrap モーダルの中でさらに jqueryui の absolute 要素を生成してるのでそのへんが干渉してるっぽいですが

    ② >flex-boxかinline-blockで並べるしかない
    bootstrap というより jqueryui がプルダウンのHTMLを生成しているので
    ボタンを押すと出現するプルダウンと
    その中のレイアウトをコーディングするしかないということですね

    ライブラリを使って楽するつもりが使い方がわからず困ってる時間のほうが長いのは本末転倒なので
    自力で部品をかく方向ですすめることにします
    ありがとうございました

    キャンセル

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

  • ただいまの回答率 87.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る