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

  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

What is the best method for sending PHP data to an HTML file?

Once the user logs in, I aim to direct them to a separate HTML page (a landing page) that greets them with "welcome, (user)." I initially attempted to utilize cookies for this functionality but realized it isn't feasible. How can I achieve this? Here ...

phphtml

The CSS styling for changing the background-color and color of list items (li) is

Trying to customize the background-color and color of li, but despite inspecting it, the changes are not reflecting on the page. Does anyone know why this is happening and how to fix it? Update: Here's a link to the JSFiddle. However, when I run it ...

htmlcss

CSS division nested within the center float division

In my attempt to design a 3-column home layout, I have successfully styled the center, left, and right sections. However, I am facing difficulty in placing two sliders within the middle class. My goal is to have slider1 positioned on top inside the middle ...

htmlcss

CSS - Revealing an element on the backface post flip animation

I encountered an issue while working on a CSS flip card project. Despite using backface-visibility: hidden;, one element remains visible from the other side. In the simplified snippet provided, if you click on more in the bottom right corner, the card fli ...

css

How to Modify CSS in Angular 6 for Another Element in ngFor Loop Using Renderer2

I have utilized ngFor to add columns to a table. When a user clicks on a <td>, it triggers a Dialog box to open and return certain values. Using Renderer2, I change the background-color of the selected <td>. Now, based on these returned values, ...

javascriptangulartypescript

Conceal the <div> element if the <span>

Is there a way to hide the content within this div if the prop-value is empty? I specifically want to hide the text "First class" when Prop-value does not have any value. Any solutions? <div> <span class='prop-name'>F ...

jqueryhtmlcss

Generate a dynamic animation by combining two images using jQuery

My attempt to animate two images is not working. I received some help on Stack Overflow but still facing issues with my CSS and HTML code. This is the code I am using: $(document).ready(function() { $(".animar").click(function() { $("#img4" ...

javascriptjquerycsshtmlcss-animations

What is the best way to incorporate a CSS transition without any dynamic property changes?

Is there a way to add a transition effect to a header when its size changes without a specified height value in the CSS? The header consists of only text with top and bottom padding, so as the text changes, the height adjusts accordingly. How can I impleme ...

javascripthtmlcsscss-transitions

Creating formGroups dynamically for each object in an array and then updating the values with the object data

What I am aiming to accomplish: My goal is to dynamically generate a new formGroup for each recipe received from the backend (stored in this.selectedRecipe.ingredients) and then update the value of each formControl within the newly created formGroup with t ...

javascriptangulartypescriptangular-reactive-forms

"Arranging elements with identical class in a single column but on separate rows using CSS grid - a step-by-step guide

I'm facing an issue with organizing choices and matches in columns using grid CSS. Currently, the match column is overlapping with the choice column. Here is how it is coded at the moment: .grid{ display:grid; grid-template-columns: 1fr 1 ...

htmlcsscss-grid

Click the icon to introduce a fresh row into the table

I have embedded a table with a "plus" font awesome icon. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorig ...

htmlcsstwitter-bootstrap

challenges surrounding the use of getElementByTagName

Within my webpage, I have implemented two select elements, both containing multiple options. However, I am facing an issue where I can only access the options from the first select box using getElementByTagName("options"), and unable to retrieve the option ...

javascriptjqueryhtmltagsgetelementsbytagname

Is my directive not displaying the desired content on the HTML page?

I'm facing an issue with a custom directive in AngularJS that is supposed to draw a circle using SVG. However, upon loading the page, the circle doesn't appear, and even the text within the template is not showing up. What could be causing this ...

htmlangularjssvgangular-directiveangular-template

What could be causing the black spaces to appear after my text in HTML?

I recently tried to implement text on an image following a tutorial I found at https://css-tricks.com/text-blocks-over-image/. Here is the code snippet I used: .image{ position: relative; } h2{ position:absolute; top: 200px; left: 200px; wi ...

jqueryhtmlcssdebugging

Having trouble getting the jQuery toggle function to work properly with div elements

I'm struggling with some divs that are not behaving as expected. When I click the button, it opens and changes the text to "Collapse", but when I click it again, it doesn't change the text back to "Find Support". Additionally, if I click on a dif ...

jqueryhtmlcss

Accessing the value of a field using JavaScript/jQuery

Welcome to my page! I am working on obtaining the current Start and Finish date values. I plan to add a button for users to click, which will then retrieve all dates and display them somewhere on the page. But for now, I just need a way to access the date ...

javascriptjqueryhtmlextjs

Placing a list item at the beginning of an unordered list in EJS with MongoDB and Node.js using Express

What I've done: I already have knowledge on how to add an LI to UL, but it always goes to the bottom. What I'm trying to achieve: Add an LI to the top so that when my div.todos-wrapper (which has y-oveflow: hidden) hides overflow, the todos you a ...

javascriptcssnode.jsmongodbejs

Unable to create a new collection in Firebase Firestore

I encountered an issue while trying to add a collection in Firebase Firestore using the function .collection(doc).set. Despite finding the new user in authentication in Firebase, the collection was not created and the console displayed an error message. ...

javascriptangularfirebasegoogle-cloud-firestore

Writing the success function for a jQuery ajax call involves defining the actions to be taken once

Embarking on my journey to learn jQuery and web development, I am faced with the task of sending user input (username and password through a submit button) to a PHP page using .ajax and success function. Below is the HTML form code: <form id="form1"&g ...

javascriptphpjqueryhtmlajax

Get rid of the drop-down shadow effect

Currently working on a website project for a client and looking to remove the blue "shadow" effect from the dropdown menus. I believe the code that needs editing is as shown below: .main_nav ul.sub-menu { position: absolute; top: 65px; width: ...

cssmenushadow