Unplanned
Last Updated: 30 Jul 2020 17:47 by Brent
Gilles
Created on: 03 Jan 2020 17:26
Category: UI for Blazor
Type: Feature Request
17
Be able to add a label to all components (DatePicker, DateTimePicker, ...)

Hi,

The idea is to use the new way to present information to user (without specific label) but using the label of the components.

InTelerikTextBox, no matter, I have a Label property.

Is it possible to have the same properties for the other controls ?

5 comments
Brent
Posted on: 30 Jul 2020 17:47

in case it helps anyone... for the TelerikDropDownList (and likely others) we desired the focused behavior to be in parity with TelerikTextBox, i.e. float and change to blue on focus... the following code combines the suggestions along with one additional style which is manageable for us

this fledgling label component is trying to be agnostic but the style is specific to the dropdown so we'll have to see how well this evolves as we get into wrapping other widgets with the same general behavior

page:

<style> <!-- presumably this would go in a global stylesheet -->
    .k-floating-label-container > .k-dropdown.k-state-focused + .k-label {
        transform: translate(0, -6px) translate(-1px, -1.03125em) translate(-12.5%, -9.375%) scale(.75);
        color: blue;
    }
</style>

<FloatingLabel Label="Gender" IsEmpty="@( ()=> person.Gender == null )">
    <TelerikDropDownList @bind-Value="person.Gender" DefaultText=""
                          Data="@genders" TextField="Text" ValueField="Id"
                          Width="100%" PopupWidth="200px" PopupHeight="auto" Id="GenderDDL" />
</FloatingLabel>

 

FloatingLabel.razor component:

<span class="k-floating-label-container @( IsEmpty() ? "k-state-empty" : "" )">
    @ChildContent
    <label class="k-label">@Label</label>
</span>

@code{
    [Parameter] public string Label { get; set; }
    [Parameter] public RenderFragment ChildContent { get; set; }
    [Parameter] public Func<bool> IsEmpty { get; set; } = () => true;
}

ADMIN
Marin Bratanov
Posted on: 29 Apr 2020 08:41

Something like this can also be a starting point for implementing a custom version of the floating label

<span class="k-floating-label-container @( TheValue.HasValue == false ? "k-state-empty" : "" )">
    <TelerikDatePicker Id="@Id" @bind-Value="@TheValue" Format="@( TheValue.HasValue ? "d" : "" )"></TelerikDatePicker>
    <label for="@Id" class="k-label">@Label</label>
</span>

@code{
    DateTime? TheValue { get; set; }
    string Label { get; set; } = "Enter date";
    string Id { get; set; } = "theDateInput";
}

 

Regards,
Marin Bratanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Eugenie
Posted on: 05 Feb 2020 14:38
We are working around this by wrapping a TelerikDropDownList in a <label> tag with a custom style; however, it would be much cleaner to have the Label property on the TelerikDropDownList control. I agree with Gilles and hope this will be implemented soon.
ADMIN
Marin Bratanov
Posted on: 16 Jan 2020 11:39

For the time being, a custom label component can be used to add <label> tags to all inputs (both Telerik ones, and other ones). Something like this:

The MyLabel component that provides the functionality (can be extended, the key thing is to wrap the input in the <label> so clicking the label text will focus the input):

<label>
    <span class="my-label-text">@Text</span>
    @ChildContent
</label>

@code {
    [Parameter] public string Text { get; set; }
    [Parameter] public RenderFragment ChildContent { get; set; }
}

<style>
    /*showcases the concept, move to site stylesheet, of course*/
    .my-label-text {
        color: red;
        display: inline-block;
        width: 100%;
    }
</style>

The calling page (it has full control over the component it renders and you can swap as needed):

@MyItem

<MyLabel Text="lorem ipsum">
    <TelerikComboBox Data="@MyList" @bind-Value="@MyItem">
    </TelerikComboBox>
</MyLabel>



@code {
    protected List<string> MyList = new List<string>() { "first", "second", "third" };

    protected string MyItem { get; set; } = "second";
}

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
ADMIN
Marin Bratanov
Posted on: 04 Jan 2020 08:41

Hi,

At this point, the future of this animated label is a bit uncertain and you can follow the discussion and one of the original issues with it here: https://feedback.telerik.com/blazor/1435183-incorrect-textbox-rendering-issues-with-bootstrap-and-setting-width-has-no-effect-when-label-is-used. This thread also offers some information on the subject: https://www.telerik.com/forums/labels-0ee6909ac0f4.

We have it on our radar to investigate this, and that will probably happen when we review the issue from the feedback portal above. Until then, I can't say what would be a feasible course of action, because we must be wary of introducing issues. At this point, I'd suggest wrapping the input components entirely inside your own <label> tag in order to use labels that facilitate focus. If we do expose a separate label that can be used across the board, you will be able to replace them as I expect the syntax would be similar - I imagine that such a floating label component would have to wrap the inputs in the same fashion.

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor