Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Calculator

0

38
Views
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>
                <a href="#">Home</a>
                <a href="#">Contact</a>
                <a href="#">About</a>
            </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>
                <a href="#">Home</a>
                <a href="#">Contact</a>
                <a href="#">About</a>
            </nav> 
        </header>
    )
}
7 months ago · Juan Pablo Isaza
1 answers
Answer question

0

Jus figured out that the flex items were inheriting an overflow: hidden property

7 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2023 PeakU Inc. All Rights Reserved.