I am currently attempting to display the legend contents in a horizontal alignment within the layout container. The issue is that while the layout containing the legend aligns horizontally as desired, it extends beyond the screen border. I do not want the legend container to behave this way; instead, I would like the layout container to shift or move to the left. Could you please advise me on how to achieve this?
Kindly provide guidance on achieving both of the points mentioned above.
Code:
<div class="box1" *ngIf="showAreasOfCoverageWithRespectToIntersectedEnvelope==true || showAreasOfCoverage==true">
<table>
<tr>
<td><div id="legend_0_10"></div></td>
<td style="text-align: left; vertical-align: middle;">0_10 m</td>
<td><div id="legend_10_20"></div></td>
<td style="text-align: left; vertical-align: middle;">10_20 m</td>
<td><div id="legend_20_30"></div></td>
<td style="text-align: left; vertical-align: middle;">20_30 m</td>
<td><div id="legend_30_40"></div></td>
<td style="text-align: left; vertical-align: middle;">30_40 m</td>
<td><div id="legend_40_50"></div></td>
<td style="text-align: left; vertical-align: middle;">40_50 m</td>
</tr>
<tr>
<td><div id="legend_50_60"></div></td>
<td style="text-align: left; vertical-align: middle;">50_60 m</td>
<td><div id="legend_60_70"></div></td>
<td style="text-align: left; vertical-align: middle;">60_70 m</td>
<td><div id="legend_70_80"></div></td>
<td style="text-align: left; vertical-align: middle;">70_80 m</td>
<td><div id="legend_80_90"></div></td>
<td style="text-align: left; vertical-align: middle;">80_90 m</td>
<td><div id="legend_90"></div></td>
<td>90 m</td>
</tr>
</table>
</div>
CSS:
#legend_0_10{
background-color:#ffffff;
height:20px;
width: 30px;
}
#legend_10_20{
background-color:#ffe2e2;
height:20px;
width: 30px;
}
#legend_20_30{
background-color:#ffc6c6;
height:20px;
width: 30px;
}
#legend_30_40{
background-color:#ffaaaa;
height:20px;
width: 30px;
}
#legend_40_50{
background-color:#ff8d8d;
height:20px;
width: 30px;
}
#legend_50_60{
background-color:#ff7171;
height:20px;
width: 30px;
}
#legend_60_70{
background-color:#ff5555;
height:20px;
width: 30px;
}
#legend_70_80{
background-color:#ff3838;
height:20px;
width: 30px;
}
#legend_80_90{
background-color:#ff1c1c;
height:20px;
width: 30px;
}
#legend_90{
background-color:#ff0000;
height:20px;
width: 30px;
}
.flex-container {
display: flex;
justify-content: center;
height: 100px;
width:100px;
align-content: center;
align-items: stretch;
}
.flex-container > div {
background-color: #a00f0f;
width: 30px;
margin: 10px;
text-align: center;
line-height: 55px;
font-size: 10px;
}
.box1 {
background-color: #aaff00;
width: 498px;
float: left;
}
Screen-shot https://i.sstatic.net/pkCq5.png