Reducing overall size of Input components

[Danny]

Hi,

I am currently building a very large form with multiple different input components. The overall size of the components are taking up too much space. I've tried overwriting the css on these components but with no luck. I would like to decrease the padding of the text from the label and line below and shortening the line.

Thanks

[Stefan]

Hello, Danny,

Depending on the component, there are some CSS rules that can be used, for example for the Input component, we can remove the padding, reduce the height and the font size:

.k-textbox {
  padding: 0px;
  font-size: 10px;
  height: 15px;
}

https://stackblitz.com/edit/react-p1ytwb?file=index.html

 

If you share an example we can provide more suggestions as well.

Also, if the app uses SASS, there are variables that can be overwritten as well:

https://github.com/telerik/kendo-themes/blob/develop/packages/default/scss/_variables.scss#L844

Regards,
Stefan
Progress Telerik