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.
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 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:
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!
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.