This is a migrated thread and some comments may be shown as answers.

Raddatepicker icon displaying below

1 Answer 169 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Zubair
Top achievements
Rank 1
Veteran
Zubair asked on 02 Jun 2020, 08:50 AM

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;
            }
}

1 Answer, 1 is accepted

Sort by
0
Doncho
Telerik team
answered on 04 Jun 2020, 01:55 PM

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:

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

     

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
    Tags
    Calendar
    Asked by
    Zubair
    Top achievements
    Rank 1
    Veteran
    Answers by
    Doncho
    Telerik team
    Share this question
    or