0
tableの中にdivがあります。これは、そのサイズのために複数のオーバーフローする必要がありますtdです。 これはPC上で正常に動作しますが、モバイルではページ外にオーバーフローする問題があります。スクリーンショットをチェックしてください：divがページ外にオーバーフローしています
コード：
body {
font-family: Verdana, sans-serif;
height: 100%;
}
.kalender {height: 60vh;}
table, td, th {
text-align: left;
border: 1px solid black;
vertical-align: text-top;
padding: 5px;
font-size: 13px;
}
table {
height: 100%;
width: 100%;
}
th {
height: 6%;
background-color: #e7e7e7;
}
td {
width: 14.28%;
height: 15.6%;
position: relative;
}
.outer {
position: absolute;
font-size: 10px;
}
.details {
display: none;
background-color: gray;
overflow: visible;
border: 2px solid black;
float: left;
position: relative;
z-index: 10;
padding: 5px;
font-size: 12px;
}
.kortNavn {
position: relative;
top: 0;
left: 0;
display: flex;
text-align: center;
}
.skoleFri {
border-radius: 50%;
\t width: 8px;
\t height: 8px;
background-color:red;
display: inline-block;
}
.sfoFri {
border-radius: 50%;
\t width: 8px;
\t height: 8px;
background-color:blue;
display: inline-block;
}
div:hover > .details {display: block;}<div class="kalender">
<table *ngIf="datoer">
<tr>
<th>Man</th>
<th>Tir</th>
<th>Ons</th>
<th>Tor</th>
<th>Fre</th>
<th>Lør</th>
<th>Søn</th>
</tr>
<tr>
<td *ngFor="let cell of ukeEn()">
{{cell.text}}
<div class="outer" *ngIf="datoerContains(cell).fulltSkolenavn != null">
<div class="kortNavn" *ngFor="let kort of datoerContains(cell).kortSkolenavn">
{{kort}}
<div class="skoleFri"></div>
<div class="sfoFri" *ngIf="datoerContains(cell).sfoFri == true" ></div>
</div>
<div class="details" *ngFor="let skole of datoerContains(cell).fulltSkolenavn">
{{skole.skole}} <br>
{{skole.kommentar}} <br>
SFO: {{skole.sfodag}}
</div>
</div>
</td>
</tr>
</table>溢れdivdetailsクラスです。このdivは、tdの内部にある必要があります。表示されるように、の*ngForは、のdatoerContains(cell)にあり、detailsにあります。
だから私はページ内にとどまる方法を見つける必要があります。アイデア？
質問を開始することができると信じて]（https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/）。 [**最小限で完全で検証可能なサンプルを作成する方法**]（http://stackoverflow.com/help/mcve） –