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

Just a snippet of a webpage shown

Refresh the page only when on the initial page of the pagination

One Page HTML5 with a Bootstrap fixed top menu, revealing content on menu item click

Troubleshooting: JavaScript code not functioning properly with variable input instead of fixed value

Send an identifier to the following page upon selecting a hyperlink in AngularJS

Updating the row by substituting the content of two columns with the data retrieved from the action class

Why won't my code work with a jQuery selector?

Is it possible to utilize href alongside the urlRouterProvider?

Module lazily loaded fails to load in Internet Explorer 11

Using PHP's include/require method with a dynamic path

After switching from jQuery to pure JavaScript, the code is now up and

Setting the CSS property `position: absolute; bottom: 0`, will move the div to the bottom of the screen rather than the bottom of

Production build encountering unhandled TypeError in proxy

Is there a way to automatically execute this function when the React component is loaded, without the need for a button click?

Different kinds of garbage collection operations in NodeJS

Obtaining the text from an element in Selenium using JavaScript

Creating a Blob or ArrayBuffer in Ionic 2 and Cordova: Step-by-Step Guide

Issues with jQuery requests not working properly on the mobile application

Surprising pause in the menu transition animation

What is the best way to access the wrapped input data from an ion-input component in Ionic2?