Raddatepicker icon displaying below

[Zubair]

RadDatePicker icon showing below after media query applies on it. 
In normal Desktop view it is ok and showing at the right,but in mobile view it goes below. Please help me where i am wrong in css. Here is the sample html and css.

Also i am attaching both screen shot for reference.

<table class="table" id="tlSearch">

 <thead>

  <tr>

   <th id="thFromDate">From Date</th>

   <th id="thToDate">To Date</th>

   <th id="badgeno">

    <asp:Label ID="lblSelectedBadgeNo" runat="server" Text="" Font-Bold="true"></asp:Label>

   </th>

  </tr>

 </thead>

 <tbody>

  <tr>

   <td data-th="From Date">

    <telerik:RadDatePicker ID="dtAttendanceFrom" runat="server"></telerik:RadDatePicker>

    <asp:RequiredFieldValidator ID="rfvDateFrom" runat="server" ControlToValidate="dtAttendanceFrom" CssClass="validator" ValidationGroup="gRequired" ErrorMessage="*" ToolTip="Date From is Required!">

    </asp:RequiredFieldValidator>

   </td>

   <td data-th="To Date">

    <telerik:RadDatePicker ID="dtAttendanceTo" runat="server"></telerik:RadDatePicker>

    <asp:RequiredFieldValidator ID="rfvAttendanceTo" runat="server" ControlToValidate="dtAttendanceTo" CssClass="validator" ValidationGroup="gRequired" ErrorMessage="*" ToolTip="Date From is Required!">

    </asp:RequiredFieldValidator>

   </td>

   <td>

    <asp:Button CssClass="Button" ID="btnLoadAttendance" ValidationGroup="gRequired" CausesValidation="true" runat="server" Text="Display Record" OnClick="btnLoadAttendance_Click">

    </asp:Button>

   </td>

  </tr>

 </tbody>

</table>

@media screen and (max-width: 767px) {
           table#tlSearch caption {
                background-image: none;
            }

            th#thFromDate {
                display:none;
            }
            th#thToDate {
                display:none;
            }
            th {
                text-align:center !important;
            }
            table#tlSearch tbody td {
                display: block;
                padding: .6rem;
            }

            table#tlSearch tbody tr td:before {
                content: attr(data-th);
                font-weight: bold;
                display: inline-block;
                width: 10rem;
            }
}

[Doncho]

Hi Zubair,

The RadDatePicker Controls, when used in RenderMode Classic, are rendered as HTML structure which contains table elements. The Date input and the Calendar pop-up button are placed inside separate <td> elements, see Render Mode | RadDatePicker.

When you apply custom CSS styling you need to consider the HTML structure rendered by the Controls.

In the first two points of the Improve Your Debugging Skills with Chrome DevTools blog post, you can find useful tips on how to inspect the generated HTML and check the applied styles for various elements. 

In order for the applied custom styling to take effect only on the defined custom HTML structure without affecting the inner, automatically created by the RadDatePicker Control, HTML tables you need to use more specific CSS selectors. You can find some useful information about CSS Specificity in the following articles:

• Specifics on CSS Specificity;
• CSS Specificity: Things You Should Know;
• Specificity - CSS | MSDN;

To learn more about CSS styling and using the Browser's developer tools, you may find the following videos useful: 

• How to Use the Chrome Inspector to Edit Your Website CSS - contains a Video
• Get Started With Viewing And Changing CSS
• Chrome Developer Tools Tutorial - Inspect and Test CSS 2019 - video
• Chrome DevTools for CSS - Better CSS Coding & CSS Debugging with Developer Tools - video
• Testing CSS Styles with Chrome Inspector Tool - video

 

Here are some changes in the CSS selectors you can try:

table#tlSearch>tbody>tr>td {
    display: block;
    padding: .6rem;
}

table#tlSearch>tbody>tr>td:before {
    content: attr(data-th);
    font-weight: bold;
    display: inline-block;
    width: 10rem;
}

Check out the difference between  CSS element element Selector and CSS element>element Selector

Using Lightweight render mode, on the other hand, results in rendering different HTML structure, which does not contain table elements, and the applied custom styles will not cause appearance issue like the described one.

I hope this will prove helpful!

Kind regards,
Doncho
Progress Telerik