place 2 components in the same row - javascript

In this component, I have an image at the top and then 2 other components (inside <ItemsContainer/>) at the bottom that appear as different rows. I want to put the other two items (a grid and a chart) in a single row and I have already tried using flex direction but it does not seem to work for me. It could be happening because I am using flex-direction: column; in the parent component already.
<main className='content'>
<img src={poly} alt="charts" className="charts" />
<div className="heading">
Heading Text
</div>
<span> The he text goes here. </span>
<div className="regressionSetup">
<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;
}
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;
}
How can I fix this such that the grid appears on the left and the chart appears on the right but in the same line/row?

It looks like you are using Bootstrap. So column classes indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want 2 equal-width columns across, you can use .col-6.
The code would look like this 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 simple CSS, then let's try to use 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>
So you code would look 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>

Related

Absolute Elements behaving weird in React

I have a simple flex header with flex items which displays absolute divs kinda like a dropdown. It works fin in a normal HTML file but in react, the flex items overflow with a scroll bar forcing the div no to overlap the header itself.
The following is the html code
<style>
.special {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.special > * {
display: relative;
}
.resultDiv {
display: none;
position: absolute;
background-color: purple;
height: 150px;
width: 80px;
}
.special > *:hover .resultDiv {
display: block;
}
</style>
<header class="special" style="background: red">
<p>Ameer</p>
<div>
<form>
<input type="search"/>
</form>
<div class="resultDiv"></div>
</div>
<nav>
<div class="resultDiv"></div>
Home
Contact
About
</nav>
</header>
The stling is thesame for react. Here's the code for react component
function DesktopHeader(){
return(
<header className="special"style={{background: 'red'}}>
<p>Ameer</p>
<div>
<form>
<input type="search"/>
</form>
<div className="resultDiv"></div>
</div>
<nav>
<div className="resultDiv"></div>
Home
Contact
About
</nav>
</header>
)
}
Jus figured out that the flex items were inheriting an overflow: hidden property

Putting Text in between 2 Input Boxes React

I am attending to have 2 input boxes next to each other with text in between them. Something like this
[0... ] < Ranking < [1000...]
However, the most I've been able to get is the two input boxes with no text in between.
This is my code so far attending to put the text in between them.
return(
<div className="two-col">
<div className="col1">
<input type={"text"} required={true} placeholder={"0..."} name={"id"} onChange={update} />
</div>
<text> < Ranking < </text>
<div className="col2">
<input type={"text"} required={true} placeholder={"1000..."} name={"id"} onChange={update} />
</div>
</div>
);
And my CSS file
.two-col {
overflow: hidden;/* Makes this div contain its floats */
}
.two-col .col1,
.two-col .col2 {
width: 50%;
background: #f2f2f2;
}
.two-col .col1 {
float: left;
}
.two-col .col2 {
float: right;
}
Any help is much appreciated.
<div className={'container'}>
<div className={'col'}>
<input type={'text'} required={true} placeholder={'0...'} name={'id'} onChange={update} />
</div>
<div className={'col'}> < Ranking < </div>
<div className={'col'}>
<input type={'text'} required={true} placeholder={'...1000'} name={'id'} onChangeonChange={update} />
</div>
</div>
Using flex
.container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
You can have more control over the row using display: grid (not as well supported as flexbox).
EDIT: graph container
<div className={"container"}>
<div className={"container inputs"}>
<div>
<input
type={"text"}
required={true}
placeholder={"0..."}
name={"id"}
onChange={"update"}
/>
</div>
<div> < Ranking < </div>
<div>
<input
type={"text"}
required={true}
placeholder={"...1000"}
name={"id"}
onChange={"update"}
/>
</div>
</div>
<div className={"graphview"}>
graph view
</div>
</div>
CSS
.container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.container.inputs {
width: 50%;
}
.graphview {
width: calc(50% - 10px);
border: 5px solid rgba(0, 0, 0, 1);
}
When using percents and borders, you have to calculate the width.
Try to use flexbox
.two-col {
display: flex;
}
.two-col .col1,
.two-col .col2 {
background: #f2f2f2;
}
and remove other css

CSS Grid two rows nested in a single column

I am looking for a way to allow two rows within a single column while the other two columns to the right of it are equal/flexible to the height of those two rows. The width should be 100% when looking at all three columns (so around 33% each column). Here is an example of how I want it to look:
https://i.imgur.com/lLPzXhS.png
I will be filling those boxes with clickable boxes like shown below:
https://i.imgur.com/uyyDbL7.png
I have tried using display: row, display: cell, but I am not able to add any margins to it so this is the product I get:
https://i.imgur.com/Ok6EgT0.png
You can see that I have somewhat of the grid system set up, but not as ideally as I want it. There are no margins that can be set between the red and orange box, even though I am able to add margins to the turqoise and blue box.
Here is the code I have:
HTML:
<div class='d-table'>
<div class='t-row'>
<div class='t-cell one-third'>
<div class='turqoisebox'>
Turqoise box here
</div>
<div class='bluebox'>
Blue box here
</div>
</div>
<div class='t-cell one-third redbox'>
Red box here
</div>
<div class='t-cell one-third orangebox'>
Orange box here
</div>
</div>
</div>
CSS:
.d-table {
display: table;
}
.t-row {
display: table-row;
}
.t-cell {
display: table-cell;
margin-left: unset;
margin-right: unset;
/*border: 1px solid tomato;*/
}
.one-third {
width: 30%;
}
.two-thirds {
width: 200px;
}
.bluebox {
background-color: #9dd8dd;
margin: 25px;
border-radius: 25px;
border: solid #7dacb0;
border-width: 3px;
box-shadow: 2px 4px 8px 2px rgba(0,0,0,0.4);
transition: 0.3s;
text-align: center;
}
.bluebox:hover {
box-shadow: 2px 8px 16px 2px rgba(0,0,0,0.8);
}
Any thoughts on how to replicate the second image results neatly?
You could use flexbox. Take a look at this simplified example:
.content {
background: orange;
margin: 1rem;
padding: 1rem;
flex: 1;
color: white;
display: flex;
}
.content > span {
margin: auto;
}
.row {
display: flex;
flex-direction: row;
background-color: blue;
flex: 1
}
.col {
display: flex;
flex-direction: column;
flex: 1;
background-color: red;
}
<div class="row">
<div class="col">
<div class="row">
<div class="content">
<span>This is centered</span>
</div>
</div>
<div class="row">
<div class="content">
<span>This is centered</span>
</div>
</div>
</div>
<div class="col">
<div class="content">
<span>This is centered</span>
</div>
<div class="content">
This is not
</div>
<div class="content">
This is not
</div>
</div>
<div class="col">
<div class="content">
This is not
</div>
<div class="content">
This is not
</div>
<div class="content">
This is not
</div>
<div class="content">
<span>This is centered</span>
</div>
</div>
</div>
You could also use a minimal flexbox-based grid library like Flexbox Grid.
Margin is used for setting where elements should start so instead use padding between those 2 elements to get the space you want.

Is there any other way to change styles than to override each of them?

There is really many panels on my site. Each of them has a div with items-container class and inside of it there is a few item divs (all you can see in example code below). To style them all I created "global" styles (let's call them global) which work on all panels, but there are a few I want to have different styles.
To change the styles of top-container panel, I need to copy all global styles and override every single one of them under new selector (top-container).
Is there any other way to change the styles of my top-container panel than to override each of it separately?
JS solutions are also welcome (if there are any...).
Here is a demo: LINK
And here is the code:
<div class="top-container">
<div class="top panel">
<div class="items-container">
<div class="item">Item1</div>
<div class="item">Item2</div>
<div class="item">Item3</div>
<div class="item">Item4</div>
</div>
</div>
</div>
<div class="middle">
<div class="left panel">
<div class="items-container">
<div class="item">Item1</div>
<div class="item">Item2</div>
<div class="item">Item3</div>
<div class="item">Item4</div>
<div class="item">Item5</div>
<div class="item">Item6</div>
<div class="item">Item7</div>
<div class="item">Item8</div>
</div>
</div>
<div class="right panel">
<div class="items-container">
<div class="item">Item1</div>
<div class="item">Item2</div>
<div class="item">Item3</div>
<div class="item">Item4</div>
<div class="item">Item5</div>
<div class="item">Item6</div>
<div class="item">Item7</div>
<div class="item">Item8</div>
</div>
</div>
</div>
CSS:
.top-container {
width: calc(100% - 4px);
height: 50px;
}
.panel {
border: 2px solid black;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.middle {
width: 100%;
height: 250px;
display: flex;
flex-direction: row;
margin-top: 10px;
}
.items-container {
display: flex;
flex-direction: column;
text-align: center;
}
.item {
font-weight: bold;
}
.top-container .items-container {
display: block;
}
.top-container .items-container .item {
display: inline-block;
}
I write the styles in SASS, but jsfiddle somehow didn't work even when I changed the language.
This is a simple example. I know it's not much work to change two lines of code (in this case), but my real project is much more complicated and overriding styles = hundreds of additional lines of code...
As you mentioned !
To change the styles of top-container panel, I need to copy all global
styles and override every single one of them under new selector
(top-container).
The easiest way is to make a global class which you already did .panel. Now if you want to give any of panels a different style, either add a new class <div class="top panel panel1"> or select by child selector .middle > .left or select by nth-Child().
Here is your updated Fiddle with my example.
Hope it will answer your question.

Displaying a variable length and height 2D array of squares on a web page

I'm developing a web application that displays a stack of shipping containers in a 2D array format. The width and height of the stack can vary so I'm wondering if there is an efficient way to produce a grid/table of squares that will represent the container stack reliably. The container locations will be pulled from a database.
There's a variety of ways you can approach this. My example below uses the flexbox layout; you can use something like the CSS I included, and then all you have to do is generate one <div class="stack"> for each stack of containers, and then one <div class="cont"> within each stack for each container (if I understood your description correctly).
.containers {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: stretch;
}
.containers .stack {
margin: 10px;
display: flex;
flex-flow: column-reverse nowrap;
justify-content: flex-start;
}
.containers .cont {
width: 30px;
height: 30px;
margin-top: 10px;
padding: 10px;
background: #ccc;
}
<div class="containers">
<div class="stack">
<div class="cont">2</div>
<div class="cont">11</div>
<div class="cont">10</div>
</div>
<div class="stack">
<div class="cont">3</div>
<div class="cont">5</div>
<div class="cont">7</div>
</div>
<div class="stack">
<div class="cont">8</div>
<div class="cont">1</div>
</div>
<div class="stack">
<div class="cont">4</div>
<div class="cont">9</div>
</div>
<div class="stack">
<div class="cont">6</div>
<div class="cont">12</div>
</div>
</div>

Categories