Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
35
WebDatePicker right side button width is double than normal width
posted

Hi,

I am using WebDatePicker with WebMonthCalendar. There is one random issue I am facing with WebDatePicker rendering, Sometimes right side drop down button take more width (double than the highlighted):

I am not able to reproduce this issue in my local dev environment. In production environment also this issue is very random. In production customer is using IE 11 browser. 

Any specific reason, why this is happening.

Thanks,

Rohit

  • 0
    Offline posted

    The issue you're encountering with the WebDatePicker's right-side dropdown button occasionally appearing with double width is likely due to inconsistent CSS rendering in IE11, especially under dynamic layout shifts or conflicting styles from external sources. Since it's not reproducible in your local dev environment, it could be tied to production-specific CSS overrides, browser zoom levels, or even third-party scripts affecting layout. A good troubleshooting step is to inspect computed styles in production and explicitly set the width of the dropdown button using CSS. This behavior is similar to how apps like Pikashow app sometimes render differently across devices unless styles are tightly controlled.

  • 1360
    Offline posted

    Hello Rohit,

    After investigating this further, I determined that a possible reason for the double width of the button could be if any css styles are applied that are overriding the default ones.

    However width of the button could be set in order to always be same without changing the existing css files. Setting the width of the button could be achieved by using “Buttons-ButtonCssClass“ property :

    <ig:WebDatePicker ID="WebDatePicker1" runat="server" DropDownCalendarID="WebMonthCalendar1" Buttons-ButtonCssClass="button">

          <Buttons SpinButtonsDisplay="OnLeft">

          </Buttons>

    </ig:WebDatePicker>

     

    <style>

       .button{

           width:20px;

       }

    </style>

    Please let me know if you need any further information regarding this matter.

    Regards,

    Monika Kirkova,

    Infragistics