The most effective method for positioning a child element to the left and top using Flexbox grid

I am currently working on visualizing queues and processes within a system. Each process is associated with a specific queue from which it retrieves data. I aim to create a layout similar to the following:

https://i.stack.imgur.com/BXyts.png

However, I am facing difficulties in achieving this layout without resorting to hacky methods. The primary challenge lies in positioning the elements as desired - skewed towards the left and upwards. Currently, each process and queue are placed within a column (Col). This column is then split into two smaller columns - one for the process and one for the queue. Below is a snippet of pseudo-code representing this structure:

<Row>
   <Col>
    <Col md=3 queue />
      <Queue style={position relative top -XX%, left - YY%} />
    <Col md=9 process />
  </Col>
</Row>

While this approach works by adjusting the offset based on the number of processes being displayed, I prefer not to rely on such manual tuning. My goal is to address this issue using the "flexbox-way," but I am unsure about how to proceed with implementing that.

javascriptcssreactjsfrontend

Answer №1

Here is a basic example to get started with the flexbox approach:

.methodologies {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.methodology {
  padding-left: 40px;
  padding-top: 30px;
  position: relative
}

.queue {
  position: absolute;
  left: 0;
  top: 0;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 25px
}
<div class="methodologies">
  <div class="methodology">
    Methodology 1
    <div class="queue">
      Queue
    </div>
  </div>
  <div class="methodology">
    Methodology 2
    <div class="queue">
      Queue
    </div>
  </div>
  <div class="methodology">
    Methodology 3
    <div class="queue">
      Queue
    </div>
  </div>
</div>

Answer №2

I believe that utilizing CSS grid is a superior solution. Take a look at this example to see what you can accomplish.

.container {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-template-rows: 30px 30px;
  grid-column-gap: 20px;
  grid-row-gap: 10px;
}


.process, .quee {
  width: 60%;
  text-align: center;
  border: 1px solid lightgreen;
  border-radius: 30px;
}

.process {
  justify-self: end;
}

.quee {
  justify-self: start;
}
<div class="container">
    
    <article class="quee">quee</article>
    <article class="quee">quee</article>
    <article class="quee">quee</article>
    <article class="process">process</article>
    <article class="process">process</article>
    <article class="process">process</article>

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

Having difficulty utilizing the express.session module in conjunction with HTTPS

I need to implement authentication and session creation on a HTTPS static website using expressjs. Here is the code snippet: app.js: // Set up the https server var express = require('express'); var https = require('https'); var http ...

javascriptnode.jssessionhttpsexpress

Harnessing the power of two-way data binding in VueJS

I am looking to utilize Vue's two-way data binding to dynamically update the values of amount and total. The price of a given product is fixed. When users modify the amount, the total = amount * total will be automatically calculated. Similarly, users ...

javascriptvue.jsvuejs2

Encountering a problem in React.js and Typescript involving the spread operator that is causing an error

Could someone assist me with my current predicament? I attempted to work with TypeScript and utilize the useReducer hook. const initialState = { a: "a" }; const [state, dispatch] = useReducer(reducer, {...initialState}); I keep encountering an error ...

reactjstypescriptbabeljs

Discover the power of lodash's .groupBy method as you learn how to efficiently group objects within another

Utilizing lodash's _.groupBy function, I have generated the following data: { "Generic Drugs":[ { itemDes: "Dulcolax", itemGeneric: "Bisacodyl", pr ...

javascriptangularjslodash

Personalizing the text of an item in a v-select interface

Can the item-text be customized for the v-select component? I am interested in customizing each item within the v-select dropdown, similar to this example: :item-text="item.name - item.description" ...

javascriptvue.jsvuetify.js

What is the safest way to convert a local file path to a file:// URL in Node.js?

In my node.js application, I am faced with the task of converting local file paths into file:// urls. After some research, I came across the File URI scheme on Wikipedia and I believe that there must be a solution out there or perhaps even an npm module t ...

javascriptnode.jsurlnpm

How about "Incorporate Google Auth into your Vue.js project with modular

I'm on the search for a project that showcases using Vue.js and the Google client library to authenticate with JavaScript, but without the need for transpilers, bundlers, or Node/npm. Does anyone know of such an example out there? I simply want to cre ...

javascriptgoogle-chromevue.jsgoogle-oauth

Interacting with the Follow/Unfollow button using jQuery/Ajax, managing repetitive actions efficiently

I'm working on developing a Follow/Unfollow button that can toggle between the two functions without requiring a page refresh. It currently works smoothly - when I click "Follow," it adds the follow data to the database and displays the "Unfollow" but ...

phpjavascriptjqueryajaxfunction

Auto-filling a form with the selected 'id' in Django using JavaScript or AJAX

I am a novice and I want the form to be autofilled when I select a vehicle ID from the template. Here are my models. class Fuel(models.Model): vehicle = models.ForeignKey(Vehicle, on_delete=models.CASCADE) previous_km = models.IntegerField(blank=False, nul ...

javascriptdjangoajaxformsautocomplete

The state data is not being properly updated and is getting duplicated

While developing a loop to parse my API data, I encountered an issue where the values obtained were not being captured properly for dynamically loading corresponding components based on their characteristics. The problem arose after implementing useState() ...

reactjstypescriptmaterial-ui

What steps can you take to resolve the "TypeError: Cannot read property 'id' of undefined" issue?

I have been developing an app that involves using databases to add items for users based on their user ID, which is their username. However, whenever I attempt to add an item, I encounter an error that I can't seem to troubleshoot. The error message r ...

javascriptnode.jsmongodbexpressmongoose

Only class components can utilize ReactWrapper::state() in Unit Testing with Jest and Enzyme

Encountering an error while writing unit tests in React using Jest and Enzyme. The error message states: "ReactWrapper::state() can only be called on class components". import React from 'react'; import { mount } from 'enzyme'; import ...

reactjsunit-testingjestjsmaterial-uienzyme

Tips for aligning the left and right columns above the middle column in the material-ui responsive grid on mobile devices

How can I arrange 3 Grid items to display differently on mobile and tablet views using the Material-UI Grid component? On mobile, I want the left and right grid items to be above the middle one, while on tablet view, I want them to appear next to each othe ...

reactjsmaterial-ui

The Facebook JS SDK is causing an XSS error and returning a "user_denied" response, even though the Auth Popup for FB.Login is not being

I currently have a Facebook canvas app located at Previously, I was using an anchor link to direct users to the OAUTH login flow. After implementing the Facebook JavaScript SDK, I followed this logic: 1) Initialization of the FB API FB.init({ a ...

phpjavascriptjqueryfacebook

What is the solution for the error message "Unhandled Runtime Error" with the description "TypeError: videoRef.current.play is not a function"?

I am currently working on implementing custom controls for a video on a Nextjs website. When using a standard HTML <video> component, the code functions as expected and clicking the custom play button successfully plays the video. However, when I swi ...

javascripthtmlreactjsnext.js

Module-alias cannot be resolved by esm

Currently, I am utilizing the combination of esm package and module-alias. However, it appears that esm is not recognizing module-alias's paths. This is how I am loading my server file: nodemon -r esm ./src/index.js 8081 At the beginning of my inde ...

javascriptnode.jsnpm

Updating data without having to refresh the page is a useful feature when it comes to deleting a document on Firebase

Currently, I have a button that triggers this function to remove a value from Firebase. These values are being displayed in a flatlist on the same page. The function itself works perfectly fine, but to see the updated changes, I either need to refresh the ...

reactjsfirebasegoogle-cloud-firestore

Storing data on your local machine using Electron

I am in need of help with my template files which have variable strings. I want to create a basic input form using Electron (https://www.electronjs.org/) and save the resulting output file on the user's device. Could someone recommend a module that e ...

javascriptformsnpmelectron

Utilize an Ajax dropdown menu that allows users to enter search criteria, such as location or city

Looking for a way to display weather information based on a selected city? Check out this code snippet that uses Yahoo API to pull data and show weather details. Here's the code: <HTML> <HEAD> <TITLE>Find Weather in major cities ar ...

javascriptphpjqueryajax

Using discord.js to conveniently set up a guild along with channels that are equipped with custom

When Discord devs introduced this feature, I can't seem to wrap my head around how they intended Discord.GuildManager#create to function. How could they possibly have expected it to work with Discord.GuildCreateOptions#channels[0], for instance, { ...

javascripttypescriptdiscorddiscord.js