Displaying two cards side by side in Angular

I have a website built with Angular 5 that utilizes routing.

Within my code branch, there is a folder containing sections with various data.

My goal is to display the required sections on a main page. I have achieved this, but encountered an issue where the info section displays on individual lines because two component.html files are nested within one another.

I have attempted:

  • Wrapping them in a DIV on the main page
  • Using Float: left/right on the components and mat-card
  • Setting widths

Personal details component html

  
    <mat-card>
      <mat-card-title class="firstCard">Personal details</mat-card-title>
      <mat-card-content>
          <mat-form-field>
            <input matInput id="invName" placeholder="Full name" #name value="Mr Test Test" readonly>
          </mat-form-field>
          <mat-form-field>
            <input matInput id="invRef" placeholder="Investor reference" #ref value="A11111" readonly>
          </mat-form-field>
           <!-- More input fields -->
        </mat-card-content>
      </mat-card>

Contact details component html

  
    <mat-card>
    <mat-card-title class="secondCard">Contact details</mat-card-title>
    <mat-card-content>
        <mat-form-field>
          <input matInput id="invAddress" placeholder="Address" #address value="'this is a description of the some text' + \n + 'and further description'" readonly>
        </mat-form-field>
         <!-- More input fields -->
      </mat-card-content>
    </mat-card>

** Main page component html **

<div>
   <app-personaldetails></app-personaldetails>
   <app-contactdetails></app-contactdetails>
</div>
htmlcssangularangular-forms

Answer №1

To optimize your layout, consider implementing a flex layout approach. Specifically, if you are working with Angular, explore the benefits of incorporating Angular Flex Layout.

By utilizing this technique, your code could resemble the following example: 

<div fxLayout="row" fxLayoutAlign="start center">
   <app-personaldetails fxFlex="50%"></app-personaldetails>
   <app-contactdetails fxFlex="50%"></app-contactdetails>
</div>

Answer №2

If you want to create a responsive grid layout, consider using mat-grid or flex layout along with observableMedia for responsiveness.
Here is an example using mat-grid:

<mat-grid-list cols="2">
  <mat-grid-tile>
    <app-personaldetails></app-personaldetails>
  </mat-grid-tile>
  <mat-grid-tile>
    <app-contactdetails></app-contactdetails>
  </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

Expanding a JSON data structure into a list of items

In my Angular service script, I am fetching customer data from a MongoDB database using Django: getConsumersMongodb(): Observable<any> { return this.httpClient.get(`${this.baseMongodbApiUrl}`); } The returned dictionary looks like this: { &q ...

javascriptjsondjangoangulartypescript

Having trouble finding errors in Python using Selenium?

I encountered an error while using selenium in conjunction with python: selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"xpath","selector":"/html/body/main/article/section/form/div[1]/div[2]/ ...

pythonhtmlseleniumselenium-webdriver

What is the best way to create a hover effect for Material Icons?

Having issues with Material Icon not displaying the specified changes when using CSS modules in my project import SettingsIcon from "@mui/icons-material/Settings"; import css from "./LandingPage.module.css"; <SettingsIcon className= ...

htmlcssreactjsmaterial-uimaterial-icons

Trouble arises when adding a .js script to the webpage

I'm feeling quite puzzled by this small piece of code, as it appears to be the simplest thing you'll come across today. Despite that, I can't help but seek guidance because I've been staring at it for what feels like an eternity and can ...

javascripthtml

How come I can't see this on my display?

I'm facing an issue with this particular HTML snippet not displaying when I view the file in Chrome or any other browser. Below is the code: <!DOCTYPE html> <html> <head> <title> # <title& ...

htmlcsshtml-tablemenubar

What is the process for programmatically aligning two cards side by side using Material UI in React after retrieving data from an API?

I am currently working with data from an API that I need to display in the format of cards, arranged side by side. To achieve this, I have been using an array and passing the data to components programmatically. You can see the output image and my code bel ...

javascriptcssreactjsmaterial-ui

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 ...

javascriptjqueryhtmlcss

Ways to get rid of the white horizontal line generated by bootstrap framework?

I'm currently working on a responsive navbar design and I want it to appear transparent over a background image. However, my front-end knowledge is limited as I've only been learning for a week. Can anyone advise me on how to remove the white bar ...

htmlcsstwitter-bootstrapbootstrap-5

Why isn't my Bootstrap-styled radio button triggering auto post back?

I am facing an issue with the interaction between bootstrap and asp.net radio buttons. Specifically, the 'AutoPostBack' command is not functioning as expected. Here is the code snippet: Linked Bootsrap & JS Files: <link href="css/mycss.css" ...

javascriptjquerycssasp.nettwitter-bootstrap

Incorporating Redux into Angular 2 with SystemJS loading technique

I have been delving into learning Angular 2 and I am keen on integrating Redux into my project. Currently, I have set up my project using angular-cli on rc2 release. This is my systemjs configuration: /************************************************** ...

javascriptangular

Jquery plugin experiencing a malfunction

I am encountering an issue with my custom plugin as I am relatively new to this. My goal is to modify the properties of div elements on a webpage. Here is the JavaScript code I am using: (function($) { $.fn.changeDiv = function( options ) { var sett ...

javascriptjqueryhtmlcss

Header and footer remain unaligned

Bookstore.html <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> ul { list-style-type: none; padding: 20px; overflow: hidden; background-color: black; width:1230px; p ...

htmlcssjsp

Why is Django saving Model B and C data in Model A incorrectly?

I'm encountering an issue with the Django models CustomerDetail, CarrierForm, and InfluencerModel. Whenever I attempt to save data in the CarrierForm or InfluencerModel through different forms on various pages, the data is getting saved in the Custome ...

pythonhtmldjangodjango-modelsdjango-forms

Ensure that the bar width in react-chart-js-2 remains consistent regardless of the number of bars displayed

Currently, I am developing a React Chart JS component that displays a set of horizontal bars. My objective is to maintain the width of the bars at a consistent size regardless of the number of bars present (e.g., all bars at 30px). However, when additiona ...

htmlcssreactjstypescriptchart.js

Guide to aligning a component in the middle of the screen - Angular

As I delve into my project using Angular, I find myself unsure about the best approach to rendering a component within the main component. Check out the repository: https://github.com/jrsbaum/crud-angular See the demo here: Login credentials: Email: [e ...

javascriptangulartypescriptng-templateangular2-ngcontent

Conceal or reveal radio buttons according to information in a table

How can I dynamically add and remove values from a table based on radio button selections? My goal is to add the selected value to the table and hide it from the radio button list, and if the value is deleted from the table, I want to show it back in the r ...

javascriptjquerycssasp.netasp.net-mvc

Is it possible to create a pure CSS responsive square that is positioned to the top right of a div element of any size?

My current goal is to achieve the following task... I aim to position a square perfectly in one or both corners of the top right section of a div, ensuring it never exceeds the boundaries regardless of the div's size or dimensions that necessitate th ...

htmlcssgradient

Turn off the scroll function while loading a webpage

Here is the script for my preloader: $(window).load(function() { $("#loading").fadeOut(1000); I want to prevent scrolling while the "loading" is still visible, and then enable it again after the fade out completes. ...

javascriptjqueryhtmlscrollpreloader

Unlocking the power of Angular with the added security of Spring Boot: Int

After implementing a refresh token feature to enhance Jwt authentication on my website, I noticed an issue where the jwt token was getting refreshed multiple times upon expiration until the user logged out. To address this, I decided to implement an expiry ...

angularspringjwtrefresh-token

Transferring observable data between components using a shared service

Although there are similar questions and answers, none of them seem to address my specific issue. I have a mat-table where selecting an option from a dropdown within a mat-cell triggers a change in each row, allowing me to log the data of that particular r ...

angularservicecomponentsobservable