I was looking at using the Moonlight theme with Kendo UI for Angular, however, I think I've come across an issue with the filtered DropDownList Component.
Using the Moonlight theme the DropDownList search box displays white text on a white background. See screenshot.
Attached are a couple of screenshots of a DropDownList populated with countries. In the first screenshot I have typed any chars in the filter - you can see a big white box but you can't see the magnifying glass icon on the right as it's being displayed in white on a white background. In the second screenshot I've typed some random chars, they're not visible and they don't match any of the country names so the drop down list is empty.
5 Answers, 1 is accepted
I am afraid that the issue is not reproducible on my side. I am using the following Dojo snippet., which is based on the DropDownList AngularJS demo. The filtering input has dark background on my side and the entered text is white. Could you provide a Dojo sample or modify my example, so that the issue is reproducible?
Regards,
Dimitar
Telerik by Progress
Rank 1
Hi Dimitar,
Sorry, I just tried using using Dojo but it won't accept my Telerik username/password. Even though they work for https://www.telerik.com/account/ and https://www.telerik.com/forums.
Also I'm new to Dojo and I can't see how to create a Kendo UI for Angular 2 project. I could be mistaken here but your demo appears to be using Angular 1? :-s
Also, to see the rendering issue you need to enable filtering in the DropDownList.
Moonlight theme is available in Kendo UI and its AngularJS directives. The Dojo tool may be used to create Kendo UI snippets and it is not necessary to login to use this functionality. When you create a snippet, it receives a unique URL, which may be used for opening it later on.
Kendo UI for Angular 2 has Default theme based on SASS - DropDownList. And we have just released a ThemeBuilder tool, which allows you to create new SASS themes or customize existing ones. ThemeBuilder provides a Moonlight predefined swatch, which may be used to generate a Moonlight inspired SASS theme.
It would be helpful if you clarify if you are working with Angular 2 DropDownList and Moonlight theme build with ThemeBuilder, or you have a different scenario.
Regards,
Dimitar
Telerik by Progress
Rank 1
Sorry for any confusion.
I was using your new Kendo UI for Angular (2) product and the predefined SASS Moonlight swatch from the ThemeBuilder tool.
I also found the cause of the issue. I have Bootstrap in this website as well and it's Bootstrap that's clashing with the Moonlight swatch theme. Your ThemeBuilder tool provides separate Bootstrap friendly swatches.
Thank you for the clarification. Indeed, the Moonlight swatch is not designed to work out of the box with Bootstrap v4. You may use any of the Bootstrap swatches and customize it with some colors similar to the Moonlight theme.
Regards,
Dimitar
Telerik by Progress