4 Answers, 1 is accepted
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
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.
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