'I want to use @Html.Raw(string), (where string contains a complete html webpage) and show multiple webpages in Card format side-by-side on same page
Below is the css and Html for the multiple card elements within a webpage and each card element contains a webpage, but this is not working for me. When I am trying to put texts at the place of webpage inside each card then its working fine.
I need the same layout as discussed above.
.container{
background-color:bisque;
position:relative;
}
.container-2{
width: 95%;
background-color:black;
padding: 20px;
color:white;
}
.card-body {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 1.25rem;
}
.card-text{
background-color:black;
}
.row {
margin:0px -5px ;
}
column {
float: left;
width: 25%;
padding: 0 10px;
}
@media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
padding: 16px;
background-color: #f1f1f1;
margin:5px 5px 5px 5px;
}<div class="row">
@foreach (KeyValuePair<string, Asset> asset in assets)
{
<div class="column">
<div class="card" style="overflow-x: scroll; overflow-y: scroll; width: 18rem; height: 300px; ">
<div class="card-body" style="background-color:black">
<h5 class="card-title" style="border:solid">@x.Value.title</h5>
<p class="card-text" style="color:whitesmoke">@Html.Raw("<!DOCTYPE html>"+"<html>" + "<head>" + x.Value.head + "</head>" + "<body>" + x.Value.body + "</body>" + "</html>");
</p>
</div>
</div>
</div>
}
</div>List<Dictionary<key,value>> containing multiple data.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|