I would like my division to split into two halves, each with a width of 50%, and be aligned next to each other using fxLayout

<div fxLayout="row" fxLayoutAlign="space-between" style="background-color: blue;">
    <div fxLayout="column" style="width: 50%;">1stOne </div>
    <div fxLayout="column" style="width: 50%;">2bdone</div>
</div>

<hr>

<div fxLayout="row" fxLayoutAlign="space-between" style="background-color: red;">
    <span fxLayout="column" >1stOne </span>
    <span fxLayout="column" >2bdone</span>
</div>

<hr>
<div fxLayout="row" fxLayoutAlign="space-between" style="background-color: red;">
    <span fxLayout="column" fxFlex>1stOne </span>
    <span fxLayout="column" fxFlex>2bdone</span>
</div>

Desired Ouput

----------------1st-------- ---------2nd -------------------

myOutput

https://i.sstatic.net/6vDSg.png

  1. why is the fxLayoutAlign property not functioning properly?

  2. I have already imported the FlexLayoutModule in my App.module.

  1. Does flexLayout work on inline items?
htmlcssangularlayoutflexbox

Answer №1

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
 
  <style>
   
.tblrow{
display: flex;
background:#ccc;
padding:10px;
}
</style>
</head>
<body>

 <div class="tblrow" >
    <div fxLayout="column" style="width: 50%;">Content One </div>
    <div fxLayout="column" style="width: 50%;">Content Two</div>
</div> 

</body>
</html>

Answer №2

<div fxLayout="row" fxLayoutAlign="space-between" style="background-color: blue; display:flex;">
<div fxLayout="column" style="width: 50%;">1stOne </div>
<div fxLayout="column" style="width: 50%;">2bdone</div>

Upon comparing it with your code, I simply added - "display:flex;" and that resolved the issue. Utilize flex on the outer div and then set the width of both inner divs to 50% each. If you encounter any further problems, along with "display:flex;", also include "flex-wrap:wrap;" and it should function as intended.

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

Is there a method to automatically refresh all active webpages as my Firebase Realtime database accumulates new data?

With the power of Firebase, I created a chatroom using HTML that saves all its data, including usernames and messages, in a real-time Firebase database. The chatroom currently displays sent messages upon manual page reloads or when a new message is sent, ...

htmlfirebasefirebase-realtime-databasechatroom

Switching between Angular components with a button press

I'm looking to switch from one Angular component to another when a button is clicked. Specifically, I have two components: app and login. Upon clicking a button in `app.component.html`, I want to navigate to `login.component.html`. Here's what I& ...

htmlangularbootstrap-4

Ways to eliminate the yellow highlighting on a row

In my current application, I am incorporating jqGrid and aiming to apply custom styling to it. To start, my objective is to eliminate the yellow highlighting effect that appears when clicking on a row in the jqGrid css. Despite my attempts, I have been u ...

jquerycssjqgrid

How to use Angular 10 forkJoin to manage and cancel multiple requests

Calling all Angular experts! I need help with a simple method that is causing issues when processing multiple products. private addMultiple(products: Product[]): void { let observables: Observable<Product>[] = []; products.forEach((product: ...

angularrxjs

Sending returned values from a promise to the calling function in Angular

I have a created a promise to retrieve values from a service and then assign them to variables trans and confidence, which should be used as transcript and conf in the save_data function. How can I return these values to the calling function and ensure tha ...

angulartypescriptpromise

Create images from HTML pages with the help of Javascript

Hello there, UPDATE: I am looking to achieve this without relying on any third-party software. My application is a SAP product and installing additional software on every customer's system is not feasible. The situation is as follows:   ...

javascripthtmlimagesap-bsp

Does the web browsing context within an iframe get reset when updating or specifying the src or srcDoc attributes?

Based on the official HTML5 specifications, it is stated that: When an iframe element is removed from a document, the user agent must discard the nested browsing context, if any This leads me to question whether changing the src or srcDoc attributes al ...

htmlw3c

Conceal and unveil stationary navigation when scrolling back to the very top of the screen

My current setup includes a navigation that dynamically hides as the user scrolls down and reappears when scrolling up. Additionally, I have applied the class .fixed on #top-wrapper to alter the layout/styling of this specific div. However, I am facing dif ...

javascripthtmljquery

Is there a minimum height requirement for overlapping items in React-Native using flex-box?

My understanding of flexbox is pretty solid, but there's one issue that keeps cropping up for me. Whenever I try to stack items in a ScrollView using flexbox, the layout ends up like this: 1 2 3 The overlapping of items 2 and 3 confuses me. When I ...

androidiosreactjsreact-nativeflexbox

Monitoring the download status in the web browser: Angular 5

Currently, I'm in the process of developing an application that interacts with a REST API to download files. As per the API's behavior, it responds with the file immediately upon request. So, I've implemented the following logic to facilitat ...

angularuser-interfaceangular5

Guide on integrating signalr.js into webpack within Angular 2 environment

Every time I try to use SignalR, I encounter the following error message: $.hubConnection is not a function Error: jQuery was not found. Make sure that jQuery is included before the SignalR client JavaScript file. Checking with console shows "$" and ...

angularwebpacksignalr

HTML5 Canvas Border

Hey Everyone, I've been working on an HTML5 canvas project where I set the canvas width to $(window).width(). Everything was going smoothly until I added a border, which caused a horizontal scroll to appear. Important: I attempted to use the innerWid ...

javascriptjqueryhtmlcsscanvas

How can I access properties of generic types in TypeScript?

Converting the generic type to any is a valid approach (The type E could be a typescript type, class, or interface) of various entities like Product, Post, Todo, Customer, etc.: function test<E>(o:E):string { return (o as any)['property' ...

javascriptangulartypescript

Creating two adjacent squares can be achieved by arranging columns and rows in a specific way

Looking to create a website with a gallery block but running into some issues. I only want to utilize Bootstrap along with my custom CSS for the finishing touches. The layout should consist of 2 squares next to each other, with the left square being 2 colu ...

htmlcssbootstrap-4flexboxbootstrap-5

How can you update ngModel in Angular and mark the form as dirty or invalid programmatically?

My form is connected to a model as shown below In the component file: myTextModel: string; updateMyTextModel(): void { this.myTextModel = "updated model value"; //todo- set form dirty (or invalid or touched) here } Html template: <form #test ...

angulartypescriptangular4-forms

How to obtain the height of the parent screen using an iframe

Imagine a scenario where a div contains an image that is set to perfectly fit the height of the screen. This setup works flawlessly, with one exception - when placed within an iframe, the height of the div adjusts to match the content's height rather ...

javascriptcssiframe

Connecting your HTML file to a CSS stylesheet

I'm struggling to connect my "index.html" file with my "stylesheet.css" file. I've tried copying the code from resources like CodeAcademy and w3schools, but nothing seems to be working. I'm currently using Notepad++ as my text editor - could ...

htmlcss

Enhance your CouchDB experience by customizing templates to include unique headers and footers

I am currently using CouchDB and CouchApp to host a web application. I have experience with Django and Jinja2, where I can extend templates in two different ways: {% include "header.html" %} or {% extends "base.html" %} <<<---- my preferred me ...

htmltemplatescouchdbcouchapp

Building unique CSS classes with Material UI v5 theme - A step-by-step guide

Incorporating Material UI v5 into my application has been a smooth process, except when it comes to using react-d3-tree for rendering SVG tree charts. This library allows for custom CSS class names to be added to the <path> elements that connect the ...

cssreactjsmaterial-ui

Is there a way to adjust the margin for a child DIV element using CSS?

Currently, I am working on my website located at www.buildinghunter.com. On the homepage, there are four div elements positioned in the bottom left corner of the page. I am attempting to align two specific divs (id=text-9 and id=text-10) with the other tw ...

csshtmlmargin