Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Problems with input and borders and labels over the text

Securum free asked 2 months ago


No border around the textbox (input). The label text is on top of the text in the text box.

enter image description hereSame problem on your demo page. https://mdbootstrap.com/snippets/standard/mdbootstrap/2957842?view=side

Resources (screenshots, code snippets etc.)![Shows problems][2]


Kamila Pieńkowska staff answered 2 months ago


You need to add data-mdb-input-init to div tags with .form-outline class.


Securum free commented 2 months ago

Thanks for the reply. I already have data-mdb-input-init with.Made a test page to demonstrate the issue.

https://keepintouch.se/InputTest (Is deleted now)

@page "/InputTest/"

InputTest

Förnamn Efternamn Test Spara

@code { Models.UserProfile userProfile = new Models.UserProfile();

protected override void OnParametersSet()
{
    userProfile.FirstName = "OnParametersSet";
    userProfile.LastName = "";
    userProfile.CompanyName = "";
}


private void Submit()
{
    userProfile.FirstName = "Submit";
    userProfile.LastName = "";
    userProfile.CompanyName = "";

}

}


Grzegorz Bujański staff commented 2 months ago

This looks like Blazor code. In Blazor, if a component is not mounted in the DOM when the page is rendered, the MDB components you used on this page must be initialized manually.

Today we added a tutorial about MDB integration in Blazor - you will find more information about it there: https://mdbootstrap.com/docs/standard/integrations/blazor/



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 8.0.0
  • Device: Win11
  • Browser: Chrome, Edge
  • OS: Win11
  • Provided sample code: No
  • Provided link: Yes