I am having an issue with my AjaxControlToolkit where the main-page CSS is affecting the inner "calendar" popup.
To illustrate what I need, what I've tried, and the temporary workaround, I have simplified everything into a one-page example. I am in search of a proper CSS solution.
Below is all the information you need:
table.my_table_padding {border-collapse: collapse;}
/* starting point (looks a mess) */
/* table.my_table_padding tr td {padding: 20px;background-color: greenyellow;} */
/* My attempts (neither worked) */
/* :not(.ajax_calendar) table.my_table_padding tr td {padding: 20px;background-color: orange;} */
/* :not(div.ajax_calendar) table.my_table_padding tr td {padding: 20px;background-color: orange;} */
/* The workaround that is a mess and a horrid bodge - is there a better way in a single class, using a :not() ? */
table.my_table_padding tr td {padding: 20px;background-color: greenyellow;}
div.ajax__calendar table.my_table_padding tr td {padding: 0;background-color: white;} <table border="1" class="my_table_padding">
<tr>
<td>Header-text</td>
<td>Sample Text... Sample Text...<br />Text is here</td>
</tr>
<tr>
<td>Header-text</td>
<td>
<div class="ajax__calendar">
<!-- Actually using a popup nuget:AjaxControlToolkit, this is an example -->
See: <a href="https://ajaxcontroltoolkit.devexpress.com/Calendar/Calendar.aspx">AjaxControlToolkit Sample Page</a>
<table border="1" class="my_table_padding">
<tr><td colspan="7">Popup calendar-control</td></tr>
<tr><td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td></tr>
</table>
</div>
</td>
</tr>
</table>EDIT 1 (to clarify what I'm after)
I have discovered a cumbersome method to achieve the desired display outcome: 1 - implementing the original CSS rule [table.my_table_padding tr td] 2 - Including another CSS rule underneath it [div.ajax__calendar table.my_table_padding tr td] that counteracts the changes made by the first rule
However, this approach seems messy. I am pondering if there is a cleaner way of articulating the original (CSS rule 1), so that it selects all tables except for those that are children of the "div class=ajax__calendar" element.
EDIT 2 - The original ASP.NET Webforms code
<asp:DetailsView runat="server" ID="detv_Main" CssClass="my_table_padding detv_example">
<Fields>
<asp:TemplateField HeaderText="Start Date" SortExpression="EventStartDate">
<EditItemTemplate>
<asp:TextBox ID="txt_EventStartDate" runat="server" Text='<%# Bind(example) %>' CssClass="edit_background"></asp:TextBox>
<ajaxToolkit:CalendarExtender ID="calext_EventStartDate" TargetControlID="txt_EventStartDate" runat="server" Format="d MMM yyyy" />
</EditItemTemplate>
<ItemTemplate>Example date</ItemTemplate>
</asp:TemplateField>