1. Home
  2. Forum
  3. Blazor
  4. SfTextBox floating label doesn't work

SfTextBox floating label doesn't work

This is the simplest code sample that doesn't work on Blazir server app

<div>
    <div>
        <SfTextBox CssClass="e-outline" Placeholder="Outlined" FloatLabelType="@FloatLabelType.Auto"/>
    </div>
</div>

In this case, floating label works well on empty field but as soon as I type value, floating label gets back in field overlapping the content. It does not stay at the top.

Image_7491_1710285470057


7 Replies
KP Kokila Poovendran Syncfusion Team March 14, 2024 07:50 AM UTC

Hi Miloš,


Thank you for reaching out to us.


We understand that you're encountering difficulties with the floating label behavior of the SfTextBox component in your Blazor server app. Your feedback is valuable to us, and we're here to assist you in resolving this issue.


Upon reviewing the provided code snippet and attempting to replicate the problem, we couldn't reproduce the issue at our end. However, we're committed to ensuring that you receive the necessary support to address this matter effectively.


To better assist you, could you please provide additional details about the problem? Specifically, we would appreciate it if you could provide:


Details of the theme you are using in your application.

  • The NuGet package version of the Syncfusion components you're using.
  • A more comprehensive code snippet or a runnable sample that accurately reproduces the issue you're facing.
  • By providing this information, we'll be able to offer you a more tailored and accurate solution to resolve the problem you're encountering.

In the meantime, please feel free to explore the sample we've prepared based on your provided code snippet:


Sample: SfTextBox Floating Label Issue


We appreciate your cooperation and patience as we work together to address this issue.



MI Miloš replied to Kokila Poovendran March 15, 2024 04:19 PM UTC

Hello, thanks for quick response. Steps that I performed are the following:

  1. Started Visual Studio 2022 and created Blazor server app from visual studio offered template.
  2. Registered syncfusion as stated in the manual
  3. Put plain text box control on the home page.

Issues:
  1. When using any theme without  CssClass="e-outline" label floats up when I enter text but returns to the box when I exit the field resulting overwritting entered text
  2. When material theme with  CssClass="e-outline" label doesn't even float up. It simply doesn't move.
Code is attached below, I repeat, this is the simplest Blazor app from VS template.

Attachment: BlazorApp2_228fe6c5.zip

MI Miloš March 15, 2024 04:21 PM UTC

Visual studio version: 17.9.2
Nuget package versions: Syncfusion.Blazor.Inputs and Synfusion.Blazor.Themes 24.1.35



MI Miloš March 15, 2024 04:29 PM UTC

HEre is the video how it behaviourlooks  like : https://drive.google.com/file/d/1UsGPsPQSo4JPvcyGuJ4Yi3SGCVNK-RCN/view?usp=sharing


KP Kokila Poovendran Syncfusion Team March 18, 2024 11:35 AM UTC

Hi Miloš,


Thank you for providing additional details about your issue.


Upon reviewing your provided information and the attached code, it seems that the problem you're encountering is related to missing the "rendermode" property in your Blazor application.


To resolve this issue, you need to ensure that the "rendermode" property is correctly specified in your App.razor file or in individual pages where Syncfusion components are used. The "rendermode" property specifies how the Syncfusion components should be rendered in your application.


Here's an example of how to include the "rendermode" property in your App.razor file:

<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <base rel='nofollow' href="/" />

    <link rel='nofollow' href="_content/Syncfusion.Blazor.Themes/material3.css" rel="stylesheet" />

    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

    <link rel="stylesheet" rel='nofollow' href="bootstrap/bootstrap.min.css" />

    <link rel="stylesheet" rel='nofollow' href="app.css" />

    <link rel="stylesheet" rel='nofollow' href="BlazorApp2.styles.css" />

    <link rel="icon" type="image/png" rel='nofollow' href="favicon.png" />   

    <HeadOutlet />   

</head>

 

<body>

    <Routes @rendermode="InteractiveServer"/>

 

    <script src="_framework/blazor.web.js"></script>

</body>

 

</html>

 



For more details on how to specify the "rendermode" property and its available options, you can refer to the following documentation: https://blazor.syncfusion.com/documentation/textbox/getting-started-webapp


Once you've added the "rendermode" property with the appropriate value, the floating label issue should be resolved. If you have any further questions or need additional assistance, please feel free to ask.





Attachment: BlazorApp2_f1cd2150.zip

MS Monika Sostake September 5, 2025 09:07 AM UTC

Hi, I can reproduce the same issue. I've noticed it's also visible in your docs here -> https://ej2.syncfusion.com/vue/documentation/drop-down-list/style

Image_4899_1757063189355

Is there some kind of work item logged to fix it?


YA YuvanShankar Arunagiri Syncfusion Team September 10, 2025 01:12 PM UTC

Hi Monika,

 

We have reviewed your reported query in the shared UG section preview sample. We would like to inform you that this type of issue has already been resolved in our latest Syncfusion package version.

You can verify this by checking the sample linked below or by using the "Open in StackBlitz" option available in the UG section you mentioned:

 

Sample link: https://stackblitz.com/edit/3rhyqvkz?file=src%2FApp.vue

 

Additionally, please note that the preview sample in the mentioned UG section is currently using an older package version. We will be updating all preview samples to use the latest version in our upcoming release.

 

Regards,

YuvanShankar A


Loader.
Up arrow icon