I recently made some changes to my table to give it a sticky header with scrollable functionality. However, this caused an issue with my Datepicker. Is there a way to resolve this conflict and keep them separate?
Below is the code I added for the sticky header and scrollable table:
thead:not(.ui-datepicker-calendar>thead), tbody:not(.ui-datepicker-calendar>tbody) {
display: block;
}
.table-container {
height: 10rem;
}
td:not(.ui-datepicker-calendar) {
word-wrap: break-word !important;
}
table:not(.ui-datepicker-calendar) {
display: flex;
flex-flow: column;
height: 39.6rem;
width: 100%;
}
... (The rest of the CSS code for the table)
Code for the Datepicker:
<div class="d-flex flex-row marginDateStart">
<label for="StartDate" class="labelmargin">Start Date:</label>
<input id="datepicker1" class="datepicker" name="datepicker1" value="@DateTime.Now.ToString("yyyy-MM-dd")" />
<script>
$('#datepicker1').datepicker({
uiLibrary: 'bootstrap4',
format: "yyyy/mm/dd",
todayHighlight: true
});
</script>
</div>
Libraries I used:
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" type="text/css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
If you look at the attached pictures, the first one shows the table with the fix I applied causing a conflict with the datepicker, while the second picture depicts the datepicker without any conflicts as I did not apply the table fix.
[Datpicker with the table fix i made][1]
[Datepicker without the table fix i made][2]
LATEST UPDATE: After some troubleshooting, the CSS snippet now works without conflicting with the datepicker. The key was using the :not(.ui-datepicker-calendar>thead) format for more specificity.
Thank you for your assistance!