put two elements next to each other in a single row

Question

put two elements next to each other in a single row

This specific section contains an image positioned at the top, followed by two other components (within <ItemsContainer/>) at the bottom which display as separate rows. I am trying to place these two items (a grid and a chart) side by side within the same row. Despite attempting to adjust the flex direction, it does not seem to be working as expected. This may be due to the existing flex-direction: column; in the parent component.

    <main className='content'>
    <img src={poly} alt="charts" className="charts" />
    <div className="heading">
    Heading Text
    </div>
    <span> The text goes here. </span>
    <div className="regressionSetup"&rt;
    <ItemsContainer/>
    </div>
    </main>

.content{
    padding-left: 260px;
    padding-top: 100px;
    display: flex;
    flex-direction: column;
    background-color: white;
}
.popup{
    padding-bottom: 20px;
}
.charts{
    align-self: center;
    height: 350px;
    width: 800px;
}
.heading{
    font-size: 25px;
}
.regressionSetup{
    flex-direction: row;
}

https://i.sstatic.net/vnCkW.png

ItemsContainer:

        return(
            <div className="container">
            <PointDrawer addCoord={this.addCoord.bind(this)} 
                resetCoords={this.resetCoords.bind(this)}/>
            <RegressionSetup
                order_graph_1={this.state.order_graph_1}
                order_graph_2={this.state.order_graph_2}
                setOrders={(orders: any) => this.setState(orders)}
            />
            <Graph x={this.state.x_array} y={this.state.y_array} 
                deg={this.state.order_graph_1} width={800} 
                color={this.color_graph_1} />
</div>)

css

.container {
    background-color: red;
    width: 100vw;
    flex-direction: row;
}

Is there a way to correctly align the grid on the left and the chart on the right within the same line/row?

javascript html css reactjs typescript

Answer 1

Answer №1

It appears that Bootstrap is being utilized. The column classes in Bootstrap indicate the number of columns you want to utilize out of the 12 available per row. For example, if you want 2 equal-width columns across, you can use .col-6. You can learn more about this at Bootstrap Grid System.

Here is an example code snippet of ItemContainer:

<div className="container-fluid pt-4">
    <div className="row justify-content-center">
        <div className="col-6">
            <PointDrawer addCoord={this.addCoord.bind(this)} 
                resetCoords={this.resetCoords.bind(this)}/>
            <RegressionSetup
                order_graph_1={this.state.order_graph_1}
                order_graph_2={this.state.order_graph_2}
                setOrders={(orders: any) => this.setState(orders)}
            />
        </div>
        <div className="col-6">
            <Graph x={this.state.x_array} y={this.state.y_array} 
                deg={this.state.order_graph_1} width={800} 
                color={this.color_graph_1} />
        </div>
    </div>
</div>

UPDATE:

If you are using basic CSS, then consider implementing display: flex:

.container {
  background-color: red;
  width: 100%;
  display: flex;
  flex-direction: row;
}

.container .item {
  width: 50%;
}

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
  </div>

With the use of display: flex, your code would look something like this:

 <div class="container">
    <div class="item" >
      <PointDraweraddCoord={this.addCoord.bind(this)} resetCoords={this.resetCoords.bind(this)} />
    </div>
    <div class="item">
      <RegressionSetup order_graph_1={this.state.order_graph_1} order_graph_2={this.state.order_graph_2}
        setOrders={(orders: any)=> this.setState(orders)}
        />
    </div>
  </div>

Answer 2

It appears that Bootstrap is being utilized. The column classes in Bootstrap indicate the number of columns you want to utilize out of the 12 available per row. For example, if you want 2 equal-width columns across, you can use .col-6. You can learn more about this at Bootstrap Grid System.

Here is an example code snippet of ItemContainer:

<div className="container-fluid pt-4">
    <div className="row justify-content-center">
        <div className="col-6">
            <PointDrawer addCoord={this.addCoord.bind(this)} 
                resetCoords={this.resetCoords.bind(this)}/>
            <RegressionSetup
                order_graph_1={this.state.order_graph_1}
                order_graph_2={this.state.order_graph_2}
                setOrders={(orders: any) => this.setState(orders)}
            />
        </div>
        <div className="col-6">
            <Graph x={this.state.x_array} y={this.state.y_array} 
                deg={this.state.order_graph_1} width={800} 
                color={this.color_graph_1} />
        </div>
    </div>
</div>

UPDATE:

If you are using basic CSS, then consider implementing display: flex:

.container {
  background-color: red;
  width: 100%;
  display: flex;
  flex-direction: row;
}

.container .item {
  width: 50%;
}

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
  </div>

With the use of display: flex, your code would look something like this:

 <div class="container">
    <div class="item" >
      <PointDraweraddCoord={this.addCoord.bind(this)} resetCoords={this.resetCoords.bind(this)} />
    </div>
    <div class="item">
      <RegressionSetup order_graph_1={this.state.order_graph_1} order_graph_2={this.state.order_graph_2}
        setOrders={(orders: any)=> this.setState(orders)}
        />
    </div>
  </div>

put two elements next to each other in a single row

Answer №1

Similar questions

React Native Issue: The mysterious disappearance of the 'navigation.push' object

How can you retrieve a value from a JavaScript closure function?

Issues retrieving information from MySQL through an AJAX request

What steps should be taken to incorporate a user input space similar to the one found in the Wordpress new post section

Error: The module cannot be found because the package path "./v4" is not being exported from the package

What is the best way to ensure that the size of a header is balanced on both margins?

Eliminating empty elements from arrays that are nested inside other arrays

Expansion Panel in Material-UI is not following controlled expansion properly

Working with JQuery to extract and append data stored in a JSON object

Best JavaScript approach for discovering time-dependent occurrences

Combining the power of Selenium with React using Python

Excessive iterations occurring in JavaScript for loop while traversing an array

The true height is never fully accurate when a vertical scrollbar is visible

Steering clear of ng-include while still maintaining versatility in displaying sub-templates

The Next.js Link feature does not always guarantee that the component will render correctly, and the serverSideProps function may not always receive updated

I am experiencing an issue where components are constantly re-rendering whenever I type something. However, I would like them to

How to remove an extra horizontal scroll bar from a fixed-header HTML table?

HTML5 canvas processing causing web worker to run out of memory

Arrange a div beneath another div that is positioned absolutely

Need assistance with a coin flip using HTML and Javascript?