Absolute Elements behaving weird in React - javascript

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

Related

place 2 components in the same row

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>

Flex only for two out of three elements

I have 3 seperate elements all in one container/wrapper.
I have flex applied so the image and Text are side by side. However i want the "Scroll Down" div to be placed underneath the other two elements while still using Flex.
Is there any flex property to somehow only apply Flex on the two first elements?
Image:
https://gyazo.com/a391508e26aff2486103579134c051e1
<section class="home-section">
<div class="home-wrapper">
<div class="home-column">
<div class="home-row">
<h1>Centuries Gaming</h1>
<h2>Roleplay on a different level</h2>
<p>From the aspirations and dreams of others, we stand tall, proud, and loyal
to our visions and project. We provide the best and most immersive...</p>
<div class="home-buttons">
<div class="home-button home-button-left">
Apply
</div>
<div class="home-button home-button-right">
Read More <i class="fas fa-arrow-right"></i>
</div>
</div>
</div>
<div class="home-row">
<div class="home-image">
<img src="images/home-image.png" alt="Vehicle Drifting">
</div>
</div>
</div>
</div>
<div class="home-scroll">
<button>
<span>Scroll Down</span>
<img src="icons/mouse.svg" alt="Mouse Scroll Icon">
</button>
</div>
</section>
/* Home Section */
.home-section {
height: 100vh;
display: flex;
align-items: center;
}
.home-column {
display: flex;
}
.home-row h1 {
font-size: 60px;
color: white;
font-weight: 700;
margin-bottom: 7x;
}
.home-row h2 {
font-weight: 500;
color: #ffffff80;
margin-bottom: 20px;
}
.home-row p {
color: #ffffff80;
font-size: 14px;
max-width:600px;
}
.home-row .home-buttons {
display: flex;
margin-top: 50px;
}
If you add flex-direction: column; to .home-section then the parent element will display its children vertically. And the scroll element will be below the order elements.
You can use flex-direction:column
.home-section {
height: 100vh;
display: flex;
align-items: center;
flex-direction: column;
}
The default is row, but you can change that property to stack the elements vertically. https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

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.

How can I put a ReactJS-bootstrap form and h1 tag side by side

I want to place my FormGroup and my h1 tag side-by-side horizontally. I've tried using display: inline-block and various other stuff but no luck. Here's my .css code:
.testingForm {
max-width: 320px;
}
.testingMore {
text-align: left;
float: right;
}
And here's the .js code:
<div className="testingForm">
<FormGroup
controlId="stuff"
bsSize="large"
>
<ControlLabel>Stuff</ControlLabel>
<FormControl
/>
</FormGroup>
</div>
<div className="testingMore">
<h1>Additional Stuff</h1>
</div>
You could create an element that wraps both your form and header, and make it into a flex container with display:flex;
.form-wrapper {
display: flex;
}
.testingForm {
max-width: 320px;
}
h1 {
margin-top: 0;
}
<div class="form-wrapper">
<div className="testingForm">
<form>
Test: <input type="text"/>
</form>
</div>
<div>
<h1>Additional Stuff</h1>
</div>
</div>

Posistion elements inside form

Heads up only been doing this for a couple days.
I have a form with one text field and one button. Trying to center the text field and button side by side inside of my form.
.row {
width: 100%;
margin-bottom: 20px;
display: flex; flex-wrap: wrap;
}
.col-6 {
width: 50%;
}
.form {
margin 0 auto;
display: block;
}
<div class='grid'>
<div class='row'>
<div class='col-6'>
<form class='form'>
<input type ='text' name='userGuess' class='userGuess'/>
<button type='button' name='submitBtn' value='Submit' class='submitBtn'>Submit</button>
</form>
</div>
</div>
</div>
I tried a lot of different things and nothing seems to work how I want it too.
Note: Not entire CSS code, just basic framework so I didn't paste all of it.
thanks.
Add justify-content: center; to your .row. Then read this article.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I added a Div to Contain the two.
Here is the updated CSS with class Container.
.row {
width: 100%;
margin-bottom: 20px;
display: flex; flex-wrap: wrap;
}
.col-6 { width: 50%; }
.form {
margin 0 auto;
display: block;
}
.container{
width:100%;
padding:1%;
}
Here is your updated HTML with the new Div in it.
<div class='grid'>
<div class='row'>
<div class='col-6'>
<form class='form'>
<div class="container">
<input type ='text' name='userGuess' class='userGuess'/>
<button type='button' name='submitBtn' value='Submit' class='submitBtn'>Submit</button>
</div>
</form>
</div>
</div>
</div>

Categories