The formgroup label is currently displayed in uppercase, but I would prefer it to be in title case

In the angular template below, I have noticed that even though the labels are in titlecase, they appear in uppercase when the page is rendered. This wasn't the desired outcome so I attempted to use the titlecase pipe and enclose the label text within single quotes. However, despite my efforts, the labels still display in uppercase (refer to the attached image for clarification).

It seems like a simple issue to fix, but I'm struggling to find a solution. Does anyone have any suggestions?

<form [formGroup]="updateForm" (ngSubmit)="onSubmit(updateForm.value)">
    <div>
        <label for="total">
          {{'Total' | titlecase}}
        </label>
        <input id="total" type="text" formControlName="total">
      </div>

      <div>
        <label for="supporters">
          {{'Number of supporters' | titlecase}}
        </label>
        <input id="supporters" type="text" formControlName="supporters">
      </div>      
    <button class="button" type="submit">Save</button>

  </form>

https://i.sstatic.net/qeCch.png

Answer №1

There appears to be an issue related to your CSS styling.

It's possible that a library or external css file may be applying the text-transform: uppercase; property to the <label>.

To address this, you can override it with custom css rules such as:

HTML

<form [formGroup]="updateForm" (ngSubmit)="onSubmit(updateForm.value)">
    <div>
        <label class="custom-label-title" for="total">
          {{'Total'}}
        </label>
        <input id="total" type="text" formControlName="total">
      </div>

      <div>
        <label  class="custom-label-title" for="supporters">
          {{'Number of supporters' }}
        </label>
        <input id="supporters" type="text" formControlName="supporters">
      </div>      
    <button class="button" type="submit">Save</button>

  </form>

CSS

.custom-label-title {
  text-transform: capitalize;
}

If the above code doesn't work, you can try adding !important for testing purposes:

CSS

.custom-label-title {
  text-transform: capitalize !important;
}

This could happen if other CSS rules take precedence over it:

Understanding the order of precedence for CSS styles

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

Trouble with applying CSS class to checkboxlist

I am trying to display a border around each checkbox item in a checkboxlist. I believe that it can be achieved by setting the td cssclass as the checkboxlist saves items in td. However, the code I tried below is not working. Here is the ASPX code: < ...

My CSS code is not successfully positioning the items to the right, despite my best efforts

I'm currently working on a website project and facing an issue with aligning the text 'Axxon' to the left of the div-header-gradient class, and the a href positioned to the right of the header. However, my code doesn't seem to be workin ...

Is it considered best practice to include try/catch blocks within the subscribe function in RxJs?

Imagine we have an Angular 2 application. There is a service method that returns data using post(), with a catch() statement to handle any errors. In the component, we are subscribing to the Observable's data: .subscribe( ()=> { ...

Issue with ng-model causing incorrect variable binding

My issue lies with a variable that I have connected to a select input through the use of ng-model. Strangely, the variable seems to not update with the correct data and retains the value assigned to it during initialization. I have a similar setup elsewhe ...

The margin-bottom CSS class is integrated within Twitter Bootstrap

Is there a standard margin bottom class that can be used? I attempted to use bottom5 like this: <div class="col-lg-2 bottom5"></div> However, it did not have the desired effect. ...

CSS padding not behaving as expected

Hey there, I have a question regarding adjusting text inside a div using padding. I tried applying the padding command, but it doesn't seem to have any effect. You can find the relevant part of my code here <html> <head> <meta ch ...

Configuring child routes in Angular 8 for optimal navigation efficiency

I am working on an Angular 8 app where I have created two modules: testModule and SimulatorModule The simulator module has a routing file, but the testModule does not. I am trying to load all the components in the Simulator module as children of the Tes ...

What is the best way to select the <span> element following an HTML tag?

Is there a way to target the first child of a span after a specific HTML tag? Here is an example of my markup: <div class="gad-help"> <a href="#">AdWords Guide<br><span>ensure best results</span></a> </div> H ...

Advanced Angular2 Services Expansion

I'm looking to enhance an existing angular service (for example, Http). Requirements: The extension of the service should be done through angular's dependency injection It should be possible to extend the service multiple times using a pattern ...

Creating a sleek grayscale effect when hovering with CSS is both simple and effective

My website features a grayscale logo that smoothly transitions to color upon hover. However, I am experiencing some issues with the smoothness of this transition when using CSS. Here is my current code: <img alt="TT ltd logo" src="./img/tt-logo.png" c ...

After closing the box, make sure to hold it securely

After clicking the button and closing my box with jQuery (Toggle), I want the state of the box to be remembered after refreshing the page. If the box was closed, it should remain closed upon refresh, and if it was open, it should stay open. I am looking ...

Tips for swapping out a sticky element as you scroll

Context As I work on developing a blog website, I aim to integrate a sticky element that dynamically updates according to the current year and month as users scroll through the content. This would provide a visual indication of the timeline for the listed ...

How about implementing built-in validation for Vue Headless UI Listbox (Select) element?

I need assistance in integrating native validation support into the Vue3 or Nuxt 3 Vue Headless UI Listbox (Select) component. It appears that direct support is not available, so I am looking for the best and most straightforward approach to achieve this. ...

What is the process for developing a custom pipe in Angular 12 with ngx-translate and internationalization support?

I've been working on internationalization for my angular project, which is an admin portal using @ngx-translate. Unfortunately, I've hit a roadblock and need to start over with the internationalization task. Any suggestions on how to approach thi ...

`Creating a fluid MySQL table using JavaScript`

One of the challenges I'm facing involves working with a MySQL table that consists of 3 columns: MySQL db table +--+----+-------------+ |id|data|display_order| +--+----+-------------+ |0 |0 |2 | +--+----+-------------+ |1 |1 |1 ...

Issue encountered while implementing async functionality in AngularFireObject

I'm encountering difficulties with the async feature in AngularFireObject. Is there a solution available? Snippet from HomePage.ts: import { AngularFireObject } from 'angularfire2/database'; export class HomePage { profileData: Angu ...

What is the best way to stop navigation when a button is clicked inside a table row that contains a routerLink?

Looking for a solution with an angular material table set up like this: <table mat-table [dataSource]="myTable" matSort> <ng-container matColumnDef="column1"> <th mat-header-cell *matHeaderCellDef>My Column</th> <td ma ...

Javascript clock problem, kick off on click

Currently working on a game and in need of a counter that starts when clicked and stops at 00 (From 1m to 00). It is currently starting onload and cycles back to start when it reaches 00. HTML: <body> <div> <div class="timer" >Battle t ...

Enhancing JQuery UI Accordion with simple ICONS

Is it necessary to use the Jquery CSS file for adding icons, or is there an alternative method? I'm hoping I can avoid using it as I am working within Wordpress and enqueuing the Jquery CSS seems like a complex task for me. Apologies for the basic q ...

The issue of TypeScript failing to return HTML Template Element from Constructor typing is causing complications

There is a restriction on using new to create an instance of Template, which extends an HTMLTemplateElement. To work around this limitation, I fetch and return an HTMLTemplateElement by using document.getElementById(id) within the constructor of the Templ ...