We Keep Coding

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

flexbox not working. Id like to make a button(html <button> tab) round

I have 2 questions. I have the code in .js file.
I'd like to make button round. I've been trying like below but its still square.
I'd like to show buttons(with name underneath) row direction.
I've given for each so that className="btn-newroom" can be the parent.
.btn-newroom {
display: flex;
}
button {
display: block;
border-radius: 50%;
}
<div className="new-room-form">
<form onSubmit={handleSumbit}>
<div className="btn-newroom">
<div>
<button
className="create-room-btn"
type="submit"
onChange={handleChange}
>
+
</button>
<div>New Room</div>
</div>
<div>
<button className="create-room-btn" type="submit">
K
</button>
<div>Kitchen</div>
</div>
<div>
<button className="create-room-btn" type="submit">
H
</button>
<div>HoF</div>
</div>
<div>
<button className="create-room-btn" type="submit">
D
</button>
<div>Delivery</div>
</div>
</div>
</form>
</div>

Solution for 1 :
for making a button exact circle you have to give the height of the button as is takes the width from the text inside it but the height remains consistent.
So instead of using this
button {
display: block;
border-radius: 50%;
}
Use something like this (configure height as you want)
button {
height: 100px;
min-width: 100px;
display: block;
border-radius: 50%;
}
Solution for 2:
To display something in a flex and in form of row you have to give the flow-direction
so in your case replace
.btn-newroom {
display: flex;
}
by
.btn-newroom {
display: flex;
flex-direction: "row";
}
If you want to have button and text as column use
.btn-newroom {
display: flex;
flex-direction: "column";
}

I want the button above the box with the time

I want the buttons to be positioned above the box, but i don´t know how to do it, i tried many thigs but didn´t work
Something like this, idk how to put those button above
This is my HTML Code
<div id="clockdiv">
<div id="time">
<span class="minutes"></span>
:
<span class="seconds"></span>
</div>
</div>
<div>
<div>
<img src="imgs/stop.png" class="btnStop" id="btnStop"/>
</div>
<div>
<img src="imgs/play.png" class="btnPlay" type="button" id="btnPlay"/>
</div>
<div>
<img src="imgs/pause.png" class="btnPause" type="button" id="btnPause"/>
</div>
<div>
<img src="imgs/play.png" class="btnResume" type="button" id="btnResume"/>
</div>
</div>
</body>
</html>
This is my CSS
.btnStop {
width: 30%;
height: 30%;
display: none;
}
.btnResume {
width: 30%;
height: 30%;
}
.btnPlay {
width: 30%;
height: 30%;
}
.btnPause {
width: 30%;
height: 30%;
display: none;
}
Idk what to try, because im so useless with CSS

This is a perfect use-case for css grids
With the little info you have provided I can only help you so much but I am sure you can customize my solution for your needs
#container {
display: inline-grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, max-content);
align-items: center;
align-content: center;
justify-content: center;
}
#container > button {
width: 30px;
height: 30px;
}
#timer {
grid-column: 1 / span 4;
grid-row: 2;
text-align: center;
font-size: 30px;
}
<div id="container">
<button class="btnPlay">▶️</button>
<button class="btnPause">⏸️</button>
<button class="btnStop">⏹️</button>
<button class="btnResume">⏯️</button>
<div id="timer">30:00</div>
</div>

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>

Centralising nested Divs which have onclick elements

I have 2 rows, one which needs two images and the other which needs to show information if those images are clicked.
I'm having an issue centralising the images and text within the row div.
<div id="container">
<!-- Image row -->
<div class="row">
<div class="col-md-6">
<div id="badbutton"></div>
</div>
<div class="col-md-6">
<div id="goodbutton"></div>
</div>
</div>
<!-- Text Row -->
<div class="row">
<div class="col-md-6">
<div id="bad" style="display:none;">
<p>Oh no! We'd appreciate it if you'd share your experience with us so we can improve in the future. Just click below to get started.</p>
<p> FORM HERE </p>
</div>
</div>
<div class="col-md-6">
<div id="good" style="display:none;">
<p>Fantastic! Please share your experience with the world on of these popular websites. Just make a selection below to get started.</p>
<ol>
<li>Click here to review us on Google+ Reviews</li>
<li>Click here to review us on Facebook</li>
</ol>
</div>
</div>
</div>
</div>
What's happening is the col-md-6 takes up 45% of the row div but the buttons inside aren't centralising themselves.
Here is the CSS:
.row {
margin: 0 auto;
}
.col-md-6 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-md-6 {
width: 45%;
}
#good,
#bad {
width: 50%;
}
Here is the outcome:

Try using display:table-* it will make your elements behavior like a table.
.row {
margin: 0 auto;
display: table-row;
}
.col-md-6 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
display: table-cell;
text-align: center;
vertical-align: middle;
}

Give style "text-align:center" to the "col-md-6" div. And display: inline-block to #goodbutton and #badbutton.
Just for example
#badbutton, #goodbutton {
height: 50px;
width: 50px;
display: inline-block;
background: #444;
vertical-align: middle;
}
Sample fiddle here
http://jsfiddle.net/Lw27ofb1/