Uniform height for flex columns

Currently tackling the challenge of arranging tournament pairs in a visually appealing tournaments tree view

The issue arises when the bracket columns have varying quantities of pairs, resulting in different heights due to the use of flex

I aim to achieve equality in height so that I can place pairs neatly between two pairs from the previous column

For example:

pair1
      pair 5
pair2

pair3
      pair 6
pair4

HTML:

<div class="flex">
              <div *ngFor='let stage of stages; let i = index' class="bracket-column flex-column">
                <div *ngFor='let pair of stage; let last = last' class="flex bracket-wrapper" style="flex: 1 !important">
                  <div *ngIf="pair.bracket === 1" class="bracket">
                    <p class="flex" [class.glow-text]='pair.score_participant_one > pair.score_participant_two'>{{pair.participant_one.user.username}} <span class="score">{{pair.score_participant_one}}</span></p>
                    <hr>
                    <p class="flex" [class.glow-text]='pair.score_participant_one < pair.score_participant_two'>{{pair.participant_two ? pair.participant_two?.user.username : 'BYE' }} <span class="score">{{pair.participant_two ? pair.score_participant_two : '-'}}</span></p>
                  </div>
                </div>
              </div>
            </div>

CSS:

.bracket-column
  margin-right: 2em
  flex: 1 !important
  box-sizing: border-box !important
  height: 100% !important

.bracket
  margin-bottom: 1em
  padding: 0.5em
  border: 2px solid styles.$highlight-color
  width: 150px
  background-color: styles.$additional-darker-color
  p
    margin: 0
    width: 100%
    color: styles.$additional-color
    span
      color: white

.flex
  display: flex
  justify-content: space-between
  align-items: center

.flex-column
  display: flex
  flex-direction: column
  justify-content: space-between
  align-items: flex-start

Current Appearance:https://i.sstatic.net/ndg2a.png

htmlcssangular

Answer №1

If you're looking to utilize flexbox for this solution, you will need two flex containers.

  1. Create a container for the columns. In your scenario with 3 columns, include 3 columns within that container.

  2. Add boxes for the matches in another flex-container and use flex-direction: column to stack them vertically.

  3. To align them as intended, use justify-content: space-around;.

body {
  display: flex;
  justify-content: space-between;
}

.column-flex {
  width: 30%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}


/* for demonstration purpose only */
.column-flex {
  row-gap: 10px;
}

.column-flex > div {
  border: 2px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 4em;
}
<div class="column-flex">
  <div>Quarter Finals 1</div>
  <div>Quarter Finals 2</div>
  <div>Quarter Finals 3</div>
  <div>Quarter Finals 4</div>
</div>
<div class="column-flex">
  <div>Semi Finals 1</div>
  <div>Semi Finals 2</div>
</div>
<div class="column-flex">
  <div>Finals</div>
</div>

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

Angular: How to Handle 404 Errors on Routes

I am currently working on an Angular app with Spring Boot on the backend. Here are the routes set up in my application: export const routes: Routes = [ { path: '', redirectTo: 'intro', pathMatch: 'full' }, { path: 'home ...

angular

Am I on track with this observation?

I am currently using the following service: getPosition(): Observable<Object> { return Observable.create(observer => { navigator.geolocation.watchPosition((pos: Position) => { observer.next(pos); observer.c ...

javascripttypescriptgeolocationangularrxjs

What causes the button's frame color to change when I click on it?

I am facing an issue with a button I created. When I click the button, the frame color changes and I cannot figure out why. I have attached images showing the button before and after it is clicked. Before: https://i.sstatic.net/5jpB1.png After: https://i ...

css

Secret icon revealing on mouseover

I devised a simple technique to showcase an element overlapping another, like an overlay, and it was functioning flawlessly until the point where I needed to incorporate a "button" (styled as a Bootstrap anchor) beneath it. Here is the initial setup and h ...

htmlcss

Using Django to load a template and incorporate a loading spinner to enhance user experience during data retrieval

In my Django project, I need to load body.html first and then dashboard.html. The dashboard.html file is heavy as it works with python dataframes within the script tag. So, my goal is to display body.html first, and once it's rendered, show a loading ...

javascriptpythonhtmldjango

A dark strip appears beneath an image when it is clicked in HTML and CSS styling

Problem: Whenever the logo is clicked, a black bar appears below it in both Firefox and Chrome. Holding down on the logo makes the black bar stay. Below are some of the attempts made to remove the black bar when focused on: a:active, a:focus { outline: ...

htmlcsswordpress

How to Delete the Bottom Border on Selected Tabs in MUI Using React

I am attempting to customize the appearance of MUI Tabs to achieve a design similar to the image below: https://i.sstatic.net/tBS1K.png I have created a sample code example in a codesandbox environment. You can view it here: Codesandbox Example. In this e ...

htmlcssreactjsmaterial-uitabs

What is the best way to position text next to an image that is relatively positioned?

My image is positioned relatively for a CSS mouseover effect, allowing it to change when hovered over. Since my design is responsive, the image can adjust based on screen size. Is there a way to place text next to this image without it displaying behind t ...

htmlcssresponsive-design

Warning: The use of the outdated folder mapping "./" in the "exports" field for module resolution in the package located at node_modulespostcsspackage.json is deprecated

I recently upgraded my Node to version 16 and since then I have been encountering this issue while building my Angular app. Warning: The folder mapping "./" used in the "exports" field of the package located at ".../node_modules/postcss/package.json" is de ...

javascriptnode.jsangulartypescript

Using jQuery to fetch LDAP data and return it in JSON format

I am encountering an issue with a returned JSON value. When the LDAP result is valid, the JSON return is also OK but when the result is invalid, the JSON becomes invalid as well. I am using UWamp and I am new to this. Thank you all. PHP code : <?php ...

phpjqueryhtmljson

Show/hide functionality for 3 input fields based on radio button selection

I need assistance with a form that involves 2 radio buttons. When one radio button is selected, I want to display 3 text boxes and hide them when the other radio button is chosen. Below is the code snippet: These are the 2 radio buttons: <input type= ...

javascriptjqueryhtml

Unable to utilize Angular object due to the JSON format of the data

I'm facing an issue in my Angular 4 application with TypeScript. I am using a get() method and a subscribe() method to receive a remote object in JSON format and deserialize it to match a class structure. When all the class data fields are mirrored in ...

jsonangularclasstypescriptobject

Conceal series of images with a click; reveal them again once completed

I'm working on a layout featuring overlapping images and I'm looking to create a hide-and-seek effect where the images are hidden one by one when clicked, and then shown in reverse order until all of them are visible again – essentially creatin ...

htmljquerycsshideshow

The application of border-radius causes the div to extend beyond its intended height

Is there a way to achieve a smooth shadow effect on pictures without it touching the corners? I attempted to do this by adding a border-radius and box-shadow to the parent div of the images, but now the parent div is taller than the picture itself. Any sug ...

htmlcss

I am trying to figure out how to retrieve the name of the property that is bound to [(ngModel)] in Angular 6

Here is a custom component example: <form-text [(ngModel)]="dataItem.prop1"> </form-text> Is there a way to extract the property name "prop1" from the class in this scenario? @Component({ selector: 'form-text', template ...

angularreflectionreflect-metadata

Hiding all child nodes on an Angular tree: A comprehensive guide

I am currently utilizing this particular tree structure Here is the model for each node: interface FoodNode { name: string; children?: FoodNode[]; childVisible?: boolean; } I have attempted to conceal all child nodes when the parent node has a chil ...

angularangular-material

What's the process for browsers to render the 'span' element?

<p> <span>cancel</span><span>confirm</span> </p> <hr> <p> <span>cancel</span> <span>confirm</span> </p> Both should display the same result. However, in the ...

htmlcss

Ways to update various div elements within a single webpage

I have a PHP and MySQL database setup for my website. On my website, I have four different menus. Each menu contains a single div that needs to refresh upon click. By "refresh," I mean it should call a PHP file with functions like insert, delete, and dis ...

phpjqueryhtml

How can you declare variables in CSS using LESS?

I am facing a challenge where I need to dynamically change the branding color and other styling variables on the portal based on certain conditions at runtime. I have successfully implemented this functionality using CSS with the code snippet provided be ...

cssless

Setting up the foundation for a Bootstrap footer: A step-by-step guide

I've been struggling to implement the HTML5 structure within Bootstrap 4 grid system to match the design shown in the attached images. The layout should resemble the top image when viewed on a phone, phablet, or tablet in portrait mode, and the bottom ...

htmlcsstwitter-bootstrapbootstrap-4