Creating a responsive button inside a table can be achieved effortlessly with Angular Material table components

Help needed to ensure button responsiveness within a table. Here's how it appears on desktop and mobile screens:

Desktop View

https://i.sstatic.net/GxHUe.png

Mobile View

https://i.sstatic.net/oOAgk.png

The delete button is somewhat obscured in the mobile view.

This is the corresponding HTML code:

    <div class="col-md-8">
        <div class="col-md-12">
            <div class="design-header">
            <mat-form-field>
                <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
            </mat-form-field>
            </div>
            <div class="design-container mat-elevation-z8" *ngIf="billTypeList">

            <mat-table [dataSource]="dataSource" matSort style="width: 100%">
                <ng-container matColumnDef="BillName">
                    <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
                    <mat-cell *matCellDef="let row"> {{row.BillName}} </mat-cell>
                    </ng-container>

                    <ng-container matColumnDef="ConsumptionAbbr">
                    <mat-header-cell *matHeaderCellDef mat-sort-header> Abbreviation </mat-header-cell>
                    <mat-cell *matCellDef="let row"> {{row.ConsumptionAbbr}} </mat-cell>
                    </ng-container>

                    <ng-container matColumnDef="DateAdded">
                    <mat-header-cell *matHeaderCellDef mat-sort-header> Date Added </mat-header-cell>
                    <mat-cell *matCellDef="let row"> {{row.PostingDateTime | date}} </mat-cell>
                    </ng-container>

                    <ng-container matColumnDef="Action">
                    <mat-header-cell *matHeaderCellDef mat-sort-header> Delete </mat-header-cell>
                    <mat-cell *matCellDef="let row" [style.color]="row.color">
                        <button mat-raised-button class="btn btn-danger" (click)="deleteBillType(row.BillTypeID)">Delete</button>
                    </mat-cell>
                    </ng-container>

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

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

Seeking guidance for the correct way to address this. 

**UPDATE**
The solution provided earlier did not yield the desired outcome.
<div class="table-reponsive">
    <mat-table [dataSource]="dataSource" matSort>

    <ng-container matColumnDef="MonthNo">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Month </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.MonthNo}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="RatePerSqm">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Rate Per Sq. M. </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.RatePerSqm}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="FixedAmount">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Fixed Amount </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.FixedAmount | currency: 'PHP '}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="EffectiveDate">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Effective Date </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.EffectiveDateTime | date}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="Action">
        <mat-header-cell *matHeaderCellDef> Action </mat-header-cell>
        <mat-cell *matCellDef="let row" [style.color]="row.color">
        <button class="btn btn-primary" (click)="deleteRealPropertyTaxRate(row.RealPropertyTaxRateID)">Delete Record</button>
        <button  class="btn btn-primary" (click)="onEdit(row)">Edit Record</button>
        </mat-cell>
    </ng-container>

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

Using the "table-responsive" class proved ineffective as well.

Answer №1

To recreate your situation, I have created a table with the use of the "table-responsive" class from Bootstrap.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<table class="table table-condensed table-responsive">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Date</th>
      <th> Actions </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>November 14, 2012</td>
      <td> <button type="button" class="btn btn-danger">Danger</button> </td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>November 14, 2012</td>
      <td> <button type="button" class="btn btn-danger">Danger</button> </td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>November 14, 2012</td>
      <td> <button type="button" class="btn btn-danger">Danger</button> </td>
    </tr>
  </tbody>
</table>

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

Decrease the height of a div element from the top with the use of jQuery

My goal is to manipulate the height of the div #target when a specific event is triggered, either by reducing/increasing its height from the top or by hiding/showing its content. However, I'm struggling to find a solution to achieve this. The current ...

Is there a way to modify a button's aspect ratio when it is clicked?

Currently, I am utilizing the MUI v5 AppBar to craft a navigation bar with Tabs. My aim is to have the background of the Tab blend seamlessly with the main page background upon being clicked, as illustrated here: However, an issue arises where the Tabs ar ...

What causes hyperlinks to fail in certain emails when opened in new tabs on Outlook Webmail?

After opening an email in a new tab on Chrome from Outlook 365 web app, I noticed that some hyperlinks stop working. Strangely, for certain emails I received, the hyperlinks work fine. I create these emails using Power Automate and the HTML code I use is: ...

Eliminating the gray background using CSS

How can I remove the gray background that automatically appears in my CSS header? .header { padding: 60px; margin: 20px auto auto auto; width: 1400px; border-radius: 10px; text-align: center; background: # ...

Styling text of various sizes to appear together in a div container

I'm having trouble getting my text to align in a single line. I've tried using vertical-align: middle and vertical-align: bottom... Can someone please assist me? http://jsfiddle.net/2wDEw/ Here is a simple example of what I have: ...

Adjusting the opacity of a div while scrolling

I've searched multiple pages, but haven't found a solution that works for me. I'm trying to make the text in my div gradually become more transparent as I scroll. Can anyone help with this? Here's my code: <script src = "/js/titleSc ...

Unable to extend the data-toggle dropdown to the entire width of the screen

Is there a way to make my navbar dropdown menu expand to the full width of the screen without leaving white space on the left side? I am using Bootstrap and have included a media query in my CSS as shown below. https://i.sstatic.net/US3ce.png <nav clas ...

Tips for displaying data by using the append() function when the page is scrolled to the bottom

How can I use the append() function to display data when scrolling to the bottom of the page? Initially, when you load the page index.php, it will display 88888 and more br tags When you scroll to the bottom of the page, I want to show 88888 and more br ...

Accessing the current window dimensions using CSS

I'm experimenting with a way to set the background of the entire body element. <html> <head><head/> <body> <div class="wrapper"></div> </body> </html> How can I determine the height and width of the cu ...

Using Node.js and Express, the CSS does not load due to route parameters

I'm currently working on a basic website project using Node.js, Express, and the EJS template engine. I've run into an issue where my external CSS files are not loading properly on routes that contain route parameters. Here's a snippet of my ...

How can I modify the color of JavaFX text using CSS?

Looking to jazz up my JavaFX application with some custom CSS styling. Managed to link a stylesheet to my app using the following code: //Java code FXMLLoader loader = new FXMLLoader(MainApp.class.getResource("/path/to/fxml")); Scene sce ...

Interactive tables created using Google Visualization

I have a Google visualization data table that works well, but I am facing an issue with the width of the table. When I click as shown in the image, I call the function drawTable(); and then I encounter this: As you can see, the table does not have a width ...

The appearance of CSS output is noticeably distinct between iPhones and personal computers

My issue is with the development of my website. When I access it on my PC, everything looks fine. However, when I try to visit the site on my iPhone, there is a noticeable difference in the output. The space above the navigation bar appears differently whe ...

Auto-scroll feature malfunctioning

My auto scroll function using jQuery isn't working, here is my CSS: #convo_mes{ text-align:left; width:98%; height:80%; background:#fff; border:1px solid #000; overflow-x:auto; } And in my JavaScript: $(".mes").click(functio ...

Creating a unique Bootstrap background design

I have recently started using bootstrap and I am facing an issue. I want to change the background of a container when hovering over it, but I am having trouble getting it right. HTML <div class="container bg-black h-25 w-25 box"></div&g ...

Centralizing the Accordion header and expansion icon in React with Material-UI

I'm currently incorporating the Accordion feature from Material-UI library into my React project: My goal is to ensure that the accordion summary (header with "Accordion 1", "Accordion 2") is centered, and the expand icon (arrow) is also centered rig ...

Clicking outside the div will cause the div to be hidden

Looking for some help with a jQuery issue. I have a pop-up that opens when a div is clicked, but I want it to close when clicking outside of the div instead of just on the close button. <a class="close-up" href="#" onclick="popup('popUpDiv')" ...

PHP distributing empty sheets (possibly for website configuration)

Hey everyone! I've been struggling to set up a profile page on my website for the past week. Whenever I try to include PHP code or echoes in the content pages, I either get blank pages or encounter a 500 server error. My website is structured with a ...

Tips for creating two columns within a Bootstrap row, one with a form and the other with an image, that are both the same height and responsive

I am facing an issue with my bootstrap columns. One column has a form, while the other contains an image. The image section is set to 100% width, making it responsive when the screen size changes. However, the form remains at a fixed height regardless of t ...

Looking to enhance the size of pagination icons for previous and next pages on a Material-UI React table?

I am looking to adjust the size of the previous page and next page icons in a material table implemented in React. Below is the code snippet: localization = { { body : {} , toolbar: { searchTooltip: 'Search'} , pagination: ...