UI issue rendering webform for date field in website

1

Date field before being clicked

18%20PM
18%20PM1356×704 23.5 KB

Date field before after being clicked

56%20PM
56%20PM1386×764 54.5 KB

Seems the datepicker has a UI issue when displayed in website.Can somebody help me fix this .

2

I solved this by adding the following in the Custom CSS section of the web form.

.datepicker.active {
    background-color: white;
}
1 Like
3

Thanks for the reply .But I had to add an opacity to fully rectify the issue .

.datepicker.active {
background-color: white;
opacity:1;
}

Is there any documentation regarding what are the CSS classes ERPNext is using so that I can customise for other scenarios as well.I have a similar issue for picklist.

4

I have fixed it for now by adding by adding it as custom css in 2 different forms that I need.

.datepicker.active {
  background-color: white;
  opacity:1;
}
.awesomplete ul {
  background-color: white;
  opacity:1;
}

But I think this has to fixed globally across all websites in code .Also similar problems could be there for other components as well.