What is the most dependable method for referencing a CSS class through programming?

Within my Sharepoint project, I am dynamically generating controls in the overridden CreateChildControls() method. I am uncertain which approach is more preferable when it comes to referencing the .css file:

protected override void CreateChildControls()
{
    base.CreateChildControls();

    // Approach 1
    // sourced from http://sharepoint.stackexchange.com/questions/18652/programmatically-add-js-css-to-pages
    this.Controls.Add(new CssRegistration()
    {
        Name = "/_layouts/ucsc_web_forms.css"
    });

    // Approach 2
    HtmlLink cssLink = new HtmlLink();
    cssLink.Attributes.Add("type", "text/css");
    cssLink.Attributes.Add("rel", "stylesheet");
    cssLink.Attributes.Add("href", "/_layouts/duckbilled_platypi_rus.css");
    this.Page.Header.Controls.Add(cssLink);

    boxPayeeName = new TextBox();
    boxPayeeName.CSSClass = "duck-billed-platypi";
    boxPayeeName.Columns = LONG_TEXT_BOX_COL_WIDTH;
}

...but I assume that one of them should suffice. Is there a preferred methodology between the two?

UPDATE

After conducting some hands-on testing (the empirical evidence speaks for itself), it appears that the second approach breaks the WebPart, at least within my setup. The first one:

this.Controls.Add(new CssRegistration()
{
    Name = "/_layouts/ucsc_web_forms.css"
});

...at the very least, "does no harm"

Answer №1

This solution has proven effective for me (assuming that your project contains a CSS file named "ucsc_web_forms.css" with classes labeled "finaff-webform-field-label" and "finaff-webform-field-input"):

In the CreateChildControls() method, add the following code snippet after "base.CreateChildControls();":

this.Controls.Add(new CssRegistration()
{
    Name = "/_layouts/ucsc_web_forms.css"
});

After implementing this change, dynamically creating controls as shown below will function smoothly:

LiteralControl reqDateStr = new LiteralControl("<span class=\"finaff-webform-field-label\">Requester Date:</span>");
. . .
boxPayeeName = new TextBox();
boxPayeeName.CssClass = "finaff-webform-field-input";

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 HTML generated by Angular does not display as anticipated

When converting the angular-generated HTML to a PDF using jspdf, it does not take into consideration angular classes like ng-hide. This means that elements styled with the ng-hide class will still appear in the generated PDF. To see an example, visit the ...

Show the text from the chosen option using jQuery with a button

Hey everyone, I have a question regarding a coding issue I'm facing. In this problem, I am unable to display the text from the selected option when I click the order button. The desired result is to show the selected option that I choose and display i ...

Elements listed are often ignored by HTML

My website sends a URL and xpath query to the server in order to extract data from the URL based on the xpath query. While it is functioning properly, I am encountering a singular issue. When I specify an xpath query for href,text, it displays a list of a ...

Tips for creating a textfield with height that responds dynamically in Material UI

I am trying to create a textfield with a responsive height that adjusts itself based on the size of its parent grid when the browser window is resized. I have been searching for a solution and came across this helpful post on Stack Overflow about creating ...

How can validation of input fields be implemented in React Js?

Currently, I am dealing with a variable (in my actual application it is an API) named data, which contains nested items. Starting from the first level, it includes a title that is already displayed and then an array called sublevel, which comprises multip ...

Tips for preloading icon font in Angular server-side rendering (SSR)

Is it possible to preload icons and fonts before the HTML content is rendered? I have been using a preload strategy to try and achieve this. index.html <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

Determine the closest input value by clicking a specific link

Can you help me with a task involving text inputs and links? <p><input type="text" name="color[]" value="orange" /> <a href="#" class="show-color">color</a><br /> <input type="text" name="color[]" value="purple" /> < ...

Attempting to relocate various containers

My task involves handling a group of randomly placed boxes on a webpage, each painted in random colors. I am currently attempting to enable their movement from one location to another. Despite being a seemingly simple task, my lack of familiarity with mous ...

Unique calculation for rotational movement

I am currently developing a unique compass application. Although the project is progressing well, I am facing a significant challenge with one aspect: My code calculates degree angles within the range of -360 and 360: -318°, -29°, 223°, -163°, ... ...

Trigger the select dropdown when a key is clicked

I am currently working on a project in react where I am utilizing the Select component from material. When I open the dropdown and press a key on my keyboard, the option starting with that key gets automatically selected. This behavior is also observed in ...

Updating a table in Javascript after deleting a specific row

Is there a way to automatically reindex rows in a table after deleting a row? For example, if I delete row 1, can the remaining rows be reordered so that they are numbered sequentially? function reindexRows(tableID) { try { var t ...

Increase the size of the grid system column upon clicking on a Bootstrap icon

I am using Google Maps in a tab with Bootstrap, but the map is too small. I would like to change the Bootstrap grid system when I click on a FontAwesome icon: the first column should turn into col-md-8, and the second column should become col-md-4. Here i ...

Design concept - Trigger an action upon clicking a checkbox within a table row

I've been working on implementing a selectable table using material design. I want to trigger an action when a checkbox in a table row is clicked, but my attempts with jQuery have not been successful. Here's the structure of my table: <table ...

Prevent access to website during execution of background tasks

Whenever a user visits the homepage, I need to verify that default values on the database are in place (if this is not the correct location for the check, please advise). Here's what needs to happen: Determine if the database is empty (if not, skip ...

When attempting to click the submit button, the action of submitting a form using jQuery/AJAX is not functioning as expected

When attempting to submit a form using jquery/AJAX, my function does not get called when clicking on the submit button. The structure of my website is as follows: CarMenu.php <html lang="en"> <html> <head> <meta charset="ISO-8859- ...

Display user input within a modal dialogue box

I have a subscription form that requires users to enter their name and email address. After clicking on "Compete Now," a pop-up appears asking for workshop information and postal code. The form is functioning correctly as intended. However, I want the em ...

Tips for relocating a div panel below all other div panels when a button is clicked with JQuery and CSS

There are several panels stacked below each other. Each panel has a button that, when clicked by the user, should move the panel to the bottom of the stack. For example: If there are 10 panels aligned sequentially and the user wants to remove Panel 2 by ...

Tips for dynamically populating an HTML table with data from a JSON array using JQuery

I have generated an HTML table <table id="top_five_table"> <tr> <td> </th> <th>URL</th> <th width="90">Total Hits</th> <th width="380">Percentage of all Hits</th> </tr> <tr> ...

What is the most effective way to transfer color values from one div to another?

When recreating a game similar to Mastermind, I encountered a challenge of copying color values from one div to another upon clicking a button. Despite browsing the web, I haven't found a solution for this specific situation. Below is the code I have ...

Creating a CSS layout with three columns where the first column's width is unspecified and the second

I am looking to create a three column layout with specific width requirements. The first column should adjust based on content, the second column should fill the space between the first and third columns, and the third column should have a fixed width. Add ...