Angular Outline Box alignment issue

I added the above pagination using the following code

<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" showFirstLastButtons></mat-paginator>


You can see that the alignment of the outline box is not right and there's no any css styles.

Furthur i created a dialogbox , its also the same. Can someone guide me how to fix this ?



here is the html

<div class="role-dialog-container">
<h2 mat-dialog-title class="dialog-title">
<mat-icon class="title-icon">person_add</mat-icon>
Add New Role
</h2>

<form [formGroup]="form" class="role-form">

<!-- Name Field -->
<div class="form-section">
<mat-form-field appearance="outline" class="full-width">
<mat-label>Role Name</mat-label>
<input matInput formControlName="name" placeholder="Enter role name" />
<mat-icon matPrefix class="field-icon">badge</mat-icon>
<mat-error *ngIf="form.controls['name'].touched && form.controls['name'].invalid">
<mat-icon class="error-icon">error</mat-icon>
Role name is required
</mat-error>
</mat-form-field>
</div>

<!-- Description Field -->
<div class="form-section">
<mat-form-field appearance="outline" class="full-width">
<mat-label>Description</mat-label>
<textarea
matInput
rows="3"
formControlName="description"
placeholder="Describe the role's responsibilities and purpose">
</textarea>
<mat-icon matPrefix class="field-icon">description</mat-icon>
<mat-error *ngIf="form.controls['description'].touched && form.controls['description'].invalid">
<mat-icon class="error-icon">error</mat-icon>
Description is required
</mat-error>
</mat-form-field>
</div>

<!-- Status Dropdown (replacing checkbox) -->
<div class="form-section">
<mat-form-field appearance="outline" class="full-width">
<mat-label>Status</mat-label>
<mat-select formControlName="isActive">
<mat-option [value]="true">
<div class="status-option active-status">
<mat-icon class="status-icon">check_circle</mat-icon>
<span>Active</span>
</div>
</mat-option>
<mat-option [value]="false">
<div class="status-option inactive-status">
<mat-icon class="status-icon">cancel</mat-icon>
<span>Inactive</span>
</div>
</mat-option>
</mat-select>
<mat-icon matPrefix class="field-icon">toggle_on</mat-icon>
<mat-hint>Choose whether this role is currently active</mat-hint>
</mat-form-field>
</div>

<!-- Parent Role Field -->
<div class="form-section">
<mat-form-field appearance="outline" class="full-width">
<mat-label>Parent Roles</mat-label>
<mat-select formControlName="parentRole" multiple>
<mat-option *ngFor="let role of allRoles$ | async" [value]="role.id">
<div class="parent-role-option">
<mat-icon class="role-icon">account_tree</mat-icon>
<span>{{ role.name }}</span>
</div>
</mat-option>
</mat-select>
<mat-icon matPrefix class="field-icon">family_restroom</mat-icon>
<mat-hint>Select parent roles (optional)</mat-hint>
</mat-form-field>
</div>

</form>

<!-- Action Buttons -->
<div mat-dialog-actions class="dialog-actions">
<button
mat-stroked-button
class="cancel-btn"
(click)="close()">
<mat-icon>close</mat-icon>
Cancel
</button>
<button
mat-flat-button
color="primary"
class="save-btn"
(click)="submit()">
<mat-icon>save</mat-icon>
Save Role
</button>
</div>
</div>


SCSS

// Role Dialog Styles
.role-dialog-container {
min-width: 450px;
max-width: 600px;

.dialog-title {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
margin: -24px -24px 24px -24px;
padding: 20px 24px;
display: flex;
align-items: center;
font-weight: 500;
border-radius: 4px 4px 0 0;

.title-icon {
margin-right: 12px;
font-size: 24px;
width: 24px;
height: 24px;
}
}
}

.role-form {
padding: 0 8px;

.form-section {
margin-bottom: 20px;

.full-width {
width: 100%;
}

.field-icon {
color: #666;
margin-right: 8px;
font-size: 20px;
width: 20px;
height: 20px;
}

.error-icon {
font-size: 16px;
width: 16px;
height: 16px;
margin-right: 4px;
}
}
}

// Status Option Styles
.status-option {
display: flex;
align-items: center;
padding: 4px 0;

.status-icon {
margin-right: 8px;
font-size: 18px;
width: 18px;
height: 18px;
}

&.active-status {
.status-icon {
color: #4caf50;
}
}

&.inactive-status {
.status-icon {
color: #f44336;
}
}
}

// Parent Role Option Styles
.parent-role-option {
display: flex;
align-items: center;
padding: 4px 0;

.role-icon {
margin-right: 8px;
font-size: 18px;
width: 18px;
height: 18px;
color: #2196f3;
}
}

// Dialog Actions
.dialog-actions {
background-color: #f8f9fa;
margin: 24px -24px -24px -24px;
padding: 16px 24px;
border-radius: 0 0 4px 4px;
justify-content: flex-end;
gap: 12px;

.cancel-btn {
border-color: #dc3545;
color: #dc3545;

&:hover {
background-color: rgba(220, 53, 69, 0.1);
}

mat-icon {
margin-right: 4px;
font-size: 18px;
width: 18px;
height: 18px;
}
}

.save-btn {
background: linear-gradient(45deg, #28a745, #20c997);
box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);

&:hover {
background: linear-gradient(45deg, #218838, #1e7e34);
transform: translateY(-1px);
box-shadow: 0 5px 11px -1px rgba(0,0,0,.2), 0 8px 14px 0 rgba(0,0,0,.14), 0 3px 20px 0 rgba(0,0,0,.12);
}

mat-icon {
margin-right: 4px;
font-size: 18px;
width: 18px;
height: 18px;
}
}
}

// Form Field Customizations
::ng-deep {
.role-dialog-container {
.mat-mdc-form-field {
.mat-mdc-text-field-wrapper {
background-color: #fafafa;
border-radius: 8px;

&:hover {
background-color: #f0f0f0;
}

&.mdc-text-field--focused {
background-color: #fff;
}
}

.mat-mdc-form-field-hint {
color: #666;
font-size: 12px;
}
}

// Customize select panel
.mat-mdc-select-panel {
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

// Customize selected chips for multi-select
.mat-mdc-chip {
background: linear-gradient(45deg, #e3f2fd, #bbdefb);
color: #1976d2;
border-radius: 16px;
}
}
}

// Responsive adjustments
@media (max-width: 600px) {
.role-dialog-container {
min-width: 300px;
max-width: 95vw;
}
}


I tried different formats and css styles , but still the same .

Continue reading...