What is preventing me from aligning a button vertically within a div using Angular?

I've dedicated an excessive amount of time to this task, exhaustively going through over 30 solutions on Stack Overflow before finally resorting to posting my own question. I am well aware that it is a highly common problem and I apologize for adding another post about it, but I simply cannot seem to make it work.

Here's the code snippet I'm struggling with:

      <div style="width: 100%">
        <div style="width: 70%; float: left;">
          <mat-form-field appearance="standard" >
            <mat-label>Filter Table Data</mat-label>
            <input matInput [(ngModel)]="filter" (keyup)="applyFilter($event)">
          </mat-form-field>
        </div>
        <div style="width: 30%; float: right;">
          <button
          stye="display: flex; flex-direction: column; align-items: center;"
          mat-raised-button (click)="clearFilter(1)" >
          Clear Filter 
          </button>
        </div>
      </div>

This is the current display on my website:

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

Any suggestions on achieving vertical alignment?

Desired outcome: I need the button ("Clear Filter") as shown in the image to be vertically aligned, instead of being displayed at the top of the div.

htmlcssangularflexbox

Answer №1

To easily align and justify children, it is recommended to use a flex container as the parent.

Avoid using the deprecated float property and instead opt for modern solutions like flexbox or grid.

  <div
    style="
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    "
  >
    <div style="width: 70%">
      <mat-form-field appearance="standard">
        <mat-label>Filter Table Data</mat-label>
        <input matInput [(ngModel)]="filter" (keyup)="applyFilter($event)">
      </mat-form-field>
    </div>
    <div style="width: 30%">
      <button mat-raised-button (click)="clearFilter(1)">Clear Filter</button>
    </div>
  </div>

An alternative solution could be utilizing Angular Flex Layout. Refer to the Angular Flex Layout documentation for more information.

For implementation, import FlexLayoutModule and make it available in your application.

import { FlexLayoutModule } from '@angular/flex-layout';

After setting up, you can utilize it in this manner to resolve the issue:

  <div style="width: 100%" fxLayoutAlign="space-between center">
    <div style="width: 70%">
      <mat-form-field appearance="standard">
        <mat-label>Filter Table Data</mat-label>
        <input matInput [(ngModel)]="filter" (keyup)="applyFilter($event)">
      </mat-form-field>
    </div>
    <div>
      <button mat-raised-button (click)="clearFilter(1)">Clear Filter</button>
    </div>
  </div>

Answer №2

<div style="width: 100%;display: flex;
    align-items: center;
    justify-content: center;">
            <div style="width: 70%; float: left;">
              <mat-form-field appearance="standard" >
                <mat-label>Filter Table Data</mat-label>
                <input matInput [(ngModel)]="filter" (keyup)="applyFilter($event)" >
              </mat-form-field>
            </div>
            <div style="width: 30%;float: right;display: flex;
    align-items: center;
    justify-content: center;">
              <button
              mat-raised-button (click)="clearFilter(1)" >
              Clear Filter 
              </button>
            </div>
          </div>

perhaps this solution could be beneficial for you.

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

Refreshing component display upon service value modifications

In my toolbar, there is a _toolbarTitle that I need to update whenever the title in my toolbar title service changes. This change occurs when navigating to a different page and using the method setToolbarTitle(). Although I attempted to use observables for ...

angularangular-services

Video solution that works seamlessly across different web browsers

Our organization is in the process of introducing a significant amount of online tutorial and training videos that will be embedded directly on our website. We are looking for a straightforward solution that is compatible across different browsers to ensur ...

htmlvideocross-browser

Alter the hue of a component upon being clicked

Seeking help to modify the color of my menu elements upon clicking on the "center" or "right" containers (reverting back when clicked again). Currently, the three lines in my menu are white, but I desire them to turn red when either of these containers is ...

javascriptjqueryhtmlcss

How do I trigger a click on a menu item that is lazy loaded when testing Angular with Cypress?

I attempted to execute a small cypress test by trying to navigate to a lazy loaded page, but unfortunately it did not work as expected. The URL path I aimed for was: 'angular-page/angular-page-content1' My approach: describe('1st. test&apos ...

angularnavigationcypress

What is the best way to modify the color of the btn-primary (label) for an unchecked radio button

Objective: I am aiming to change the background color to #FFFFFF when the radio button is not checked and to #9381FF when it is checked. Current Result: Currently, both buttons display a background color of #9381FF. I am aware that using !important is no ...

javascripthtmlcssbootstrap-5

Tips on managing the issue of "Preflight request response does not meet access control requirements: 'Access-Control-Allow-Credentials' value"

I am attempting to send an HTTP POST request to a web-api2 server running on my localhost. My client is operating on http://localhost:4200, and my server is running on http://localhost/MemoryGameServer/api/Test (Different Origin). Below is my Angular 7 cl ...

c#angularhttpasp.net-web-api2

How can you manage both HTML5 mode routes and hash routes in Angular?

After utilizing the "standard" routes in Angular 1 with the # sign (e.g. /app#/home), I have decided to make the switch to HTML5 mode for cleaner URLs (e.g.: /app/home). I successfully activated HTML5 mode using $locationProvider.html5Mode(true), and ever ...

javascriptangularjshtml

Are buttons continuously added on top of each other?

It seems that the root of my problem lies in my use of ng-repeat, so I won't go into too much detail on the rest but feel free to ask for more information. Indeed, I am employing ng-repeat to iterate over a certain number of div elements stored in an ...

javascripthtmlcssangularjs

Encountering a TypeError while attempting to construct and launch an IOS simulator through Cordova

Currently, I am in the process of developing an Ionic app that is designed for cross-platform functionality. Encountering an Error when attempting to build and run an IOS simulator using Cordova TypeError [ERR_INVALID_ARG_TYPE]: The "code" argum ...

javascriptiosangularcordovaionic-framework

Trouble with the Width of Selection Box Options

Encountering a peculiar issue with multiple select boxes in my project. Some of the options within the select box are exceeding the width of the box. Proper Dropdown View: https://i.sstatic.net/xDy6I.jpg Incorrect Dropdown Display: https://i.sstatic.ne ...

htmlcssangular-clibootstrap-4

Sending an ID from an array within a *ngFor loop to a different component in Angular: a step-by-step guide

I have a collection of items that I loop through using ngFor. My goal is to pass all its attributes to another component. I attempted to accomplish this with the following code: *ngFor='let item of postList [routerLink]="['/detailed-post&ap ...

htmlangulartypescript

Troubleshooting Layout Problems in HTML and CSS

My goal is to build a straightforward webpage template with 3 distinct sections: a header with two columns, a main body, and a footer. Here's the layout I've been working on: <div id="wrapper"> <div id="header"> <heade ...

csshtmlfooter

Tips for adjusting font size automatically to fit within its parent container every time

On my blog, the post titles are displayed in a div with a video playing in the background. The length of the title varies, ranging from 2 words to over 20 words. When the title is too long, it may overflow from its parent container where the video is playi ...

javascriptjqueryhtmlcsstwitter-bootstrap

Creating keyboard navigation for an HTML ul list: A step-by-step guide

What is the best way to enable list navigation using keyboard arrows for an HTML ul list? ...

javascriptjqueryhtmlhtml-lists

Unable to organize birth dates by using the datetime feature with the moment plugin in Angular 2 ventures

A table is in place showcasing id, name, and date of birth: <table id="example" class="display nowrap" style="width:100%"> <tr> <td>id</td> <td>name</td> <td>date of birth</td> </tr> ...

angulardatatablesmomentjs

Error handling in PHP functions

Within the following code snippet, the variable "$mname1" is currently limited to only three values: APRIL, MAY, JUNE. if ( $profile_stats['month'] < $old_month && $profile_stats['year'] == $old_year || $ ...

phphtmlmysql

Unexpectedly large icon height in font icon

I have encountered a issue with the icon font that I am using in my project, which was generated by fontastic.me. It seems that all icons are positioned slightly higher than expected. See the code snippet below: .icon-camera { font-size: 40px; ...

fontscssglyph

Working with Angular: Accessing SCSS variables from style.scss using JavaScript inside a component

I am working on an Angular 9 application that utilizes Angular Material and has two themes, namely dark and light. These themes are defined in the style.scss file as follows: $rasd-dark-text-color: mat-palette($mat-grey, 300); $rasd-light-text-color: mat-p ...

javascriptangularsassangular-material

Generating markdown files for website content: What causes the conversion of <br/> to in HTML?

When converting old HTML files to Markdown using pandoc, I then utilize them in a Maven site where they are compiled back into HTML. In the process, the <br/> tags from the original HTML get converted to backslashes in markdown, which ultimately end ...

htmlmavenmarkdownpandocmaven-site-plugin

Styling with CSS: Utilizing the Float Left Property to Anchor Elements

Currently, I have implemented an anchor element that utilizes a CSS class to replace the text with an image. Despite its unusual nature, the end result is mostly satisfactory. .toolLink a { overflow:hidden; } .toolEdit { float:left; ba ...

css