Is there anyway I can set dynamic height for kendo listview and skeletoncontainer? height is not adjusting based on the screen size.
layout.cshtml
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>@ViewBag.Title - IDOH Job Bank</title>
@Styles.Render("~/Content/css")
@Styles.Render("~/Content/kendo/css")
<link href="https://kendo.cdn.telerik.com/themes/6.4.0/default/default-ocean-blue.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.kendostatic.com/2023.2.606/js/jquery.min.js"></script>
<script src="https://cdn.kendostatic.com/2023.2.606/js/jszip.min.js"></script>
<script src="https://cdn.kendostatic.com/2023.2.606/js/kendo.all.min.js"></script>
<script src="https://cdn.kendostatic.com/2023.2.606/js/kendo.aspnetmvc.min.js"></script>
<script src="@Url.Content("~/Scripts/bootstrap.min.js")"></script>
</head>
<body class="k-content">
<div class="navbar navbar-dark in-bg-color fixed-top navbar-expand-md">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<header class="header">
<div class="header-container">
<div class="agencyrow row expanded align-middle top-menu">
<div class="expanded columns top-menu-agency" style="padding:0px;">
<nav class="in-bg-color">
<ul class="menu expanded top-menu-agency-menu text-center">
<li class="agency-link" id="agency-brand">
<a href="#">
<div id="agency-brand-wrap" title="Indiana Department of Health">
<span id="agency-logo">
<img src="~/Content/LDF/Images/IDH-Logo-Shield-White_Transparent.png" alt="Indiana Department of Health Logo">
</span>
<span id="agency-name">IDOH Job Bank</span>
</div>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
</div>
</div>
<div class="container-fluid body-content pt-3 mt-3">
@RenderBody()
</div>
<div class="container-fluid body-content pt-3 mt-3" style="position:absolute;bottom:0;width:100%">
<footer>
<div align="center" style="font-size:small" class="pt-5">
<hr />
<p>©COPYRIGHT @DateTime.Now.Year , INDIANA STATE DEPARTMENT OF HEALTH, ALL RIGHTS RESERVED</p>
</div>
</footer>
</div>
@RenderSection("scripts", required: false)
<script>
$(document).ready(function () {
$("#responsive-panel").kendoResponsivePanel({
breakpoint: 768,
autoClose: false,
orientation: "top"
});
});
function onclick(e) {
$("#responsive-panel").getKendoResponsivePanel().toggle();
}
</script>
</body>
</html>
<style>
.in-bg-color {
background-color: #112A6D !important;
}
.activeTab {
background-color: #cc7027;
}
.Header {
padding: 10px;
}
.Content {
padding: 10px;
padding-bottom: 80px;
}
#wrapper {
position: relative;
}
.navbar-nav > li {
padding-left: 12px;
padding-right: 12px;
}
a {
text-decoration: none;
}
.modal {
text-align: center;
}
.modal-dialog {
text-align: left; /* you'll likely want this */
max-width: 60%;
width: auto !important;
display: inline-block;
}
.myTooltip,
.myTooltip .k-tooltip-content {
color: #2a2828;
background: none !important;
background-color: transparent !important;
border: none !important;
}
.myTooltip .k-callout,
.myTooltip .k-callout-w {
border: none !important;
}
[data-toggle="collapse"] .fa:before {
content: "\f139";
}
[data-toggle="collapse"].collapsed .fa:before {
content: "\f13a";
}
.wide {
width: 75%;
border: 1px solid #ccc;
}
.wide1 {
width: 100%;
}
.wide2 {
float: left;
}
.wide10 {
align-content: flex-start;
}
.alignation {
width: 600px;
}
.layout-example .aui-item p {
background-color: white;
}
.required:before {
content: "*";
font-weight: bold;
color: red;
}
* {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 10pt;
}
.modal-content {
width: 100%;
}
.modal-dialog-centered {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: calc(100% - (.5rem * 2));
}
.custom-validation-summary li {
list-style-type: circle;
color: red;
}
.aui-flatpack-example {
border: 1px solid #ccc;
border-radius: 3px;
margin: 0px 0 5px 0;
padding: 5px;
}
.EmpSearchInfo {
/*width: 20%;*/
}
.vcard {
border-collapse: collapse;
width: 555px;
}
.vcard td {
padding: 2px 2px 2px 5px;
margin: 0;
word-wrap: break-word;
}
.vcard th {
background-color: #ddd;
color: #000;
font-weight: bold;
padding: 2px 2px 2px 5px;
margin: 0;
text-align: left;
}
legend, label {
font-weight: bold;
}
a {
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
table#gvResults {
background: #FFFFFF;
border-radius: 3px;
border: 1px solid #ccc;
}
.template-item {
display: inline-block;
width: auto;
height: auto;
}
li.k-item {
display: inline-block;
}
.k-dropdown {
width: auto;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
</style>
job.cshtml
<div>
<form style="padding-bottom: 10px; padding-left:10px; padding-right:10px;">
<div class="row">
@*<div class="col-md-1">
</div>*@
<div class="col-md-2">
@*@Html.DropDownListFor(model => model.JobTitle, new SelectList(
Model.ddlTitles, "Id", "Name", 0), "Select Title", new { @class = "form-control" })*@
</div>
<div class="col-md-2">
@Html.DropDownListFor(model => model.countyName, new SelectList(
Model.ddlCounties, "Id", "Name", 0), "Select County", new { @class = "form-control" })
</div>
<div class="col-md-2">
@Html.DropDownListFor(model => model.jobType, new SelectList(
Model.ddlJobTypes, "Id", "Name", 0), "Select JobType", new { @class = "form-control" })
</div>
<div class="col-md-2">
<input type="button" name="Search" value="Search" style="text-align:center;" class="btn btn-info" id="btnSubmit">
<input type="button" name="Clear" value="Clear" style="text-align:center;" class="btn btn-info" id="btnClear">
</div>
<div class="col-md-3">
@*@Html.DropDownListFor(model => model.divName, new SelectList(
Model.ddlDivisions, "Id", "Name", 0), "Select Division", new { @class = "form-control" })*@
</div>
</div>
</form>
</div>
<script type="text/x-kendo-tmpl" id="leftTemplate">
<div class="product">
<P style="font-size:medium; font-weight: bold">#:Title#</P>
<p style="margin: 0px 0px 5px;"> Posted Date : #: kendo.toString(PostDate, "MM/dd/yyyy")# | Positions Available : #= Vacancies # | County : #= County #</p>
@*<p style="margin: 0px 0px 5px;"> Positions Available : #= Vacancies # </p>
<p style="margin: 0px 0px 5px;"> County : #= County # </p>*@
<hr>
<p>#= JobDesc #</p>
</div>
</script>
<script>
function onChange(e) {
var selected = e.sender.select();
var dataItem = e.sender.dataItem(selected[0])
$.ajax({
type: "GET",
url:"@Url.Action("GetCard","User")",
data: { id: dataItem.ID },
success: function (viewHTML) {
$("#skeleton").hide();
$(".selected-item").html(viewHTML);
},
error: function (errorData) { console.log(errorData) }
});
}
function onDataBound(e) {
// get a reference to the ListView widget
var listView = $("#jobsListView").data("kendoListView");
console.log(listView.content);
listView.select(listView.content.children().first());
}
function searchCriteria() {
return {
//JobTitle: $("#JobTitle").val(),
countyName: $("#countyName").val(),
jobType: $("#jobType").val(),
//divName: $("#divName").val()
};
}
$("#btnSubmit").click(function () {
$("#jobsListView").data("kendoListView").dataSource.read();
});
$("#btnClear").click(function () {
$("#JobTitle").val('');
$("#countyName").val('');
$("#jobType").val('');
$("#divName").val('');
$("#jobsListView").data("kendoListView").dataSource.read();
});
</script>
<div class="parent">
<div class="demo-section narrow">
@(Html.Kendo().ListView<IDOHJobBank.Data.Models.UserJobDetails>()
.Name("jobsListView")
.TagName("div")
.ClientTemplateId("leftTemplate")
.DataSource(dataSource => dataSource
.PageSize(10)
.Model(m =>
{
m.Id(f => f.ID);
}
)
.Read(read => read.Action("Jobs_Read", "User").Data("searchCriteria"))
)
.Scrollable()
.Pageable()
.Selectable(s => s.Mode(ListViewSelectionMode.Single))
.Events(e => { e.Change("onChange"); e.DataBound("onDataBound"); })
)
</div>
<div class="selected-item" style="display:block;">
@(Html.Kendo().SkeletonContainer()
.Name("skeleton")
.Animation(SkeletonContainerAnimation.Pulse)
.Template(
"<div class='k-card'>" +
"<div class='k-card-header'>" +
"<div>" +
"<span data-shape-circle class='k-card-image avatar'></span>" +
"</div>" +
"<div class='user-info' style='width: 100%;'>" +
"<span data-shape-text class='k-card-title'></span>" +
"<span data-shape-text class='k-card-subtitle' style='width: 35%;'></span>" +
"</div>" +
"</div>" +
"<span data-shape-rectangle style='width: 800px; height: 660px; '></span>" +
"<div class='k-card-body'>" +
"<span data-shape-text></span>" +
"</div>" +
"</div>"+
"</div>")
)
</div>
</div>
<style>
.container-fluid {
display: block;
}
.parent {
display: flex;
}
.parent > div {
display: inline-block;
}
.narrow {
width: 35%;
}
.narrow > .k-pager {
border-color: transparent;
background-color: rgb(255,255,255);
}
.k-listview {
border-color: transparent;
}
.selected-item {
padding: 10px 5px;
}
.card {
width: 60%;
height: 80%;
}
#jobsListView {
padding: 10px 5px;
margin-bottom: -1px;
min-height: 680px;
height: auto !important;
/* Avoid cutout if font or line is bigger */
font: inherit;
}
.product {
float: left;
position: relative;
width: 95%;
height: auto !important;
margin: 0 5px;
margin-bottom: 10px;
padding: 5px;
border: 0.5px solid grey;
border-radius: 5px;
}
.product img {
width: 150px;
height: 150px;
}
.product h3 {
margin: 0;
padding: 3px 5px 0 0;
max-width: 96px;
overflow: hidden;
line-height: 1.1em;
font-size: .9em;
font-weight: normal;
text-transform: uppercase;
color: black;
}
.main-image {
width: 180px;
height: 180px;
}
.k-listview:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.scrollable {
overflow-y: auto;
max-height: 400px;
}
.k-card {
border-radius: 6px;
border-width: 1px;
border-style: solid;
box-sizing: border-box;
outline: 0;
font-family: inherit;
font-size: 14px;
line-height: 1.4285714286;
display: flex;
flex-direction: column;
position: fixed;
overflow: hidden;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.k-textbox, .k-textbox > input {
font-size: 100%;
font-family: inherit;
border-style: solid;
border-width: 1px;
-webkit-appearance: none
}
</style>