What is the best way to display a child div without impacting the position of other elements within the same parent container?

Question

What is the best way to display a child div without impacting the position of other elements within the same parent container?

As I work with a div html tag within a login form, encountering an error inside this form has presented a challenging issue. The error div sits at the top of its parent div, and ideally, upon activation, should remain within the form div without disrupting its position or size. Implementing position: absolute in the child div only resulted in it remaining fixed at the left corner of the parent div. Using z-index did not prevent the parent div from shifting by the height of the child div. The following code snippet illustrates this scenario:

<div id='formulario' style={{height: 400px}}>
    {this.props.auth.error && <div id='erro' style={{height:'15px'}}>Nao foi possivel fazer o login!</div>}
    <div id='login'>
    ...
   </div>
</div>

Upon validation of this.props.auth.error, the error message displays causing the form to expand to 415px. How can I ensure that the #formulatrio div stays at a size of 400px while keeping the #login div intact when the error is triggered?

javascript html css

Answer 1

Answer №1

adjust the top CSS attribute to reposition the login div, included a background for better visualization.

class MaintainPosition extends React.Component {
  render() {
    return (
      <div
        id="form"
        style={{ height: "400px", backgroundColor: "lightblue" }}
      >
        {this.props.auth.error && (
          <div id="error-msg" style={{ height: "15px", color: "red" }}>
            Unable to login!
          </div>
        )}
        <div id="login">
            scroll down to show error message
        </div>
      </div>
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: true
    };
  }
  render() {
    return (
      <div className="App">
        <MaintainPosition auth={{ error: this.state.error }} />
        <button onClick={() => this.setState({ error: !this.state.error })}>
          toggle error
        </button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

#err {
  
}

#form {
  position: relative;
}

#login {
  position: absolute;
  width: 100%;
  top: 20px;
  background-color: gray;
}

#root {text-align: center}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


<div id="root"></div>

Answer 2

adjust the top CSS attribute to reposition the login div, included a background for better visualization.

class MaintainPosition extends React.Component {
  render() {
    return (
      <div
        id="form"
        style={{ height: "400px", backgroundColor: "lightblue" }}
      >
        {this.props.auth.error && (
          <div id="error-msg" style={{ height: "15px", color: "red" }}>
            Unable to login!
          </div>
        )}
        <div id="login">
            scroll down to show error message
        </div>
      </div>
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: true
    };
  }
  render() {
    return (
      <div className="App">
        <MaintainPosition auth={{ error: this.state.error }} />
        <button onClick={() => this.setState({ error: !this.state.error })}>
          toggle error
        </button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

#err {
  
}

#form {
  position: relative;
}

#login {
  position: absolute;
  width: 100%;
  top: 20px;
  background-color: gray;
}

#root {text-align: center}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


<div id="root"></div>

Answer 3

Answer №2

Just wanted to give this a go by incorporating the background.

<style>
    #formulario {
        display: grid;
        align-content: center;
        width: 400px;
        height: 400px;
        background: grey;
    }
    #erro {
        position: relative;
        width: 100%;
        height: 15px;
        background: yellow;
        text-align: center;
    }
</style>

<div id='formulario'>
    {this.props.auth.error && <div id='erro'>Unable to log in!</div>}
    <div id='login'>
        ...
    </div>
</div>

Answer 4

Just wanted to give this a go by incorporating the background.

<style>
    #formulario {
        display: grid;
        align-content: center;
        width: 400px;
        height: 400px;
        background: grey;
    }
    #erro {
        position: relative;
        width: 100%;
        height: 15px;
        background: yellow;
        text-align: center;
    }
</style>

<div id='formulario'>
    {this.props.auth.error && <div id='erro'>Unable to log in!</div>}
    <div id='login'>
        ...
    </div>
</div>

Answer 5

Answer №3

Is this what you had in mind?

The important thing to remember is to designate the parent element as relative so that the child elements know how to position themselves.

$('button').on('click', function() {
  $('#error-message').toggle();
});

#form-container {
  border: 1px solid #DDD;
  position: relative;
}

#error-message {
  background-color: rgba(255,0,0,.5);
  text-align: center;
  position: absolute;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button>Show/Hide Error Message</button>

<hr>

<div id='form-container' style='height: 400px'>
    <div id='error-message' style='height: 15px'>Login failed!</div>
    <div id='login-info'>
      Username<br/>
      Password<br/>
      Login Button<br/>
   </div>
</div>

Answer 6

Is this what you had in mind?

The important thing to remember is to designate the parent element as relative so that the child elements know how to position themselves.

$('button').on('click', function() {
  $('#error-message').toggle();
});

#form-container {
  border: 1px solid #DDD;
  position: relative;
}

#error-message {
  background-color: rgba(255,0,0,.5);
  text-align: center;
  position: absolute;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button>Show/Hide Error Message</button>

<hr>

<div id='form-container' style='height: 400px'>
    <div id='error-message' style='height: 15px'>Login failed!</div>
    <div id='login-info'>
      Username<br/>
      Password<br/>
      Login Button<br/>
   </div>
</div>

What is the best way to display a child div without impacting the position of other elements within the same parent container?

Answer №1

Answer №2

Answer №3

Similar questions

Using Jquery to add new HTML content and assign an ID to a variable

It appears that Promise.all is not adequately ensuring that all tasks are completed before moving on

Understanding how to effectively conduct unit tests on the 'resolve' property within an Angular-UI Bootstrap Modal component is essential for ensuring the functionality and

Aligning a table at the center of another table

Manipulate the contents of children divs within a parent div using JavaScript or JQuery

Updating the DOM after scrolling using jQuery

Issue with flexbox max-width property not being applied when resizing the page width

When you use the useState object in NextJS, the context object may appear to be empty

Using data from an API, I am implementing JavaScript validation for my dropdown select menu

Hidden overflow and identification in URL causes content to be invisible and suddenly appear at the top of the page

What is the best way to group a Pie Chart by a string field in a .csv file using dc.js, d3.js, and crossfilter.js in a Node environment?

Troubleshooting Java REST service integration in AngularJS for UPDATE and DELETE operations

When data is stored in Internet Explorer's cache, any changes made are not being reflected in

The timing of the JavaScript dialog with the AJAX call is off-kilter

Can the Angular.js scope be maintained while also making changes to the template?

Building a Multifaceted Website using React and Node.js

Error encountered in node.js script due to misuse of Sqlite's SQLITE_MISUSE functionality

What is the best way to load the route calculation dynamically?

Dynamically Alter Notification Background

Show just three items simultaneously