This is a migrated thread and some comments may be shown as answers.

Adjust space between label and field ?

4 Answers 649 Views
TextBox
This is a migrated thread and some comments may be shown as answers.
Tim
Top achievements
Rank 2
Tim asked on 10 Jan 2020, 01:28 PM
How do I adjust the space between label and field when inputting text?By default it's awfully close to the box.

4 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 10 Jan 2020, 05:12 PM

Hi Tim,

You can render you own <label> element so you can style things as you require, for example:

<style>
    .my-special-label {
        width: 300px;
        border: 1px solid red;
    }

        .my-special-label .my-label-text-container {
            margin-bottom: 2em;
            display: inline-block;
        }
</style>
<label class="my-special-label">
    <span class="my-label-text-container">Enter Name:</span>
    <TelerikTextBox Width="100%" />
</label>

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
0
Tim
Top achievements
Rank 2
answered on 11 Jan 2020, 11:12 AM

Thanks Marin,

I think I might have explained it poorly.

With "Label" I mean the placeholder value. The one that animates above the field when you start typing. See the attached pics.

 

0
Accepted
Marin Bratanov
Telerik team
answered on 11 Jan 2020, 05:52 PM

Hello Tim,

Thank you for the clarification. You can inspect the rendered HTML and its CSS rules in order to devise a heavier rule that will produce the desired results. Following this blog post can help you do that: https://www.telerik.com/blogs/improve-your-debugging-skills-with-chrome-devtools.

Here's an example I made for you:

<style>
    .k-textbox-container:not(.k-state-empty) .k-label {
        margin-top: -10px;
    }
</style>

<TelerikTextBox Label="Lorem ipsum" />

I must note that this can put the label basically outside of the textbox container and so it may start overlapping with things above it.

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
0
Tim
Top achievements
Rank 2
answered on 13 Jan 2020, 09:12 AM
Thanks Marin.
Tags
TextBox
Asked by
Tim
Top achievements
Rank 2
Answers by
Marin Bratanov
Telerik team
Tim
Top achievements
Rank 2
Share this question
or