Issue: Keeping the mat-form-field element in a single line

I am facing an issue with incorporating multiple filters for each column in an angular material table. I cannot figure out why the filter input is not moving to a new line under the header. Here is an image for reference -> Angular material table with multiple filtering

HTML:

<div class="mat-elevation-z8" style="text-align:right;" dir="rtl"> 
    <table mat-table [dataSource]="dataSource" matSort>

        <!-- Name Column -->
        <ng-container matColumnDef="nvOperatorName">
            <th class="header"  mat-header-cell *matHeaderCellDef mat-sort-header>
                 שם
               <mat-form-field class="filter" floatLabel="never">
                    <mat-label>Search</mat-label>
                    <input matInput [formControl]="nameFilter" >
                </mat-form-field>
             </th>
           
            <td mat-cell *matCellDef="let row"> {{row.nvOperatorName}} </td>
      
        </ng-container>

        
        <!-- Contact Name Column -->
        <ng-container matColumnDef="nvContactPerson">
            <th  style="width: 10%;size: 100px;" mat-header-cell *matHeaderCellDef mat-sort-header> שם איש קשר 
                <mat-form-field class="filter" floatLabel="never">
                    <mat-label>Search</mat-label>
                    <input matInput [formControl]="ContactNameFilter" >
                </mat-form-field>
            </th>
            <td mat-cell *matCellDef="let row"> {{row.nvContactPerson}} </td>
        </ng-container>

        ...

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

        <!-- Row shown when there is no matching data. -->
        <tr class="mat-row" *matNoDataRow>
            <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
        </tr>
    </table>

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

CSS:

  table {
    width: 100%;
    /* overflow-x: auto;
    overflow-y: hidden;
    min-width: 500px; */
} 
th.mat-header-cell {
    text-align: left;
    max-width: 300px;
}
 
input.matInput{
  direction: rtl;
}

p {
  font-family: Lato;
}


.header {
  padding: 5px;
}

.filter {
  display: block;
}

If you have any suggestions or solutions for implementing multiple filters on a table, please share them. Your help would be greatly appreciated.

Answer №1

Paragraph tags usually have a default display setting of table-cell, which means that the inner container is not treated as a block-level element. Another issue is that the mat-form-field typically has a default width of 180px, so it may not fully fit within the 300px width you specified for the table header. To address this, you can either set the mat-form-field's width to 100% or enclose the text content of the paragraph tag in a div to make it a block-level element.

Answer №2

It is recommended to start by creating a mat-grid-list if you are working with a form.

<mat-grid-list cols="2" rowHeight="60px" dir="rtl">
  <mat-grid-tile>111111</mat-grid-tile>
  <mat-grid-tile>22222</mat-grid-tile>
  <mat-grid-tile>333333</mat-grid-tile>
  <mat-grid-tile> 4444</mat-grid-tile>
  <mat-grid-tile>5555555</mat-grid-tile>
  <mat-grid-tile>666</mat-grid-tile>
</mat-grid-list>

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

The custom directive in Vue utilizes the refreshed DOM element (also known as $el)

I am looking to create a custom directive that will replace all occurrences of 'cx' with <strong>cx</strong> in the Dom Tree. Here is my current approach: Vue.config.productionTip = false function removeKeywords(el, keyword){ i ...

placing a dropdown menu below the search bar

Let's say I have a container with an input search field. My goal is to position a select dropdown right below the search input, ensuring that the dropdown has the same width as the search input (similar to autocomplete functionality). Here's what ...

Modifying the color of specific sections of SVG elements

Interested in utilizing the d3.js timeknots component, a svg visualization that includes line and circle elements. My goal is to implement a stopwatch animation that dynamically changes the color of the svg visualization over time. I am contemplating crea ...

Issue encountered during the construction of the Angular project in production

$ ng build --prod Date: 2018-12-06T18:43:56.689Z Hash: e36e17503416de0fc128 Time: 7480ms chunk {0} runtime.ec2944dd8b20ec099bf3.js (runtime) 1.44 kB [entry] [rendered] chunk {1} main.9868d9b237c3a48c54da.js (main) 128 bytes [initial] [rendered] chunk {2} ...

Incorporate an HTML form into the primary HTML webpage using AngularJS application technique

As a newcomer to AngularJS, I am attempting to grasp how it can be integrated with an ASP.NET-MVC5 application. For my initial test, I want to launch an AngularJS app from a basic HTML page (in this case index.html) where the app contains a form template i ...

agm-polygon fails to refresh with new points added

I've recently switched from using Google maps to AgmMaps and wanted to create a simple demo for drawing polygons on the map. Here's what I added to my project: You can find the stackblitz link with the code here <agm-polygon [strokeColor]="& ...

Guide: Writing code that caters to different types of media in React using Material-UI

After reviewing the documentation, I believed that the optimal solution in later versions of material-ui was to use useMediaQuery, but unfortunately, I am unable to implement it correctly. My objective is to hide a menu when the page is being printed, so I ...

Unable to display the content

Why isn't the text expanding when I click "see more"? Thanks XHTML: <div id="wrap"> <h1>Show/Hide Content</h1> <p> This code snippet demonstrates how to create a show/hide container with links, div eleme ...

Display an HTML icon within a label in an md-tab that uses ng-repeat when selected

I am currently using AngularJS material functionality in my code: <md-tab md-on-select="something" label="{{subsetKey}} ({{subset.data ? subset.data.length : 0;}}) <i class='example icon class'></i>" ng-repeat="(subsetKey, subset) ...

The term "primordials is not defined" is a common error

Whenever I attempt to run Gulp using the task runner, I am encountering this error message. I suspect it may be due to updating my npm project, but I'm unsure about how to resolve it. Should I try installing a different version of npm? >Failed to r ...

Iframe form submissions

I am interested in accomplishing the following task. My objective is to submit a form to my booking engine and show the results on either a new page or within a Div element. Ideally, when the user clicks the submit button, it would display an Iframe or re ...

Unpacking intricate function arguments in TypeScript

I am working with the following model classes: export class Book { public name: string; public id: string; ... } export class Author { public firstName: string; public lastName: string; ... } The my-component triggers an event t ...

Location of chat icon in Dialogflow messenger

After successfully embedding the Dialogflow messenger in my website, I noticed that in mobile view, the chat icon is blocking the bottom navigation bar. You can refer to the screenshot here. Is there a way to reposition the chat icon higher on the page? I ...

What is the best way to create an index for a user-provided value in a textbox

Looking for guidance on how to set an index to user-provided values in a textbox, append them to a table in a new row, and display that index in the first column of every row. I am unfamiliar with this type of functionality. $(document).ready(function() ...

Executing asynchronous function in Angular using Typescript

My team and I are new to Angular and we are facing a challenge with invoking methods in sequence and returning a value. The issue is that the return statement is being executed before the completion of the execution process. We have tried various approac ...

Avoiding a constantly repeating video to prevent the browser from running out of memory

Using HTML5, I created a video that loops and draws the frames to canvas. I decided to create multiple canvases and draw different parts of the video on each one. However, after some time, I encountered an issue where Google Chrome would run out of memory. ...

Guide to implementing dynamic custom validations in Angular 2 using ReactiveForms

I have a specific requirement where I need to create logic that dynamically assigns object array data to an input control. Additionally, I want to update my array based on user input and trigger validation to ensure there are no duplicate entries. I am uti ...

What is the correct way to effectively share data between components using a service?

I've been diving into learning Angular 2 and successfully implemented data sharing between sibling components using input/output functions. Check out my working example here. // Our root app component import {Component, NgModule} from '@angular ...

What is the best way to showcase a table below a form containing multiple inputs using JavaScript?

Context: The form I have contains various input fields. Upon pressing the [verify] button, only the "first name" is displayed. My goal is to display all input fields, whether empty or filled, in a table format similar to that of the form. Exploration: ...

"Exploring the screen size options in Chrome version 38 using the

After the recent update, Chrome has introduced several new features for web developers. However, I've noticed that when you drag the screen with the developer tools open, it used to display the exact screen width size in the top right corner. Now, it ...