How can I extend the input field length in the form to make it appear more compact?

Question

How can I extend the input field length in the form to make it appear more compact?

<div formGroupName="xxxx" class="form-row">
  <div class="form-group col-md-3">
    <mat-form-field class="row-styling">
      <mat-label> Mobile Number </mat-label>
      <input
        matInput
        phoneNumberOnly
        [value]="f.xxx['controls'].cellPhone.value | phone"
        (blur)="validatePhone($event.target)"
        maxlength="12"
        formControlName="cellPhone"
        name="yyy"
      />
    </mat-form-field>
  </div>
  <div></div>
</div>

I attempted to add a width of 200px in the platform field but it did not have any effect. Check out the image here.

html css angular bootstrap-4

Answer 1

Answer №1

Once you have included the CSS class called row-styling, simply insert the following lines of code into your .scss file to make it functional.

.row-styling {
    input {
       width:200px;
    }
 }

If you are still not achieving the desired width, consider adding !important after 200px in your .scss file.

Answer 2

Once you have included the CSS class called row-styling, simply insert the following lines of code into your .scss file to make it functional.

.row-styling {
    input {
       width:200px;
    }
 }

If you are still not achieving the desired width, consider adding !important after 200px in your .scss file.

Answer 3

Answer №2

Make sure to include the word essential in your input control style. Your own style should take precedence over Bootstrap's style, like this:

<div formGroupName="xxxx" class="form-row">
          <div class="form-group col-md-3 ">
            <mat-form-field class = "row-styling">
              <mat-label> Cell Phone </mat-label>
              <input style="width: 200px!important;" matInput phoneNumberOnly 
                [value]="f.xxx['controls'].cellPhone.value | phone"  
                (blur)="validatePhone($event.target)" 
                maxlength="12" formControlName="cellPhone" name="yyy" />
              </mat-form-field>
           </div>
    <div>

Answer 4

Make sure to include the word essential in your input control style. Your own style should take precedence over Bootstrap's style, like this:

<div formGroupName="xxxx" class="form-row">
          <div class="form-group col-md-3 ">
            <mat-form-field class = "row-styling">
              <mat-label> Cell Phone </mat-label>
              <input style="width: 200px!important;" matInput phoneNumberOnly 
                [value]="f.xxx['controls'].cellPhone.value | phone"  
                (blur)="validatePhone($event.target)" 
                maxlength="12" formControlName="cellPhone" name="yyy" />
              </mat-form-field>
           </div>
    <div>

How can I extend the input field length in the form to make it appear more compact?

Answer №1

Answer №2

Similar questions

The image is refusing to adjust according to CSS settings

What is the best way to include a specific stylesheet for Blackberry Curve devices based on certain conditions

Ways to display or conceal multiple div elements using JavaScript

What could be the reason for the crash caused by ngModel?

Upgrading from Angular 10 to 13 resulted in an error that required adding 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas'. Although this fix was implemented, the issue still persists and the application remains broken

Detecting property changes in Angular 2: A step-by-step guide

Creating a secure Angular pipe to prevent DomSanitizer from removing content

The function slice is not a method of _co

Is there a method to prevent Apple OS from applying its default styles to form fields, scrollbars, and other elements?

The combination of Spring Boot and Angular's routeProvider is a powerful

Issue encountered: Inoperable binding when employing ko.mapping with two distinct models

Iterating over an array and displaying elements on the webpage

What is the best way to utilize a single component for validating two other components?

Using two type arguments, create a feature selector with ngrx

Can a CSS Grid layout be achieved without prior knowledge of image sizes?

The use of URL embedded parameters in @angular/http

IE encountered an invalid character

What is the process for converting an array of objects into an array of form groups?

Unleashing the Power of RXJS: Discovering the Magic of connecting Events and Tapping into Executions with retrywhen

You are able to use a null type as an index in angular.ts(2538) error message occurred