I am facing an issue with my ASP .net core 2.1 app. I have customized the scaffolded crud details page, but I am encountering hurdles with the dl, dt, and dd elements.
The text inside dt elements, which display the field names, is appearing next to them on the right side. No matter what changes I make, I can't seem to adjust this layout without resorting to using inline styles. I added the following code to the style section of the file:
<style>
dd {
min-width: 120px;
background: #dd0
}
dt {
float: left;
background: #cc0;
text-align: left;
}
</style>
Although this code doesn't affect the float and text alignment as expected, it does change the background color, as shown in the image below. https://i.sstatic.net/EJzny.png
However, when I apply these display settings inline like the example below, it works perfectly for those lines as illustrated in the picture above.
<dt style="text-align: left; max-width: 70px;">
@Html.DisplayNameFor(model => model.PatientName)
</dt>
<dd>
@Html.DisplayFor(model => model.PatientName)
</dd>
<dt style="text-align: left;min-width: 70px;">
@Html.DisplayNameFor(model => model.PatientAddress)
</dt>
This has led me to speculate that maybe it's a hierarchy of settings issue, but even trying Bootstrap didn't yield any better results.
Furthermore, I prefer not to use inline styles as it is considered a bad practice.