Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 05 May 2020 14:13 by ADMIN
Release 2.13.0
Sylvain
Created on: 20 Mar 2020 14:44
Category: NumericTextBox
Type: Bug Report
5
Class does not render on the main wrapping element
The textbox renders its custom Class on the span, not the main wrapping div:
3 comments
ADMIN
Marin Bratanov
Posted on: 20 Mar 2020 17:09

This is a manifestation of the same issue - the form-control class is not applied to the topmost wrapping element of the numeric textbox, and so the rules don't match. Here's a workaround:

<style>
    .workaround.form-control{
        border: 0;
        padding: 0;
    }
</style>
<div class="form-group">
    <label>TelerikNumericTextBox (with input-group-append)</label>
    <div class="input-group">
        <div class="form-control workaround">
            <TelerikNumericTextBox Width="100%" @bind-Value="@TelerikNumericTextBoxField" T="int?" />
        </div>
        <div class="input-group-append">
            <span class="input-group-text">@@</span>
        </div>
    </div>
</div>

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Sylvain
Posted on: 20 Mar 2020 16:19

Hi Marin, 

the fact to set Width="100%" doesn't really work if you add an input-group-append class.

 

Source code

@page "/"

<div class="form-group">
    <label>Input</label>
    <input type="text" class="form-control" />
</div>

<div class="form-group">
    <label>Input (with input-group-append) </label>
    <div class="input-group">
        <input type="text" class="form-control">
        <div class="input-group-append">
            <span class="input-group-text">@@</span>
        </div>
    </div>
</div>

<div class="mt-5"></div>

<div class="form-group">
    <label>TelerikTextBox</label>
    <TelerikTextBox Class="form-control" @bind-Value="@TelerikTextBoxField" />
</div>

<div class="form-group">
    <label>TelerikTextBox (with input-group-append)</label>
    <div class="input-group">
        <TelerikTextBox Class="form-control" @bind-Value="@TelerikTextBoxField" />
        <div class="input-group-append">
            <span class="input-group-text">@@</span>
        </div>
    </div>
</div>

<div class="form-group">
    <label>TelerikNumericTextBox</label>
    <TelerikNumericTextBox Class="form-control" Width="100%" @bind-Value="@TelerikNumericTextBoxField" T="int?" />
</div>

<div class="form-group">
    <label>TelerikNumericTextBox (with input-group-append)</label>
    <div class="input-group">
        <TelerikNumericTextBox Class="form-control" Width="100%" @bind-Value="@TelerikNumericTextBoxField" T="int?" />
        <div class="input-group-append">
            <span class="input-group-text">@@</span>
        </div>
    </div>
</div>

<div class="form-group">
    <label>TelerikDatePicker</label>
    <TelerikDatePicker Class="form-control" @bind-Value="TelerikDatePickerField" T="DateTime?" />
</div>

<div class="form-group">
    <label>TelerikDatePicker (with input-group-append)</label>
    <div class="input-group">
        <TelerikDatePicker Class="form-control" @bind-Value="TelerikDatePickerField" T="DateTime?" />
        <div class="input-group-append">
            <span class="input-group-text">@@</span>
        </div>
    </div>
</div>


<div class="form-group">
    <label>TelerikComboBox</label>
    <TelerikDropDownList Class="form-control" Width="" Data="@TelerikComboBoxData" @bind-Value="TelerikComboBoxField"
                         ValueField="Id" TextField="Text" TItem="TelerikComboBoxItem" TValue="int?" />
</div>

<div class="form-group">
    <label>TelerikComboBox (with input-group-append)</label>
    <div class="input-group">
        <TelerikDropDownList Class="form-control" Width="" Data="@TelerikComboBoxData" @bind-Value="TelerikComboBoxField"
                             ValueField="Id" TextField="Text" TItem="TelerikComboBoxItem" TValue="int?" />
        <div class="input-group-append">
            <span class="input-group-text">@@</span>
        </div>
    </div>
</div>


@code{
    private string TelerikTextBoxField { get; set; }
    private int? TelerikNumericTextBoxField { get; set; }
    private DateTime? TelerikDatePickerField { get; set; }
    private int? TelerikComboBoxField { get; set; }
    private IList<TelerikComboBoxItem> TelerikComboBoxData { get; set; }

    public class TelerikComboBoxItem
    {
        public int Id { get; set; }
        public string Text { get; set; }
    }
}

 

 

 

ADMIN
Marin Bratanov
Posted on: 20 Mar 2020 14:46

A sample workaround for, for example, bootstrap integration through the form-control class is this:

<div class="form-group">
    <label>TelerikNumericTextBox</label>
    <TelerikNumericTextBox Class="form-control" Width="100%" @bind-Value="@TelerikNumericTextBoxField" T="int?" />
</div>

For other cases, you can add the custom CSS class on a parent element of the numeric textbox and cascade through it.

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Create an account Log In
View
Type
Status
Category