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

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

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

TableView(UITableView)とは、リスト形式で表示するコントロールで、ほとんどのアプリに使用されています。画面を「行」に分けて管理し、一般的には各行をタップした際に詳細画面に移動します。

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

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

Q&A

2回答

1344閲覧

Bootstrap4 .tableがbody内におさまりません。

koh-s

総合スコア9

TableView

TableView(UITableView)とは、リスト形式で表示するコントロールで、ほとんどのアプリに使用されています。画面を「行」に分けて管理し、一般的には各行をタップした際に詳細画面に移動します。

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

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

0グッド

0クリップ

投稿2020/05/05 06:11

編集2022/01/12 10:55

前提・実現したいこと

bodyのwidth内に.tableを収めたい。
あるいはモーダル表示を途切れない様に表示させたい。
願わくば、上記両方を実現したい。
※スマホ表示の時のみ解決できてば本件の問題はクリアとなります。

目指している形は下記の画像のようにモーダルがしっかり全体が見え、操作に支障がないようにしたい。
※PC画面のwidthでの操作例となります。
目指している形

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

編集モーダルを表示させるとモーダルが途中で途切れてしまい、スクロールなどもできず、固定されている。
途切れているモーダル

下記添付1画像のようにbodyのwidth内にtableが収まらないのが原因のように現在は受け取っています。
イメージ説明

viewの.tableはbootstrap4の.tableを使用しています。

ruby

1テーブルのページです 2[edit.html.erb] 3 4<% provide(:title, '履歴') %> 5<% provide(:home, 'history') %> 6<% provide(:navbar_text, 'black') %> 7 8<div class="container"> 9 <div class="table-responsive"> 10 <div class="w-50"><%= render 'shared/flash_messages' %></div> 11 <h1 class="text-center health-top">履歴</h1> 12 13 <table class="table table-bordered table-condensed table-hover table-striped" id="table-healths"> 14 <thead> 15 <tr> 16 <th rowspan="2">日付</th> 17 <th rowspan="2">曜日</th> 18 <th colspan="2">体情報</th> 19 <th colspan="3">睡眠情報</th> 20 <th rowspan="2">水分</th> 21 <th rowspan="2">お通じ</th> 22 <th rowspan="2">編集</th> 23 </tr> 24 <tr> 25 <th>体重</th> 26 <th>体脂肪</th> 27 <th>就寝時間(前日)</th> 28 <th>起床時間</th> 29 <th>睡眠時間</th> 30 </tr> 31 </thead> 32 33 <tbody> 34 <% @healths.each do |h| %> 35 <tr> 36 <!-- 日付 --> 37 <td class='<%= css_class(h.day) %> pr-0 pl-0'><%= l(h.day, format: :short) %></td> 38 <!-- 曜日 --> 39 <td class='<%= css_class(h.day) %>'> 40 <%= $days_of_the_week[h.day.wday] %> 41 </td> 42 <!-- 体重 --> 43 <td> 44 <% if h.weight.present? %> 45 <%= h.weight %> 46 <%= 'kg' %> 47 <% end %> 48 </td> 49 <!-- 体脂肪 --> 50 <td> 51 <% if h.body_fat.present? %> 52 <%= h.body_fat %> 53 <%= '%' %> 54 <% end %> 55 </td> 56 <!-- 就寝時間 --> 57 <td> 58 <% if h.bedtime_at.present? %> 59 <%= l(h.bedtime_at, format: :short) %> 60 <% end %> 61 </td> 62 <!-- 起床時間 --> 63 <td> 64 <% if h.getuptime_at.present? %> 65 <%= l(h.getuptime_at, format: :short) %> 66 <% end %> 67 </td> 68 <!-- 睡眠時間 --> 69 <td> 70 <% if h.bedtime_at.present? && h.getuptime_at.present? %> 71 <%= sleeping_time(h, h.bedtime_at, h.getuptime_at) %> 72 <% end %> 73 </td> 74 <!-- 水分 --> 75 <td> 76 <% if h.water == true %> 77 <%= "摂取あり" %> 78 <% end %> 79 </td> 80 <!-- お通じ --> 81 <td> 82 <% if h.bowel_movement == true %> 83 <%= "あり" %> 84 <% end %> 85 </td> 86 <!-- 編集 --> 87 <td> 88 <div> 89 <% if h.day <= Date.today %> 90 <%= link_to "編集", user_healths_edit_day_path(@user.user_id, h.id), remote: true, 91 class: "btn btn-success btn-sm" %> 92 <% end %> 93 </div> 94 </td> 95 </tr> 96 <% end %> 97 </tbody> 98 </table> 99 </div> 100</div> 101 102<div id="edit_day" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"></div> 103

ruby

1モーダルページです 2[_edit_day.html.erb] 3 4<div class="modal-dialog modal-width"> 5 <div class="modal-content"> 6 <div class="modal-header"> 7 <h4 class="modal-title"><%= l(@health.day, format: :long) %>の編集</h4> 8 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 9 </div> 10 <div class="modal-body"> 11 <%= form_with model: @health, url: user_healths_update_day_path(@user, @health) do |f| %> 12 <table class="table table-bordered table-condensed table-hover table-striped health_day_table" id="table-healths"> 13 <thead> 14 <tr> 15 <th rowspan="2">日付</th> 16 <th rowspan="2">曜日</th> 17 <th colspan="2">体情報</th> 18 <th colspan="3">睡眠情報</th> 19 <th rowspan="2">水分</th> 20 <th rowspan="2">お通じ</th> 21 </tr> 22 <tr> 23 <th>体重</th> 24 <th>体脂肪</th> 25 <th>就寝時間(前日)</th> 26 <th>起床時間</th> 27 <th>睡眠時間</th> 28 </tr> 29 </thead> 30 31 <tbody> 32 <tr> 33 <!-- 日付 --> 34 <td class='<%= css_class(@health.day) %> pr-0 pl-0'><%= l(@health.day, format: :short) %></td> 35 <!-- 曜日 --> 36 <td class='<%= css_class(@health.day) %>'> 37 <%= $days_of_the_week[@health.day.wday] %> 38 </td> 39 <!-- 体重 --> 40 <td> 41 <%= f.number_field :weight, step: "0.1", class: "form-control", min: 1, max: 150, 42 autofocus: true, 43 required: true %> 44 </td> 45 <!-- 体脂肪 --> 46 <td> 47 <%= f.number_field :body_fat, step: "0.1", class: "form-control", min: 0, max: 30 %> 48 </td> 49 <!-- 就寝時間 --> 50 <td> 51 <%= f.time_field :bedtime_at, class: "form-control", 52 autofocus: true, 53 required: true %> 54 </td> 55 <!-- 起床時間 --> 56 <td> 57 <%= f.time_field :getuptime_at, class: "form-control" %> 58 </td> 59 <!-- 睡眠時間 --> 60 <td> 61 <% if @health.bedtime_at.present? && @health.getuptime_at.present? %> 62 <%= sleeping_time(@health, @health.bedtime_at, @health.getuptime_at) %> 63 <% end %> 64 </td> 65 <!-- 水分 --> 66 <td> 67 <%= f.check_box :water, {}, true, false %> 68 </td> 69 <!-- お通じ --> 70 <td> 71 <%= f.check_box :bowel_movement, {}, true, false %> 72 </td> 73 </tr> 74 </tbody> 75 </table> 76 <div class="edit-day-btn"> 77 <%= f.submit class: "btn btn-flat-border w-50" %> 78 </div> 79 <% end %> 80 </div> 81 </div> 82 </div>

scss

1// テーブル 2 3* { 4 float: none; 5 position: static; 6} 7 8img { 9 max-width: 100%; 10 height: auto; 11} 12 13#table-healths { 14 // table-layout: fixed; 15 th { 16 vertical-align: middle; 17 text-align: center; 18 } 19 td { 20 vertical-align: middle; 21 text-align: center; 22 } 23} 24 25.col-sm-12 { 26 width: 100%; 27 overflow-x: scroll; 28} 29 30.col-12 { 31 table-layout: fixed; 32} 33

試したこと

.table-responsiveを.containerと.tableのあいだに記述しすれば解決するかと思い、実践。
結果はbody内に収まるわけではなく収まらない分の.tableをスクロールで閲覧が可能となる。
また、モーダルは添付画像の様に途中から見切れてしまい、固定されてしまいます。
こちらにつきましては、bodyのwidth分しか表示されていないことが原因のように受け取ります。
見切れているモーダル

他にはbodyにクラスをつけて半ば強引にwidthを調整しました。

scss

1.history { 2 width: fit-content; 3}

結果はスマホ画面の幅ではなく、PC画面サイズでの表示になる為モーダルも右隅が入りきらない状況です。
惜しいといえば惜しいのですが、スマホ画面に対応という観点では少々方向性が違う気がしています。
fit-content

大変恐れ入りますが、お力をお貸しいただけますようお願い致します。

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

Bootstrap 4.1.1
rails 5.2.3
ruby 2.6.3
cloud9

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

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

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

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

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

m.ts10806

2020/05/05 06:42

レイアウトのみであればRubyに依存しないものとは思います。 ブラウザに表示されたHTMLをご提示ください。
koh-s

2020/05/05 07:11

お忙しい中お返事いただきまして誠にありがとうございます。 ブラウザ表示のHTMLですが、追加補足にて記載させていただきました。 お手数をおかけして申し訳ございませんが、ご確認いただけますようお願い致します。
m.ts10806

2020/05/05 07:15

質問内に入りませんでしたか? いっそのことRailsのコード無くても良いかもしれません。 (任せますが、コードは現象が再現する最小構成で構わないと思います)
guest

回答2

0

単純な話、物理的に横幅に文字が収まらないはずです。

仮に「日付」「曜日」など<th>が1文字だとして、余白が1文字ぶんだとします。

<th>1つの横幅は3em = 16px * 3 = 48px。 <th>は10項目あるので、48 * 10 = 480px。これが<table>の横幅の最低値です。

iPhone Xの横幅が375pxなので、480pxの要素は収まりません。
文字サイズや余白を調整すれば入るかも..と思うかもしれませんが、項目名が縦1列になるので見づらいはずです。

そのため自分なら以下の2つの方法をとります。


[1] テーブル部分だけスクロールさせるようにする

HTML

1<!-- tableの親要素に追加 --> 2<div class="table-area"> 3 <table class="table"> 4 ... 5 </table> 6</div>

CSS

1.table-area { 2 overflow: auto; 3}

[2] レスポンシブ対応を行う
今回は、rowspanを使うと一気にやりにくくなるので今回は現実的ではないですが、
現在のテーブルの縦横を入れ替える、という方法をよく使います。

CSS

1table, 2thead, 3tbody, 4tfoot, 5tr, 6th, 7td { 8 display: block; /* とりあえず全部blockにする */ 9} 10table { 11 display: flex; 12} 13th, 14td { 15 /* thとtdの高さを揃える。複数行になると破綻 */ 16}

また、そうなることが最初からわかっていれば<div>display: flex;で作成したりするほうが楽なので、いまからだと大変な気がします。

投稿2020/05/05 07:34

編集2020/05/05 07:44
new1ro

総合スコア4528

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

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

0

追加補足

html

1 2<!DOCTYPE html> 3<html> 4 <head> 5 <title>履歴 | My Log</title> 6 <meta name="csrf-param" content="authenticity_token" /> 7<meta name="csrf-token" content="IKu/hmNodnov8XmemWxeDmbKthTbEIviKQIm8+Koh4RCk3Jwr6TZz85MlaZw1XJXIK69l/SUwDHSYRLQXGuttQ==" /> 8 9 <meta name="viewport" content="width=device-width,initial-scale=1"> 10 11 <link rel="stylesheet" media="all" href="/assets/application.self-1e7313c531b2eb188d3455b026b197e7ef5e954e80b1fc853e2b0d76e304bef4.css?body=1" data-turbolinks-track="reload" /> 12 <script src="/assets/rails-ujs.self-43e81c501e7e36871a34b4b950451cc7cb047af4e846ec742539e64724582452.js?body=1" data-turbolinks-track="reload"></script> 13<script src="/assets/activestorage.self-1ed4604ac2170045f1ffca4edb81a75246661555e4f9cf682bb8a21825e32e1c.js?body=1" data-turbolinks-track="reload"></script> 14<script src="/assets/turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1" data-turbolinks-track="reload"></script> 15<script src="/assets/articles.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script> 16<script src="/assets/action_cable.self-69fddfcddf4fdef9828648f9330d6ce108b93b82b0b8d3affffc59a114853451.js?body=1" data-turbolinks-track="reload"></script> 17<script src="/assets/cable.self-8484513823f404ed0c0f039f75243bfdede7af7919dda65f2e66391252443ce9.js?body=1" data-turbolinks-track="reload"></script> 18<script src="/assets/healths.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script> 19<script src="/assets/homes.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script> 20<script src="/assets/profiles.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script> 21<script src="/assets/users.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script> 22<script src="/assets/jquery3.self-e200ee796ef24add7054280d843a80de75392557bb4248241e870fac0914c0c1.js?body=1" data-turbolinks-track="reload"></script> 23<script src="/assets/popper.self-55bd1408b0e4ff3edf21524b78fbe2266615c8015ce0e5f0828089b1de27d63c.js?body=1" data-turbolinks-track="reload"></script> 24<script src="/assets/bootstrap/util.self-32c933709f03802cab6990dadb15257dcca78c60790311303e1f69319bb5ec09.js?body=1" data-turbolinks-track="reload"></script> 25<script src="/assets/bootstrap/scrollspy.self-9c4010d9389b7b27e3247fcbb0cc4425f15d7df2d0d3464b9c3a9022632f1dc8.js?body=1" data-turbolinks-track="reload"></script> 26<script src="/assets/bootstrap/collapse.self-f40766e711b829f346a1d3f6ca132348a77eef7cdfd28732ba8afcf2c996dc89.js?body=1" data-turbolinks-track="reload"></script> 27<script src="/assets/bootstrap/alert.self-6174a81cd2fbcf8bc9949957661638e9716cb0390e0fcf29fafcdc0f2351c58f.js?body=1" data-turbolinks-track="reload"></script> 28<script src="/assets/bootstrap/tooltip.self-b2c5fc72d4e22d1516e9713d3ee1ffa6f92ed11722175e2a9b88c3acbe0bbc09.js?body=1" data-turbolinks-track="reload"></script> 29<script src="/assets/bootstrap/popover.self-3d5b251608f27dbdae33a816e4736ae6e8a8e1729af1fc0c10eb234bf0f494c5.js?body=1" data-turbolinks-track="reload"></script> 30<script src="/assets/bootstrap/dropdown.self-7abc7d81497e5228d193f1151e74cd9f683732d7ab3e9654f714a4d75fbd41c0.js?body=1" data-turbolinks-track="reload"></script> 31<script src="/assets/bootstrap/button.self-5e0c9bfb00dc1db87237215c889765533d8b0744d96538915cff2ac0e29a3825.js?body=1" data-turbolinks-track="reload"></script> 32<script src="/assets/bootstrap/modal.self-711cfe854709180e4c826346dd982c6df3eabc0eab949d2a1560201a139dccfa.js?body=1" data-turbolinks-track="reload"></script> 33<script src="/assets/bootstrap/carousel.self-684b442295b055f9cdba73cb596ffdb733024661042cfaee5637c28350efdd28.js?body=1" data-turbolinks-track="reload"></script> 34<script src="/assets/bootstrap/tab.self-f8f47356299f63d5a6828b6954f5e92bf82d85370f16410b5ae89d3e1effdd96.js?body=1" data-turbolinks-track="reload"></script> 35<script src="/assets/bootstrap-sprockets.self-636159b35205da4142a43bc02d2849d77d3ac07a0946211585cde15a9c6ff21f.js?body=1" data-turbolinks-track="reload"></script> 36<script src="/assets/chartkick.self-f46c1b0cd1c1416287370a921db044cb589c7d681ab888291e08d1a26921db10.js?body=1" data-turbolinks-track="reload"></script> 37<script src="/assets/Chart.bundle.self-ed6137ff435e8d1182fbaed54f869a29748bf1cbbe26256f1015415448c2ac5e.js?body=1" data-turbolinks-track="reload"></script> 38<script src="/assets/application.self-3b674cc21c46e45472226fa37e9cfbc2f81937ec21008808e57f966ffd5883b9.js?body=1" data-turbolinks-track="reload"></script> 39 </head> 40 41 <body class="history"> 42 <header> 43 <div class='fixed-top'> 44 <nav class="navbar navbar-expand-lg "> 45 <a class="navbar-brand black" href="/">My Log</a> 46 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> 47 <span class="navbar-toggler-icon black"></span> 48 </button> 49 <div class="collapse navbar-collapse" id="navbarNavDropdown"> 50 51 <ul class="navbar-nav mr-auto"> 52 <li class="nav-item dropdown"> 53 <a class="nav-link dropdown-toggle black" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 54 日記 55 </a> 56 <div class="dropdown-menu" aria-labelledby="navbarDropdown"> 57 <a class="dropdown-item" href="/articles">日記一覧</a> 58 <a class="dropdown-item" href="/articles/new">日記をつける</a> 59 </div> 60 </li> 61 <li class="nav-item"> 62 <a class="nav-link black" href="/users/17">Health一覧</a> 63 </li> 64 <li class="nav-item d-block d-sm-none"> 65 <a class="nav-link black" href="/users/17/edit">履歴</a> 66 </li> 67 <li class="nav-item"> 68 <a class="nav-link black" href="#">ログイン中:テスト17</a> 69 </li> 70 </ul> 71 72 <ul class="navbar-nav"> 73 <li class="nav-item"> 74 <a class="nav-link black" href="/users/edit">アカウント編集</a> 75 </li> 76 <li class="nav-item"> 77 <a class="nav-link black" rel="nofollow" data-method="delete" href="/users/sign_out">ログアウト</a> 78 </li> 79 </ul> 80 </div> 81 </nav> 82 </div> 83</header> 84 85<div class="container"> 86 <div class="table-responsive"> 87 <div class="w-50"></div> 88 <h1 class="text-center health-top">履歴</h1> 89 90 <table class="table table-bordered table-condensed table-hover table-striped" id="table-healths"> 91 <thead> 92 <tr> 93 <th rowspan="2">日付</th> 94 <th rowspan="2">曜日</th> 95 <th colspan="2">体情報</th> 96 <th colspan="3">睡眠情報</th> 97 <th rowspan="2">水分</th> 98 <th rowspan="2">お通じ</th> 99 <th rowspan="2">編集</th> 100 </tr> 101 <tr> 102 <th>体重</th> 103 <th>体脂肪</th> 104 <th>就寝時間(前日)</th> 105 <th>起床時間</th> 106 <th>睡眠時間</th> 107 </tr> 108 </thead> 109 110 <tbody> 111 <tr> 112 <!-- 日付 --> 113 <td class='text-black pr-0 pl-0'>05/01</td> 114 <!-- 曜日 --> 115 <td class='text-black'> 116117 </td> 118 <!-- 体重 --> 119 <td> 120 60.4 121 kg 122 </td> 123 <!-- 体脂肪 --> 124 <td> 125 11.0 126 % 127 </td> 128 <!-- 就寝時間 --> 129 <td> 130 21:00 131 </td> 132 <!-- 起床時間 --> 133 <td> 134 09:00 135 </td> 136 <!-- 睡眠時間 --> 137 <td> 138 12.0 139 </td> 140 <!-- 水分 --> 141 <td> 142 摂取あり 143 </td> 144 <!-- お通じ --> 145 <td> 146 </td> 147 <!-- 編集 --> 148 <td> 149 <div> 150 <a class="btn btn-success btn-sm" data-remote="true" href="/users/17/healths/1/edit_day">編集</a> 151 </div> 152 </td> 153 </tr> 154 ・・・・・・・ 155      ・・・・・・ 156      ・・・・・ 157      ・・・・ 158 </tbody> 159 </table> 160 </div> 161</div> 162 163<div id="edit_day" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"></div> 164 165 </body> 166</html> 167

投稿2020/05/05 07:09

koh-s

総合スコア9

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問