LabeFor does not automatically create the display-lable class attribute

When setting up a new MVC project, the default Site.css file typically includes the following styles:

/* Styles for editor and display helpers
----------------------------------------------------------*/
.display-label, 
.editor-label 
{
    font-weight: bold;
    margin: 1em 0 0 0;
}

However, after using LabelFor(m=>m.SomeField), the generated HTML does not include the specified class attribute:

<label for="SomeField">Some Field</label>

It has been observed that in other instances, when using LabelFor, the generated HTML does include the class="display-label" attribute.

Should LabelFor generate this class attribute? If so, what could be causing it not to do so in my case?

Despite having a custom DataAnnotationsModelMetadataProvider in place, the base is still being called as follows:

protected override ModelMetadata CreateMetadata(IEnumerable<Attribute> attributes, Type containerType, Func<object> modelAccessor, Type modelType, string propertyName)
{
    var metadata = base.CreateMetadata(attributes, containerType, modelAccessor, modelType, propertyName);

    if (metadata.DisplayName == null)
        metadata.DisplayName = propertyName.ToTitleCaseFromCamel();

    return metadata;
}

Answer №1

If you utilize EditorFor and DisplayFor templates, those css classes will automatically be applied. However, when using LabelFor, you must define your own custom css class for styling.

Answer №2

After a discussion with Rossi, I decided to review one of my Create pages to validate his statements. Interestingly, I noticed that the calls to EditorFor and DisplayFor did not seem to utilize any of the CSS classes in my project. This led me to explore the generated HTML of some of my Create/Edit pages.

I discovered that these classes are only utilized in Views generated through scaffolding options:

<div class="editor-label">
            @Html.LabelFor(model => model.MeetingDate)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.MeetingDate)
            @Html.ValidationMessageFor(model => model.MeetingDate)
        </div>

It became clear that the generated page explicitly references the CSS class, which is not a result of the LabelFor Html helper call but rather the scaffolding process.

Therefore, I now understand that I need to explicitly reference these classes in views that I personally code from scratch.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The float:left property within a div is not behaving as anticipated

I am having trouble positioning my second div. In order to have 70% of my website for posts and 30% for a small text display, I created a new div. I believe the correct way to position it is by using "float: left" so that the div goes under the banner whe ...

Exploring Bootstrap: Understanding column stacking and the requirement for a new row to stack upon resizing

I am currently mastering Angular and Bootstrap for a potential job opportunity, so I have decided to create a simple demo page. However, I am facing an issue with getting a new row to stack after the last div of the previous row when resizing. Initially, m ...

Error retrieving resource: server returned a 404 status code indicating file not found for javaScript and CSS files

I can't seem to get my css and js files to load on the server. Here is how my file structure looks like: GAME_Folder HTML doctype html head link(href='https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap' rel='sty ...

Fixed navbar at the top changes from absolute positioning to relative when scrolling

My goal is to dynamically change the position of the navbar from fixed to absolute as the user scrolls past 600px. Initially, I used the following code: if (scroll >= 700) { $(".navbar-fixed-top").addClass("navbar-scroll"); } else { $(".navbar ...

Using Multiple SCSS Files to Reference a Centralized Style Sheet

I am currently developing a React application and facing an issue with my SCSS files. I have three SCSS files, one main file that contains theme variable colors, and the other two are located in component folders. When I import the main SCSS file into the ...

A guide on altering the color of a badge through programming

I am curious to learn how I can dynamically change the color of a badge in Angular. My goal is to initially set the color of the badge to white, and then if the percVLRiskTotal reaches a specific value, change the color to green as an example. CSS: <sp ...

What causes the width of a card to vary between Windows and a Macbook Pro?

Here is the code I have: <div id="app"> <v-app id="inspire"> <v-content> <v-container> <v-card max-width="1000" class="mx-auto" > <v-form v-model="valid"> ...

Unleashing the Power of Reactstrap: Making Uncontrolled Collapse Panels Open by Default

Can the uncontrolled collapse be displayed as open by default? Below is the standard code for uncontrolled collapse, which is initially shown as a collapsed tab. <Button color="primary" id="toggler"> Toggle </Button> < ...

I need to position the CSS vertical scrollbar on the right side of the page

I can't figure out how to move the vertical scrollbar to sit on the right side of my site's work page. Any help would be greatly appreciated. Below is the provided HTML code: <div class="heading"> <h1>PRINT</h1> &l ...

How can I position four DIV elements to the right of each other inside a parent DIV?

I am attempting to align 4 divs next to each other within a parent div at specific positions. The proposed div structure is as follows (referred to as the maindiv): <div> <div>1</div> <div>2</div> <div>3< ...

An unusual outcome occurred while attempting to duplicate the text

After copying the letter A, I noticed that an empty string is being logged to the console instead of the expected A. However, when I paste, the console does successfully log the letter A. document.addEventListener('copy', handler); document ...

Is it possible to use velocity js to add a gradient color effect to text content?

Can I use velocity js to apply gradient color to text? I've looked at https://css-tricks.com/snippets/css/gradient-text/ My specific need is to dynamically add a changing gradient using js. Thank you in advance. ...

"Responsive modal with dynamic height based on percentage and a minimum height constraint

My goal is to design a modal dialog that adjusts its height based on a percentage of the browser window height. The modal should maintain a minimum height to ensure it doesn't become too small, and it should dynamically grow, shrink, and re-center as ...

How can I change the cursor of a button to a pointer in Bootstrap 4 when the button is not disabled?

I'm working with a bootstrap button <button class="btn btn-primary">Login</button> My goal is to change the cursor to a pointer (hand) on this button when it's not disabled, instead of the default arrow. The disabled property of th ...

`Count the number of rows needed to accommodate text line breaks within a div element`

Is there a method to determine the number of lines that text breaks into using the CSS property word-break: break-all? For example, if I have a div like this: <div>Sample text to check how many lines the text is broken into</div> And the corr ...

When the content in the div exceeds its boundaries, it causes it to overlap with

In my design, I have a top menu with a z-index of 999 to ensure nothing covers it. However, I am facing an issue where a scrolling div is appearing on top of the menu bar even though it shouldn't. Any idea why this is happening? Here is the CSS for t ...

Ways to shut down a pop-up

Can someone assist me with how to close the bio-info popup and implement it in the code provided below? The HTML file: <ul class="ch-grid"> <li> <div class="bioinfo"> <h2>tooltips</h2> /div> The CSS file: .bioinfo { ...

Retrieve the UICulture of a website within the handler.ashx file

In my code, I have a function that displays a message to the user (triggered by jquery load() method). The website I'm working on supports multiple languages. When the page loads, I am configuring the user interface language using the 'lang&apos ...

Creating a button in ReactJS with text displayed under an icon

Presently, I am working with a component that looks like this: https://i.stack.imgur.com/qGCwj.png This is the code for the component: import React from "react"; import {withStyles} from "material-ui/styles"; import Settings from "material-ui-icons/Setti ...

The React application ceases to function properly as soon as I introduce a textfield

As a newcomer to React, I am facing an issue while working on the front-end UI of a web application. Whenever I try to add a text field to the box I created, the app fails to render anything other than a blank color on the screen. Here is how it looks: W ...