Thank you for the provided code snippets.
The most probable reason for the icon misalignment is the usage of a common CSS file (common-bootstrap.min.css, which is the common stylesheet for kendo.boostrap-v3 LESS-based theme) along with the Boostrap SASS theme. If you wish to use the boostrap-v4 theme, you only need to reference the kendo.boostrap-v4.min.css stylesheet and remove the kendo.common-boostrap. For further information please refer to our Styles and Appearances section. Apart from that, there might be some CSS in the other stylesheets that are loaded that is overriding the correct position of the close icon.
If the above does not help you to resolve the problem, please send me a runnable project where I can observe the issue. I will then be glad to assist you.
Looking forward to your reply.
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.