Completed
Last Updated: 19 Feb 2020 11:31 by ADMIN
Release 2.8.0
Jan Heiko Houtrouw
Created on: 21 Oct 2019 09:39
Category: TextBox
Type: Bug Report
4
Incorrect textbox rendering - issues with Bootstrap and setting width has no effect when Label is used

Hello,

 

When I set the width to any value it has no effect.

 

I am using the boostrap theme:

<link rel="stylesheet" href="https://unpkg.com/@@progress/kendo-theme-bootstrap@@latest/dist/all.css" />

5 comments
ADMIN
Marin Bratanov
Posted on: 21 Oct 2019 15:22

Hello Jan,

Even if we choose to remove this animated label, the textbox itself may lose an animation feature (labels will still be possible, of course), but it would also gain consistency with the rest of the components, so when you build a form with various input types, they will all look and behave in the same way - this also includes their line height and how labels are handled. You can read some other comments and discussion here. As the thread mentions, it is possible, that the animated label will become a separate component so that you could still use it, but the components will have better consistency out-of-the-box. At this point, I can't say what will happen.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Jan Heiko Houtrouw
Posted on: 21 Oct 2019 14:22

Hello,

"it may get removed from the component itself,"

I think if you remove the floating label it would be big degradation ...

ADMIN
Marin Bratanov
Posted on: 21 Oct 2019 14:04

Indeed, the floating label is the issue here. It requires a special CSS class that, most notably, puts position: relative on the wrapper of the textbox, so percentages no longer work.

Considering that only the textbox has such a label, I would recommend that you remove its Label parameter and use your own <label> elements to wrap it for accessibility, where you can add styling and content as desired.

 

<style>
    .myLabel {
        width: 100%;
    }
</style>
<div style="width: 500px; border: 1px solid red;">
    <label class="myLabel">
        my label text
        <TelerikTextBox Width="100%" />
    </label>
    <br />
    <TelerikTextBox Width="100%" />
</div>

 

At this point I cannot say what the future of the floating label feature will be, but it may get removed from the component itself, even if it gets exposed as a separate component.

I moved this thread to the public Feedback Portal so you can Follow its status. Here's a link for you: https://feedback.telerik.com/blazor/1435183.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Jan Heiko Houtrouw
Posted on: 21 Oct 2019 12:52

Hi Marin

 

Thanks for the help ! There was a problem with css. But I was wondering about the following behaviour:

 

Change the example to

  <div style="width: 500px; border: 1px solid red;">
    <TelerikTextBox Width="100%" Label="sd" />
    <br />
    <TelerikTextBox Width="100%" />
  </div>

 

When the Label is set, the width of 100% is not applied?

ADMIN
Marin Bratanov
Posted on: 21 Oct 2019 10:54

Hi Jan,

We had a bug about this and we fixed it in 1.5.0 in August. What is the version that you are using? The 1.5.0 would no longer work with the current latest framework too, so you need to ensure you are using the latest one.

Also, can you confirm that CSS rules from the project are not taking precedence and defining the input widths?

I am attaching here a project with the current latest that uses the bootstrap theme and seems to define textbox width as expected for me. If comparing against it does not help you resolve this, please post the modification I need to make in order to observe the issue.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Attached Files: