How can Angular Material help with CSS positioning? Are you looking to align content to the left (start), center, or right

I have experience with Bootstrap and AngularJS Material, but I am currently learning Angular Material. However, I am struggling to find options for CSS positioning like left (start), center, or right (end) for creating column layouts. One specific challenge is placing "Instructions" on the left and a "close" icon on the right within a single line.

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

In AngularJS Material, I typically use layout-align:

<div layout="row">
      <span layout-align="start">
        <p class="md-title">Instructions</p>
      </span>
      <span flex></span>
      <span layout-align="end">
        <md-button class="md-icon-button" ng-click="toggleInstructions()">
          <md-icon md-svg-src="media/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
        </md-button>
      </span>
    </div>

However, when trying to achieve the same layout using Angular Material, I couldn't find any specific features for CSS positioning. Using plain CSS resulted in the elements being displayed on two separate lines:

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

Here's the Angular HTML code with plain CSS:

<mat-card class="instructions" *ngIf="showInstructions">
    <mat-card-title>
       <span style="display: flex; justify-content: flex-start;">Instructions</span>
       <i class="material-icons" style="display: flex; justify-content: flex-end;">close</i>
    </mat-card-title>
</mat-card>

I couldn't find any information in the Angular Material guide regarding CSS positioning. Does Angular Material not offer support for CSS positioning anymore?

htmlcssangularangular-material

Answer №1

Encountering similar issues or scenarios is not uncommon for me. While the Grid list offers some layout capabilities, I find it to be quite broad in its application. My go-to choice most of the time is utilizing CSS flexbox for layouts. It can be a bit challenging at times, but it generally gets the job done for me.

In your specific situation, consider applying "display: flex" to the "mat-card-title" element and using "flex-direction: row". You may also need to adjust the flex attributes of your "span" and "i" elements to achieve the desired ratio...

If you're looking for a solid flex tutorial, check out this resource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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

When a jquery confirm dialog is displayed, the scroll bar mysteriously fades away

Whenever a jQuery confirm dialog is displayed, the scroll bar on the page disappears, causing the page to suddenly shift to the right. Here is the JavaScript code for the dialogue: <script src="vendor/jquery-confirm.min.js"></script> <link ...

jqueryhtmlcss

Tips for vertically aligning values in a Bootstrap table

Currently, I am working on generating reports for an NGO that conducts surveys in schools. Once the reports are created, they need to be sent out in a specific format. While a simple table structure would suffice, I have decided to use Bootstrap classes to ...

htmlcsstwitter-bootstraphtml-table

Tips for utilizing RouterLink within an HTML template

Angular 2.3.0 I created a module in Angular 2 as shown below: import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { RouterModule, Routes } from '@angular/router'; impo ...

angulartypescriptangular2-routing

`Planning the layout of an Angular application with distinct sections`

I've been working on breaking down my Angular app into separate sections and I have a few queries about how to proceed: auth login (only public page in the entire system, after login users are directed to either the admin or user portal based on ...

angulartypescript

Get a new perspective from a different page's refresh

I have a unique situation where I am working on a project that involves two separate pages, each displayed on different computers. What I hope to achieve is that when I click a button on the first page, it triggers a refresh of the second page. Is there a ...

javascriptphpjqueryhtmlajax

How can you determine the total number of elements with a specific class assigned to them?

I am currently using jQuery to identify which IDs have a specific class name. This information is crucial as I am employing toggleClass() from jQuery to display and hide certain divs. When a button is selected, I want a viewport to either appear or disappe ...

javascriptjqueryhtmlcssfilter

The filter search feature fails to return any results when data is inputted into the tables

I have implemented a filter search feature within two tables on my website. My goal is to retrieve the search results for a specific drink while keeping the table headings fixed in their positions. For instance, if I type "Corona" into the search box, I ...

htmlcss

How to align text to the right in a Bootstrap 5 card header

I'm facing an issue with a Bootstrap 5 card where I want to align certain content in the header to the right and some to the left. Despite my efforts, everything remains left-aligned. Here's a snippet of my code: <div class="card"& ...

csstwitter-bootstrapbootstrap-5

Tips for creating a full-screen asp website

I'm looking to develop a fresh website that showcases all pages in full screen mode, with the ability for users to access the desktop view only by entering a specific password. My initial thought is to design it as a single page, but I'm open to ...

c#jqueryhtmlasp.netfullscreen

Implementing the linking of a URL to an HTML hidden button that is dynamically displayed through a Javascript program

I'm currently developing a basic webpage that has a feature allowing users to download the final result as an image file in the last step. To achieve this, I've added a hidden HTML button for downloading the result image and used CSS to set its ...

javascripthtmlbutton

Issues with jQuery scroll effect not functioning properly in Firefox due to transformation errors

I've encountered an issue with implementing a scroll effect in Firefox. The code works perfectly fine in Chrome, Safari, and Opera, but for some reason, it's not functioning properly in Firefox. I have carefully reviewed the '-moz-transform& ...

javascriptjquerycssfirefoxscroll

Stop iframe zooming on Android devices

I am facing an issue with an iframe that contains form elements. I have attempted to include a meta tag within the iframe page: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> Also, I tried se ...

androidhtmlmobile

Effortless 'rotational' script

I am currently developing a HTML5 Canvas game with the help of JavaScript. My aim is to create an object that smoothly transitions to a specific direction. The direction is being stored as a variable and calculated in radians. Here's how the code op ...

javascripthtmlcanvasradians

Guide on converting HTML datetime picker datetime-local to moment format

I am looking to convert an input type : <input type="datetime-local" name="sdTime" id="stTimeID" onChange={this.stDateTime} /> into a specific date format: const dateFormat = 'MM/DD/YYYY hh:mm:ss a'; To achieve this, I need to transfer ...

javascripthtmlreactjsdatetimedatetimepicker

Hiding HTML elements with display=none isn't functioning

Here is my code snippet: <?php if($counter==0) { echo "value of counter = $counter" ?> <script type='text/javascript'> document.getElementById("tt").style.display = "none"; </script> <?php } ?> <htm ...

javascriptphphtml

Utilize Cordova's social share plugin to send a text message containing a variable

I have implemented the social share plugin from Cordova in order to share SMS messages with a specific phone number. <a class = "lft" onclick="window.plugins.socialsharing.shareViaSMS('My cool message', 7767051447, function(msg) {cons ...

javascriptandroidhtmlcordova

Having issues adding properties to a particular object within an array in JavaScript

In my JavaScript code, I am working with an object that represents a product. The object looks like this: { product_id: "2", product_name: "Drinks" } This object is named 'product'. There is an array that contains entries of the 'product& ...

javascriptarraysangularjavascript-objects

"Exploring the relationship between UIWebView and CSS's fixed positioning

My UIWebView is set up with a fixed position header. Everything works seamlessly when the initial view of the ViewController containing the UIWebView is displayed. However, if I present that same ViewController using a Modal segue, an issue arises. When ...

iphoneioscssxcodeuiwebview

The form yields no response and fails to send any data

Ensuring that the form on this site successfully sends the name and phone number is crucial. However, upon clicking the send button, I encounter an empty modal window instead of a response indicating whether the data was sent or not. The contents of the fi ...

javascriptphpjqueryhtmlcss

The placeholder value remains unchanged despite using mat-select

I'm having an issue with a mat-select element. I want the placeholder to change based on whether the user selects one of the radio button options. <mat-select *ngIf="!data.loading" [placeholder]="form.get('dataType')?.v ...

angularangular-material