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

Examining website design on an IOS device from a Windows computer

Creating a clickable color-changing grid: A step-by-step guide

Iterating through an array of MongoDB document IDs, querying each ID and then storing the results in a new array results in an empty array

Execute AngularJS code when a button is clickeddoubleValue

tips for dynamically highlighting search bar after choosing a different dropdown option - vuejs

In order to utilize the componentDidUpdate lifecycle method, I passed props to the Outlet component while nesting it

Maintain the tab order for elements even when they are hidden

Is there a way for me to modify the position of a cursor graphic?

The navigation bar in responsive view on Bootstrap 4 causes the content below it to shift

Methods for validating ajax response with Jasmine

PHP code exhibiting inconsistent behavior when executed on a WAMP Server

The GitHub-hosted package encounters a failure during the npm publish process

When toggling visibility with JS, the Bootstrap Grid Row may not center-align as expected

Update the website's navigation key for improved user experience

Preventing Page Scroll While New Data is Loading

Paused session in web development

What is the best way to refresh a Windows 7 command prompt screen before executing a new function in Node.js?

Exploring the efficiency of AngularJS when binding to deeply nested object properties

What is the best way to include a hyperlink in the same line?

Activate the places_changed event in Google Maps by clicking the submit button