Webassembly/Razor - css question

etienne_marais

etienne_marais

Honorary Master
Joined
Mar 16, 2008
Messages
16,250
Reaction score
19,740
Location
Centurion
I am following an udemy course and am having trouble at a section where css is used to append text (an asterisk after a label).

The razor page (pages/Register.razor) is as follow:

Code: 
@page "/register"
@inject IUnitService UnitService

<h3>Register</h3>

<EditForm Model="user" OnValidSubmit="HandleRegistration">
    <DataAnnotationsValidator></DataAnnotationsValidator>
    <div class="form-group">
        <label for="email">Email</label>
        <InputText id="email" @bind-Value="user.Email" class="form-control"></InputText>
        <ValidationMessage For="@(()=>user.Email)"></ValidationMessage>
    </div>
    <div class="form-group">
        <label for="username" class="required">Username</label>
        <InputText id="username" @bind-Value="user.Username" class="form-control"></InputText>
        <ValidationMessage For="@(()=>user.Username)"></ValidationMessage>
    </div>
    <div class="form-group">
        <label for="password" class="required">Password</label>
        <InputText id="password" @bind-Value="user.Password" class="form-control" type="password"></InputText>
        <ValidationMessage For="@(()=>user.Password)"></ValidationMessage>
    </div>
    <div class="form-group">
        <label for="confirmPassword">Confirm Password</label>
        <InputText id="confirmPassword" @bind-Value="user.ConfirmPassword" class="form-control" type="password"></InputText>
        <ValidationMessage For="@(()=>user.ConfirmPassword)"></ValidationMessage>
    </div>
    <div class="form-group">
        <label for="bio">Bio</label>
        <InputTextArea id="bio" @bind-Value="user.Bio" class="form-control"></InputTextArea>
    </div>
    <div class="form-group">
        <label for="startUnit">Start Unit</label>
        <InputSelect id="startUnit" @bind-Value="user.StartUnitId" class="form-control">
            @foreach (var unit in UnitService.Units)
            {
                <option value="@unit.Id">@unit.Title</option>
            }
        </InputSelect>
    </div>
    <div class="form-group">
        <label for="bananas">Bananas</label>
        <InputNumber id="bananas" @bind-Value="user.Bananas" class="form-control"></InputNumber>
        <ValidationMessage For="@(() => user.Bananas)"></ValidationMessage>
    </div>
    <div class="form-group">
        <label for="dateOfBirth">Date Of Birth</label>
        <InputDate id="dateOfBirth" @bind-Value="user.DateOfBirth" class="form-control"></InputDate>
    </div>
    <div class="form-check">
        <InputCheckbox id="confirmed" @bind-Value="@user.IsConfirmed" class="form-check-input"></InputCheckbox>
        <label for="confirmed" class="form-check-label">Confirmed</label>
        <ValidationMessage For="@(()=>user.IsConfirmed)"></ValidationMessage>
        <button type="submit" class="btn btn-primary">Register</button>
    </div>
</EditForm>
@code {
    UserRegistration user = new UserRegistration();

    private void HandleRegistration()
    {
        Console.WriteLine("Registering");
    }
}

And the css (pages/Register.razor.css)

Code: 
.required::after {
    content: " *";
    font-weight: bold;
    color: red;
}

The page loads as follow (no asterisk after username or password)

razor.JPG

The tutorial project otherwise works exactly as expected with the css addition the latest change to the project.

Any ideas why the asterisks are not showing ?
 
etienne_marais said:
The page loads as follow (no asterisk after username or password)

View attachment 1155410

The tutorial project otherwise works exactly as expected with the css addition the latest change to the project.

Any ideas why the asterisks are not showing ?
Click to expand...
Remove the space in front of the asterisk? Another thing I could suggest is to try replacing the "required" class with something like li or some other element to see if the class is maybe a bit vol kak?

I also found some docs about the content property that might help you:
www.w3schools.com

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com www.w3schools.com

content CSS property - CSS | MDN

The content CSS property replaces content with a generated value. It can be used to define what is rendered inside an element or pseudo-element. For elements, the content property specifies whether the element renders normally (normal or none) or is replaced with an image (and associated "alt"...
developer.mozilla.org developer.mozilla.org
 
etienne_marais said:
I am following an udemy course and am having trouble at a section where css is used to append text (an asterisk after a label).

The razor page (pages/Register.razor) is as follow:

Code: 
@page "/register"
@inject IUnitService UnitService

<h3>Register</h3>

<EditForm Model="user" OnValidSubmit="HandleRegistration">
    <DataAnnotationsValidator></DataAnnotationsValidator>
    <div class="form-group">
        <label for="email">Email</label>
        <InputText id="email" @bind-Value="user.Email" class="form-control"></InputText>
        <ValidationMessage For="@(()=>user.Email)"></ValidationMessage>
    </div>
    <div class="form-group">
        <label for="username" class="required">Username</label>
        <InputText id="username" @bind-Value="user.Username" class="form-control"></InputText>
        <ValidationMessage For="@(()=>user.Username)"></ValidationMessage>
    </div>
    <div class="form-group">
        <label for="password" class="required">Password</label>
        <InputText id="password" @bind-Value="user.Password" class="form-control" type="password"></InputText>
        <ValidationMessage For="@(()=>user.Password)"></ValidationMessage>
    </div>
    <div class="form-group">
        <label for="confirmPassword">Confirm Password</label>
        <InputText id="confirmPassword" @bind-Value="user.ConfirmPassword" class="form-control" type="password"></InputText>
        <ValidationMessage For="@(()=>user.ConfirmPassword)"></ValidationMessage>
    </div>
    <div class="form-group">
        <label for="bio">Bio</label>
        <InputTextArea id="bio" @bind-Value="user.Bio" class="form-control"></InputTextArea>
    </div>
    <div class="form-group">
        <label for="startUnit">Start Unit</label>
        <InputSelect id="startUnit" @bind-Value="user.StartUnitId" class="form-control">
            @foreach (var unit in UnitService.Units)
            {
                <option value="@unit.Id">@unit.Title</option>
            }
        </InputSelect>
    </div>
    <div class="form-group">
        <label for="bananas">Bananas</label>
        <InputNumber id="bananas" @bind-Value="user.Bananas" class="form-control"></InputNumber>
        <ValidationMessage For="@(() => user.Bananas)"></ValidationMessage>
    </div>
    <div class="form-group">
        <label for="dateOfBirth">Date Of Birth</label>
        <InputDate id="dateOfBirth" @bind-Value="user.DateOfBirth" class="form-control"></InputDate>
    </div>
    <div class="form-check">
        <InputCheckbox id="confirmed" @bind-Value="@user.IsConfirmed" class="form-check-input"></InputCheckbox>
        <label for="confirmed" class="form-check-label">Confirmed</label>
        <ValidationMessage For="@(()=>user.IsConfirmed)"></ValidationMessage>
        <button type="submit" class="btn btn-primary">Register</button>
    </div>
</EditForm>
@code {
    UserRegistration user = new UserRegistration();

    private void HandleRegistration()
    {
        Console.WriteLine("Registering");
    }
}

And the css (pages/Register.razor.css)

Code: 
.required::after {
    content: " *";
    font-weight: bold;
    color: red;
}

The page loads as follow (no asterisk after username or password)

View attachment 1155410

The tutorial project otherwise works exactly as expected with the css addition the latest change to the project.

Any ideas why the asterisks are not showing ?
Click to expand...
Quickly looking at the code it looks like it should show the asterisk.

What happens after you click Register without filling in any values? Does it show the asterisk in red then?

Maybe also make sure that the Blazor CSS isolation is working. Add some other style in there and try it out.
 
Can confirm, css is solid.
If blazor allows it, drop in a style tag with a background color or something. Just to see if the styles are making it through the build process.

Check the stylesheets in devtools network tab or if it's ssr, view source and find the class (faster than trawling devtools)
 
You must log in or register to reply here.
Back
Top
Sign up to the MyBroadband newsletter
X