css Question posted in
Some basic documentation can be found here.

Blazor css multiple styling for same element type

I need to implement different styles for one type of element in my project’s page. But I am not able to have more than one fully functional styling.

In this example I have my PartPage.razor with its PartPage.razor.css. and I am implementing two identical styles with different naming, trying to get the same result while implementing through different style names:

PartPage.razor

@page "/part"
<th>
    <label class="form-label-another-label">SomeLabel</label>
    <label class="form-label">SomeLabel</label>
    <input type="text" class="form-control" placeholder="SomeText" />
    <input type="text" class="form-control-another-control" placeholder="SomeText" />
</th>

PartPage.razor.css

.form-label{
    color: aqua
}

.form-label-another-label {
    color: aqua 
}

.form-control {
    color: #077df2;
    background: #f2f0f0;
}

.form-control-another-control {
    color: #077df2;
    background: #f2f0f0;
}

and this is what it does in the app:
blazor app

It seems like it works allright for text adjustment, but not for the form control. Why is that? Is there a way how to have two stylings for same element?

The css is correctly connected to the razor page as this:
page css

Tags:

2

Answers


  1. 0

    The problem is that you are using a CSS class that is already available in blazor by default:

    Screenshot of the browser inspection tool

    If you rename form-control to something different, e.g. form-control1 (in CSS and in HTML) the result will look like this:

    Resulting html page rendering

    So watch out for already used CSS class names and remember the browser inspection tool is your friend in the web 🙂

    Login or Signup to reply.
  2. 0

    Blazor uses Bootstrap by default. form-control is the default Bootstrap css style, so that the element applies the build-in style which caused the difference.

    A quick way is avoid using Bootstrap default css style name, change like below:

    .form-label {
    color: aqua
}

.form-label-another-label {
    color: aqua
}

.form-control-custom {
    color: #077df2;
    background: #f2f0f0;
}

.form-control-another-control {
    color: #077df2;
    background: #f2f0f0;
}

    Then use it in the view:

    <th>
    <label class="form-label-another-label">SomeLabel</label>
    <label class="form-label">SomeLabel</label>
    <input type="text" class="form-control-custom" placeholder="SomeText" />
    <input type="text" class="form-control-another-control" placeholder="SomeText" />
</th>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search