Dark Style Color Issue and Paging size dropdown issue

[Reid]

I have a couple of issues in trying to get the paging style working right for the dark theme.

 

1) As you can see from the screen shot the arrows that navigate are not showing in a light enough color, I want them to show as white.  And on a grid if you have it set to let's say a pager size of 50 with more than 50 the numbers to not show in a light enough color.  How do you override the .css here?

2) As you can see from the screen shot when you drop down to set the pager size the size selections are shifted to the left.  And when you select a smaller size, (i.e. 100 down to 10) the drop down fails to drop down again and freezes. 

 

I have commented out any k-grid styles that I added to override and the problems persist.

 

Any suggestions other than "please provide a demo" (respectfully) would be helpful. 

[Stefan]

Hello, Reid,

In cases when there are issues with the built-in theme's styles, we recommend inspecting the elements that have issues.

After inspecting the elements, please check if there are styles coming not from the designated Kendo UI theme file.

If the font color is not white, then this meen that there is a CSS rule which is overwriting it. 



The DropDown value positioning seems like a styles issue and it will require inspecting the elements to see if there is a CSS rule adding padding or margin to the DropDown elements.

As for the freezing, this does not sound like a stying issue. Could you please check if there are any JavaScript errors and check if there is a custom code executed when the pageSize is changed?

If the issue still occurs, please share with us more details about the results after inspecting the elements.

Regards,
Stefan
Progress Telerik

[Reid]

Hello,

 

I have no custom styles in this entire solution that could be overriding Kendo's styles here.  I am using .NET Core by the way.

I have inspected the styles you highlight in Chrome prior to posting the original thread here until I am blue in the face.

Please provide the style declarations that I need to put in place so that I can get the pager section displaying correctly.

Using the styles below on the template I have managed to get the text on the right of the pages (Refresh - Summary etc.) to display in white but I cannot get the page numbers etc, to display white with a dark background.

 

Thank you

.k-i-seek-e {
color: white;
}
.k-icon > .k-i-seek-e {
color: white;
}
.k-link > .k-icon {
margin-top: -2px;
color: white;
}
.k-icon > .k-i-reload {
color: white;
}

.k-pager-wrap > .k-link > .k-icon {
margin-top: -2px;
color: white;
}

[Stefan]

Hello, Reid,

Thank you for the selectors.

I used the same selectors and added a few new and was able to change the color of all of the different items inside the Grid pager:

https://dojo.telerik.com/OCUQopIS

If these selectors are not working on your end there are a few different reasons for that:

1) There are CSS selectors with higher priority overwriting them.

2) There is a CSS file loaded after the Kendo UI styles file and it is overwriting the styles.

3) The file that is setting the new Kendo UI styles with white color is not loaded.

4) A custom version of the Kendo UI theme is downloaded by the Theme builder.

5) Two Kendo UI style themes are loaded and are overwriting each other.

5) The different common file is loaded:

https://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling#common-css-files

Regards,
Stefan
Progress Telerik

[Reid]

Hi Stefan,

 

It turned out to be number 5 above.  I had a template loading a different version as a URL link.

Thanks