Differentiate input elements with custom styling

Question

Differentiate input elements with custom styling

I'm experiencing an issue while trying to style a specific form field in Angular 7. The style doesn't seem to be applying properly.

Below is my form structure:

<ul>
  <li>
    <mat-form-field *ngIf="number">
      <input matInput disabled [value]="number">
    </mat-form-field>
    <mat-form-field *ngIf="name">
      <input name="address" matInput disabled [value]="building.name">
    </mat-form-field>
  </li>
</ul>

The goal is to have the number field with a width of 200px and the name field occupying the remaining available space.

Here's the relevant CSS code:

.mat-form-field {
  display: inline-block;
  position: relative;
  text-align: left;
  width: 200px;
}

:host ::ng-deep input.mat-input-element[name=address] {
  width: 100%;
}

Currently, both fields are taking up 200px, causing the value in the name field to get clipped. It is not expanding to fit the size of the value as intended.

javascript html css angular

Answer 1

Answer №1

Experiment with:

:host /deep/{
  input.mat-input-element[name=username] {
   width: 100%;
  }
}

or

::ng-deep{
   input.mat-input-element[name=username] {
   width: 100%;
  }
}

Answer 2

Experiment with:

:host /deep/{
  input.mat-input-element[name=username] {
   width: 100%;
  }
}

or

::ng-deep{
   input.mat-input-element[name=username] {
   width: 100%;
  }
}

Answer 3

Answer №2

One approach would be to create your own unique class with customized CSS properties and apply it to the desired elements:

.custom-width {
  // define your CSS styles here
  width: 100%;
}

You can then use this custom class in your HTML like so:

<ul>
    <li>
        <mat-form-field class="custom-width" *ngIf="number">
            <input matInput disabled [value]=" number ">
        </mat-form-field>
        <mat-form-field  class="custom-width" *ngIf="name">
            <input name="address" matInput disabled [value]="building.name ">
        </mat-form-field>
    </li>
</ul>

Answer 4

One approach would be to create your own unique class with customized CSS properties and apply it to the desired elements:

.custom-width {
  // define your CSS styles here
  width: 100%;
}

You can then use this custom class in your HTML like so:

<ul>
    <li>
        <mat-form-field class="custom-width" *ngIf="number">
            <input matInput disabled [value]=" number ">
        </mat-form-field>
        <mat-form-field  class="custom-width" *ngIf="name">
            <input name="address" matInput disabled [value]="building.name ">
        </mat-form-field>
    </li>
</ul>

Answer 5

Answer №3

Here is the CSS you can use:

ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
/******** Do not apply the above CSS ************/

mat-form-field input {
width: 200px;
display: inline-block;
}
mat-form-field input[name=address] {
width: calc(100% - 220px);
display: inline-block;
}

<ul>
  <li>
  <mat-form-field *ngIf="number">
  <input matInput disabled [value]=" number ">
  </mat-form-field>
  <mat-form-field *ngIf="name">
  <input name="address" matInput disabled [value]="building.name ">
  </mat-form-field>
 </li>
</ul>

Answer 6

Here is the CSS you can use:

ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
/******** Do not apply the above CSS ************/

mat-form-field input {
width: 200px;
display: inline-block;
}
mat-form-field input[name=address] {
width: calc(100% - 220px);
display: inline-block;
}

<ul>
  <li>
  <mat-form-field *ngIf="number">
  <input matInput disabled [value]=" number ">
  </mat-form-field>
  <mat-form-field *ngIf="name">
  <input name="address" matInput disabled [value]="building.name ">
  </mat-form-field>
 </li>
</ul>

Differentiate input elements with custom styling

Answer №1

Answer №2

Answer №3

Similar questions

having trouble accessing a JavaScript array in AngularJS

Fetching locales asynchronously in nuxt.js using i18n and axios: A step-by-step guide

Response is sent by Sequelize Foreach loop before data is updated

Updating the CSS properties of a specific element within a dynamically generated JavaScript list

Combine an unlimited number of arrays in Node, arranging the items in the result array in an alternating pattern

"Using jQuery to trigger a click event on a specific column within

Tips for preventing the loss of ajax calls when an Oauth access-token expires

Distinguishing Between Angular and Ajax When Making Requests to a NodeJS Server

Organizing data in a database the arrangement way

When developing a node.js project using VMWare's shared folder, how can you manage the node_modules folder?

When elements are arranged side by side without using floats, the alignment at the top is not correct

Various colored backgrounds in a random arrangement on a grid post layout

Encountering a '[BABEL] Cannot find module' error message after setting up a new PC

Expanding a class in Angular 2

Convert epoch time to HHMM format using JavaScript

Post the information from a webpage onto your Instagram story

Creating a child div that is half the size of its parent

How can an Angular 2 component detect a change in the URL?

Discovering a deeply nested div or class using Beautiful Soup

What is the process for removing a record from a table using Angular's http.delete method with a PHP backend