2

I'm trying to create a simple form using Kendo UI, but for some reason the buttons on the input fields (like dropdown, combobox, calendar) are misaligned.

example

Does anyone know where to start looking for the source of the problem? I've Googled around for quite a while and apparently I am the only one facing this issue with Kendo UI, so maybe it is a CSS issue in general, but I have not added any custom CSS for input elements yet.

I'm using Kendo UI with JSP wrapper version 2015.1.429 with Bootstrap v3.3.2

I'm not sure which part of my code should be uploaded so I will add it to this post upon request.

Nic
  • 12,220
  • 20
  • 77
  • 105
digawp
  • 324
  • 2
  • 13

1 Answers1

2

Does anyone know where to start looking for the source of the problem?

Looks like something is overriding the Kendo CSS. You should use your HTML debugger to check the styles being applied to the Kendo html code. You probably have some CSS overriding it.

Generally you can fix these kind of issues by adding a padding-top the the element containing the misaligned button.

Nic
  • 12,220
  • 20
  • 77
  • 105
  • Please provide your code example or create a jsfiddle – Gedao May 08 '15 at 07:32
  • I don't think he can provide any example since I also did not provide any code example that results in the misalignment. Anyway to OP, thanks for the suggestion, I will get back to you on Monday – digawp May 08 '15 at 09:29
  • I checked the browser debugger, I don't override anything but for some reason it is misaligned, so I decided to just add a padding-top for the moment – digawp May 11 '15 at 06:34