NumericTextBox is on two lines, styling issue

[Neil]

Hi,

I'm using the server side wrappers to generate a numericTextBox like so

@Html.Kendo().NumericTextBoxFor(m => m.SumInsured).Format("{0:C}").Culture("en-GB").HtmlAttributes(new { @placeholder = "Sum Insured", style = "display: inline-block;" })

 

This generate the following HTML:

<span class="k-widget k-numerictextbox" style=""><span class="k-numeric-wrap k-state-default"><input type="text" class="k-formatted-value k-input" title="" tabindex="0" placeholder="Sum Insured" role="spinbutton" style="display: block;" aria-disabled="false"><input data-val="true" data-val-number="The field SumInsured must be a number." id="SumInsured" name="SumInsured" placeholder="Sum Insured" style="display: none;" type="text" value="" data-role="numerictextbox" role="spinbutton" class="k-input" aria-disabled="false"><span class="k-icon k-i-warning" style="display: none;"></span><span class="k-select"><span unselectable="on" class="k-link k-link-increase" aria-label="Increase value" title="Increase value"><span unselectable="on" class="k-icon k-i-arrow-60-up"></span></span><span unselectable="on" class="k-link k-link-decrease" aria-label="Decrease value" title="Decrease value"><span unselectable="on" class="k-icon k-i-arrow-60-down"></span></span></span></span></span>

 

The problem is that because of the inline style (display: block) applied to the first input element it causes rendering issues in that the box appears to be two lines high. When you then go to change the value the first input is hidden and the second input again has an inline style (display: block) applied which has the same styling issue. In the demos I notice that instead of display: block; display: inline-block is used which does correct the issue. I'm using the same release 2017.3.1026 as the demos. I've also tried by setting an explicit inline-block through the HtmlAttributes function. I also tried with a basic input element and using the API to render the NumericTextBox but it still has the same effect. If it has an relevance this is inside of a kendo window.  Any ideas as to why block instead of inline-block is applied through the JS?

 

Thanks,

[Konstantin Dikov]

Hi Neil,

The rendered styles are correct and as you can see in the following dojo example, the NumericTextBox is rendered on a single line in a Window widget:

• http://dojo.telerik.com/OvoTuk/2

I would suggest to inspect the applied CSS to the elements of the NumericTextBox in your project and see if there are custom styles that break the rendering of the helper.

If further assistance is needed, please attach screenshot with the issue and if possible, an example replicating the exact problem.


Regards,
Konstantin Dikov
Progress Telerik

[Neil]

Hi Konstantin,

I've just reproduced the issue in the dojo: http://dojo.telerik.com/OvoTuk/4

All I did was to change the style files included to bootstrap ones.

Thanks,

Neil

 

[Tsvetina]

Hi Neil,

I am not sure why you get a display: block style in the NumericTextBox input. I tried adding a NumericTextBox to a Window in a project using UI for ASP.NET Core version 207.3.1026 and I was unable to reproduce the issue. I am attaching my test project for your reference. Here are the Kendo UI references:

<link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common-bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.bootstrap.min.css" rel="stylesheet" type="text/css" />

<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.aspnetmvc.min.js"></script>

and the View content:

@model TelerikAspNetCoreApp6.Models.OrderViewModel;

@(Html.Kendo().Window()
    .Name("window")
    .Title("About Alvar Aalto")
    .Content(@<text>
        @(Html.Kendo().NumericTextBoxFor(m => m.Freight)
                    .Format("c")
                    .Min(0)
                    .Max(100)
                    .Value(30)
        )
    </text>)
    .Draggable()
    .Resizable()
    .Width(600)
    .Actions(actions => actions.Pin().Minimize().Maximize().Close())
)

I am also attaching the project itself. Are you able to reproduce the problem in my project? If not, could you open a support ticket and send us your project, so we can further inspect it?

Regards,
Tsvetina
Progress Telerik