NumericTextBox setting width

1 Answer 111 Views
NumericTextBox
AP
Top achievements
Rank 1
Iron
Iron
Veteran
AP asked on 27 Jul 2023, 10:11 AM

Since the change in R2 2022, numeric text boxes now take up 100% of the width of their container, so the recommended way to set an elements width is with a DIV. However this is a block element, so how do I show a label (in a span) before the numeric text box on a single line?

Setting the div to inline, negates the width setting.

I'm using version v2023.2.606.

I currently have:-


 <p>
        <span class="lbllabel2">
            Field Namew:
        </span>
        <div style="width:150px;">
            @Html.Kendo().NumericTextBoxFor(c => c.Field)
            @Html.ValidationMessageFor(model => model.RunOrder)
        </div>

    </p>

The only way I can see to get it working is with floats, which seems excessively complicated for such a simple (and I'd assume) common scenario.

I can say that the new versions since R2 2022 have proved extremely problematic and I have yet to see an up side to the changes.

1 Answer, 1 is accepted

Sort by
0
Accepted
Ivan Danchev
Telerik team
answered on 01 Aug 2023, 07:24 AM

Hello Andrew,

If you want to order specific Html elements and display them on the page in a certain way, consider using Bootstrap, which is perfect for creating layouts.

In your case you want to show a span (label) and a div (that contains a NumericTextBox) Html elements next to each other. So, to do that, you can apply Bootstrap's classes to those elements to position them in the desired way, for example: https://netcorerepl.telerik.com/mHYMYvYK562FvKng51

With regard to the changes, if you refer to the 100% width, this is a requirement for the components to be responsive. There have been lots of changes throughout the 2022 and 2023 releases aimed at standardizing the behavior, rendering and appearance of the components as well as improvements in the themes.

You might have come across a lot of issues, if you haven't upgraded in a while. We would recommend upgrading frequently, as this would allow you to spot any minor changes along the way, instead of having to deal with a much larger set of changes, if you haven't upgraded your Telerik version in years.

Regards,
Ivan Danchev
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages. If you're new to the Telerik family, be sure to check out our getting started resources, as well as the only REPL playground for creating, saving, running, and sharing server-side code.

Tags
NumericTextBox
Asked by
AP
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Ivan Danchev
Telerik team
Share this question
or