Using form-control-sm with numeric text box

[Brian]

I am trying to style a numeric text box with bootstrap 4's form-control-sm.  This is the code:

@(Html.Kendo().NumericTextBox<decimal>()
                .Name("FundedAmount")
                .Format("c")
                .Min(0)
                .HtmlAttributes(new { style = "width: 100%", @class = "form-control form-control-sm"})
          )

When I've used this control without the '-sm' it works fine even if I leave off the 'form-control' class.  When I add the classes as shown above what I get is in the attached image.  Looks like one of the inputs is correctly sized and the other isn't.  Also the font size is the regular size rather than the .875em that the '-sm' gives.  I found some random things online but haven't had any luck getting it to format correctly.

 

Any ideas how to style this to match the regular bootstrap 4 'form-control-sm' sizing ?

 

 

 

[Teya]

Hi Brian,

I would suggest adding the following custom CSS that will ensure that the NumericTextbox looks like the Bootstrap form-control-sm element:

<style>
    .k-widget.form-control-sm {
        height: calc(1.5em + .5rem + 2px);
        padding: .25rem .5rem;
        font-size: .875rem;
        line-height: 1.5;
        border-radius: .2rem;
    }

    .k-widget.form-control-sm .k-input {
        height: 100%;
        font-size: .875rem;
    }

    .k-widget.form-control-sm .k-icon {
        font-size: .875rem;
    }

</style>

I hope this would be helpful.

 

Regards,
Teya
Progress Telerik