Q&A
ブラウザのデベロッパーツールのネットワークタブで帰ってきているHTMLレスポンスを直接確認すると、該当部分はどのように出力されていますか？
#◆質問
テンプレート変数 {{ my_calendar }} で挿入したテーブル要素だけが、ページ最下部に配置/出力されてしまう現象の原因を探っていますが、答えが見つかっておりません。どなたか原因を教えていただけないでしょうか？
説明不足な点などは、適宜追記してまいりますので、どうぞよろしくお願い申し上げます。
####現状と使用したスクリプト
- 直下の同様記述によるa要素「翌月」「前月」は、意図したページ位置にレイアウトできています。（＝「翌月」「前月」ボタンがページ中段、カレンダー本体がページ最下段という風に飛び飛びで配置されてしまいます。）
- なぜかtable要素で挟んでみると挙動が代わり意図した位置にtable要素が出力されますが、引き続き理由がわかりません。（詳細は以下「試したこと」ご参照ください。）
mycalendarhtml
1<div> 2 {{ my_calendar }} <!--HTMLページ最下部にtable要素が配置されてしまう--> 3 <a class="btn btn-info right mr-2" href="{% url 'app:index' %}?{{ next_month }} "> 翌月 >> </a> <!--意図したページ位置にa要素が配置される--> 4 <a class="btn btn-info right mr-2" href="{% url 'app:index' %}?{{ prev_month }}"> << 前月 </a> <!--意図したページ位置にa要素が配置される--> 5</div>
```viewspy
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
d = calendarapp.views.get_date(self.request.GET.get('month', None)) cal = Calendar(d.year, d.month) html_cal = cal.formatmonth(withyear=True) context['my_calendar'] = mark_safe(html_cal) context['prev_month'] = calendarapp.views.prev_month(d) context['next_month'] = calendarapp.views.next_month(d) return context
#◆試したこと ・なぜかtable要素で挟んでみると、ページ最下部ではなく意図した位置にtable要素が出力されます。でもdiv要素で挟むとページ最下部に出力される同事象が再現します。 ```mycalendarhtml <div> <table> {{ my_calendar }} <!--意図したページ位置にtable要素が配置される--> </table> <a class="btn btn-info right mr-2" href="{% url 'app:index' %}?{{ next_month }} "> 翌月 >> </a> <!--意図したページ位置にa要素が配置される--> <a class="btn btn-info right mr-2" href="{% url 'app:index' %}?{{ prev_month }}"> << 前月 </a> <!--意図したページ位置にa要素が配置される--> </div>
mycalendarhtml
1<div> 2 <div> 3 {{ my_calendar }} <!--HTMLページ最下部にtable要素が配置されてしまう--> 4 </div> 5 <a class="btn btn-info right mr-2" href="{% url 'app:index' %}?{{ next_month }} "> 翌月 >> </a> <!--意図したページ位置にa要素が配置される--> 6 <a class="btn btn-info right mr-2" href="{% url 'app:index' %}?{{ prev_month }}"> << 前月 </a> <!--意図したページ位置にa要素が配置される--> 7</div>
#◆mark_safe(html_cal)で生成されるtable要素
htmlcal
1<table border="0" cellpadding="0" cellspacing="0" class="calendar"> 2 <tr> 3 <th colspan="7" class="month">October 2020</th> 4 </tr> 5 <tr> 6 <th class="mon">Mon</th> 7 <th class="tue">Tue</th> 8 <th class="wed">Wed</th> 9 <th class="thu">Thu</th> 10 <th class="fri">Fri</th> 11 <th class="sat">Sat</th> 12 <th class="sun">Sun</th> 13 </tr> 14 <tr> 15 <td></td> 16 <td></td> 17 <td></td> 18 <td> 19 <span class="date">1</span> 20 <ul></ul> 21 </td> 22 <td> 23 <span class="date">2</span> 24 <ul></ul> 25 </td> 26 <td> 27 <span class="date">3</span> 28 <ul></ul> 29 </td> 30 <td> 31 <span class="date">4</span> 32 <ul></ul> 33 </td> 34 </tr> 35 <tr> 36 <td> 37 <span class="date">5</span> 38 <ul></ul> 39 </td> 40 <td> 41 <span class="date">6</span> 42 <ul></ul> 43 </td> 44 <td> 45 <span class="date">7</span> 46 <ul></ul> 47 </td> 48 <td> 49 <span class="date">8</span> 50 <ul></ul> 51 </td> 52 <td> 53 <span class="date">9</span> 54 <ul></ul> 55 </td> 56 <td> 57 <span class="date">10</span> 58 <ul></ul> 59 </td> 60 <td> 61 <span class="date">11</span> 62 <ul></ul> 63 </td> 64 </tr> 65 <tr> 66 <td> 67 <span class="date">12</span> 68 <ul></ul> 69 </td> 70 <td> 71 <span class="date">13</span> 72 <ul> 73 <li> 74 <a href="/calendarapp/event/1/details/"> テスト！ </a> 75 </li> 76 </ul> 77 </td> 78 <td> 79 <span class="date">14</span> 80 <ul></ul> 81 </td> 82 <td> 83 <span class="date">15</span> 84 <ul></ul> 85 </td> 86 <td> 87 <span class="date">16</span> 88 <ul></ul> 89 </td> 90 <td> 91 <span class="date">17</span> 92 <ul></ul> 93 </td> 94 <td> 95 <span class="date">18</span> 96 <ul></ul> 97 </td> 98 </tr> 99 <tr> 100 <td> 101 <span class="date">19</span> 102 <ul></ul> 103 </td> 104 <td> 105 <span class="date">20</span> 106 <ul></ul> 107 </td> 108 <td> 109 <span class="date">21</span> 110 <ul></ul> 111 </td> 112 <td> 113 <span class="date">22</span> 114 <ul></ul> 115 </td> 116 <td> 117 <span class="date">23</span> 118 <ul></ul> 119 </td> 120 <td> 121 <span class="date">24</span> 122 <ul></ul> 123 </td> 124 <td> 125 <span class="date">25</span> 126 <ul></ul> 127 </td> 128 </tr> 129 <tr> 130 <td> 131 <span class="date">26</span> 132 <ul></ul> 133 </td> 134 <td> 135 <span class="date">27</span> 136 <ul></ul> 137 </td> 138 <td> 139 <span class="date">28</span> 140 <ul></ul> 141 </td> 142 <td> 143 <span class="date">29</span> 144 <ul></ul> 145 </td> 146 <td> 147 <span class="date">30</span> 148 <ul></ul> 149 </td> 150 <td> 151 <span class="date">31</span> 152 <ul></ul> 153 </td> 154 <td></td> 155 </tr> 156</table>
ご返答が遅くなり誠に申し訳ございません！現在、確認できる環境にないため、整い次第、ネットワークでのレスポンス状況をご報告させていただきます。解決のヒントをくださり感謝申し上げます！
ただいま確認できました！該当するHTMLはおそらく、Nameが「?m-2020-10」、Statusが200 OK、TypeがDocument、InitiatorがOtherの項目かと存じます。
ブラウザの見た目で意図しないページ下部に当該tableが表示され、かつHTMLコード自体でもDevTools -> Elementsタブでページ下部にtable要素が配置されている状態で、
DevTools -> Network -> 該当のGET(?)「?m-2020-10」項目 -> Response を見てみましたが、記述したとおりページ上部にtable要素がHTMLコードとして記述されていました。
他に読み取れることがございましたら、ご教示いただけますと誠にありがたく存じます。
ありがとうございます^^
レスポンス部分で確認すると問題ないが、実際の画面を確認するとページ最下部に移動しているということでしょうか？
もしよろしければレスポンスで帰ってきているHTMLと、Elementsタブで閲覧できるHTMLの両方を載せていただけますか？？
いえいえ、こちらこそありがとうございます！technobicさんにヒントをいただきましたとおり、開発ツール > ネットワーク > レスポンスを検証することで、Django側で生成したtable要素に矛盾を発見しました。networkのタブはまともに活用できていなかったので、今回大変よい機会をいただきました。深く感謝申し上げます！
Good job!
回答1件
0
自己解決
Djangoテンプレート変数で生成したtable要素に</table>タグがありませんでした。ひとまず応急処置として矛盾のないHTMLタグ構造にしたところ、正常な順序でtable要素が表示されました。ありがとうございました。
djangotemplate
1<div> 2 {{ my_calendar }} 3 </table> <!-- 追記箇所 --> 4 <a class="btn btn-info right mr-2" href="{% url 'app:index' %}?{{ next_month }} "> 翌月 >> </a> <!--意図したページ位置にa要素が配置される--> 5 <a class="btn btn-info right mr-2" href="{% url 'app:index' %}?{{ prev_month }}"> << 前月 </a> <!--意図したページ位置にa要素が配置される--> 6</div>
投稿2020/10/24 14:06
編集2020/10/24 14:08総合スコア78
あなたの回答
tips
プレビュー
