Q&A
使っている css ファイルの詳細と html ソースを書いてください。
こんにちわ！
ASP.NET MVC5(VisualStudio2017)でWeb勤務表を作っています。
基本的な質問になるかもしれませんが、テーブルでEditorForとDisplayForを横並びに表示したときに、高さがずれてしまいます。日付と曜日はstyle="margin-top:5px"で調整出来たんですが、DisplayForでどのように調整するのか分かりません。知っている方がいらっしゃいましたら教えてください。
あとDropdownlistの高さ調整と、大きさもEditorForと同じ大きさに変えたいのですが、出来たらこちらもアドバイスお願いします。
Bootstrap ver.3.0.0
ビュー：
@model Kintai_CS_.Models.KintaiModel @{ /**/ ViewBag.Title = "勤務表"; Layout = "~/Views/Shared/_Layout.cshtml"; Dictionary<int, SelectList> dictionary = (Dictionary<int, SelectList>)ViewBag.Situation; } @using (Html.BeginForm()) { @Html.AntiForgeryToken() <header id="header" class="header"> ・・・ </header> <body id="body" class="body"> ・・・ <table class="table"> <tr> <th> <nobr>日付</nobr> </th> <th> <nobr>曜日</nobr> </th> <th> <nobr><div align="center">始業時刻</div></nobr> </th> <th> <nobr><div align="center">終業時刻</div></nobr> </th> <th> <nobr><div align="center">休憩時間</div></nobr> </th> <th> <nobr>所定時間</nobr> </th> <th> <nobr>残業時間</nobr> </th> <th> <nobr><div align="center">勤怠状況</div></nobr> </th> <th> <nobr><div align="center">補助</div></nobr> </th> <th> <nobr><div align="center">備考</div></nobr> </th> </tr> @for (int i = 0; i < Model.Kintais.Count; i++) { int idx = i; <tr> @{ string week = Model.Kintais[idx].date.ToString("ddd"); if (week == "土") { <td><div style="color:blue;margin-top:5px" align="center">@(idx + 1)</div></td> <td><div style="color:blue;margin-top:5px" align="center">@week</div></td> } else if (week == "日") { <td><div style="color:red;margin-top:5px" align="center">@(idx + 1)</div></td> <td><div style="color:red;margin-top:5px" align="center">@week</div></td> } else { <td><div style="margin-top:5px" align="center">@(idx + 1)</div></td> <td><div style="margin-top:5px" align="center">@week</div></td> } } <td> @Html.EditorFor(model => model.Kintais[idx].open, new { htmlAttributes = new { @class = "form-control", style = "width:80px" } }) @Html.ValidationMessageFor(model => model.Kintais[idx].open, "", new { @class = "text-danger" }) </td> <td> @Html.EditorFor(model => model.Kintais[idx].close, new { htmlAttributes = new { @class = "form-control", style = "width:80px" } }) @Html.ValidationMessageFor(model => model.Kintais[idx].close, "", new { @class = "text-danger" }) </td> <td> @Html.EditorFor(model => model.Kintais[idx].rest, new { htmlAttributes = new { @class = "form-control", style = "width:80px" } }) @Html.ValidationMessageFor(model => model.Kintais[idx].rest, "", new { @class = "text-danger" }) </td> <td> @Html.DisplayFor(model => model.Kintais[idx].worktime) @Html.HiddenFor(model => model.Kintais[idx].worktime) </td> <td> @Html.DisplayFor(model => model.Kintais[idx].overtime) @Html.HiddenFor(model => model.Kintais[idx].overtime) </td> <td> @Html.DropDownListFor(model => model.Kintais[idx].situation, dictionary[Model.Kintais[idx].situation], new { htmlAttributes = new { @class = "form-control" } }) </td> <td style="width: 66px"> <nobr> <button type="button" onclick="setRegularWorkTime('@Html.IdFor(model => model.Kintais[i].open)', '@Html.IdFor(model => model.Kintais[i].close)', '@Html.IdFor(model => model.Kintais[i].rest)')" class="btn btn-primary"> 定時 </button> </nobr> </td> <td> @Html.EditorFor(model => model.Kintais[idx].remark, new { htmlAttributes = new { @class = "form-control"} }) @Html.ValidationMessageFor(model => model.Kintais[idx].remark, "", new { @class = "text-danger" }) </td> @Html.HiddenFor(model => model.Kintais[idx].emp_num) @Html.HiddenFor(model => model.Kintais[idx].date) @Html.HiddenFor(model => model.Kintais[idx].id) </tr> } </table> </body> }
asp.net frameworkのため、cssファイルはありません。
ビューの最後に<style type="text/css">や@section Scripts {}がありますが(長くなるので省きました)、そのことでしょうか？
htmlソースはビューに載せてある内容なるかと思いますが。
css ファイルがないはずはあり得ません。ASP.NET MVC で Web アプリを作るには html と css 関係の知識は必須です。少なくともここのような掲示板で話が通じる程度には勉強してください。
勉強不足ですみません。
私の認識ではasp.net mvcではcshtmlファイルにcssとhtmlの内容を入れていると思っていたのですが。
ちなみにcssファイルはソリューションエクスプローラのどこにあるのでしょうか？
そう言われて、勉強まではしなくても、ちょっとはググるなどして調べましたか？ やっていたらそういう返事にはならないと思うのですが・・・
調べましたが分かりませんでした。
CSSファイルだとContentフォルダにbootstrap.cssファイルがありましたが、そのことでしょうか？
その bootstrap.css は適用されていますか？ html ソースを見て確認してください。（注：.cshtml ファイルは html ソースではありません）。 適用されていたら、そのバージョンを確認してください。
IE の F12 開発者ツールとか、Chrome のディベロッパーツールが使えるなら、そちらで調べた方が簡単かもしれません。
「Bootstrap」タグをつけて、使っているBootstrapのバージョンを書いたほうがいいかもしれません
Bootstrapタグを追加しました。
回答1件
0
ベストアンサー
たぶんこれ ↓ （vertical-align: top;）の影響かと。チェックを外すと分かります。
.table は Visual Studio 2015 の MVC テンプレートでデフォルトで設定される Bootstrap v3.0.0 に含まれるものです。質問者さんのケース VS2017 MVC4 では不明ですが、プロジェクトに bootstrap があるとのことですので可能性は大です。
ただ、これを外せばすべて OK かどうかは分かりません。何か副作用が出るかも。
投稿2018/12/18 10:14
退会済みユーザー
総合スコア0
ありがとうございます。
確認したところ、回答と同様にBootstrapが付いており、vertical-align:topを外すと中央に揃いました。
デフォルトの状態でvertical-align:topを外すにはどうしたら良いですか？
contentのBootstrapを修正しても何も変わりませんでした。。。
> contentのBootstrapを修正しても何も変わりませんでした。。。
それは多分ブラウザのキャッシュのためで、キャッシュを消去すれば css ファイルの修正結果が反映がされると思いますが、bootstrap.css を変更するのは、上のコメントにも書いたように、副作用が出る（他のページで使っているとそこで表示が崩れる等）恐れがあるのでお勧めしません。
そのページだけで vertical-align: top; をキャンセルするよう、当該ビューに td { vertical-align:middle !important } というようなスタイルを追加することを検討してはいかがですか？
tdにvertical-align:middle !importantを加えることで解決出来ました！ありがとうございました。
あともう一つの質問のDropdownlistの(枠の)大きさを変える方法についてもアドバイスいただけないでしょうか？
ちなみに現状のコードは、
@Html.DropDownListFor(model => model.Kintais[idx].situation, dictionary[Model.Kintais[idx].situation], new { htmlAttributes = new { @class = "form-control" } })
になります。
new { htmlAttributes = new { @class = "form-control" } } という形にするのは EditorFor だけです。詳しくは以下の記事を見てください。EditorFor 以外ではどうするかも書いてあります。
EditorFor での属性の付与方法
http://surferonwww.info/BlogEngine/post/2018/02/23/how-to-pass-html-attributes-in-editorfor.aspx
ありがとうございました。
↓↓に直したところ、Editorと同じサイズになりました。
@Html.DropDownListFor(model => model.Kintais[idx].situation, dictionary[Model.Kintais[idx].situation], new { @class = "form-control" })
属性についてあまり理解出来ていないので、勉強していくようにしたいと思います。
あなたの回答
tips
プレビュー
