Displaying a div without it shifting the following elements-CodePudding

Is there a css property that I can apply to the div containing the error message so that it can be displayed without it shifting the following elements as shown in this picture :

This is my html code :

        <div >
            <label for="signInName">Adresse courriel</label>
            <input id="signInName" type="text"></input> 
            <div  aria-hidden="false" style="display: block;">
                <p>ce courriel est invalide</p>
            </div>
        </div>
        <div >
            <label for="password">Mot de passe</label>
            <input id="password" type="text"></input>   
            <div  aria-hidden="false" style="display: block;">
                <p>Entrez votre mot de passe</p>
            </div>
        </div>
    </div>

Thanks for help

CodePudding user response：

Use visibility property

The visibility CSS property shows or hides an element without changing the layout of a document.

Use line-height: 32px; to set the height of the message which indeed will set the gap between two inputs.

You can either toggle the inline style

function showErrors() {
    document.querySelectorAll('.error.itemLevel').forEach((node) => node.style.visibility = "visible");
}

.itemLevel {
  line-height: 32px;
}

<div >
    <label for="signInName">Adresse courriel</label>
    <input id="signInName" type="text"></input>
    <div  aria-hidden="false" style="visibility: hidden;">
        <p>ce courriel est invalide</p>
    </div>
</div>
<div >
    <label for="password">Mot de passe</label>
    <input id="password" type="text"></input>
    <div  aria-hidden="false" style="visibility: hidden;">
        <p>Entrez votre mot de passe</p>
    </div>
</div>
<button onclick="showErrors()">Show Errors</button>

OR You can toggle the class of the element using DOMTokenList.toggle()

function showErrors() {
    document.querySelectorAll('.error.itemLevel').forEach((node) => node.classList.toggle("hidden"));
}

.itemLevel {
  line-height: 32px;
}

.hidden {
  visibility: hidden;
}

<div >
    <label for="signInName">Adresse courriel</label>
    <input id="signInName" type="text"></input>
    <div  aria-hidden="false">
        <p>ce courriel est invalide</p>
    </div>
</div>
<div >
    <label for="password">Mot de passe</label>
    <input id="password" type="text"></input>
    <div  aria-hidden="false">
        <p>Entrez votre mot de passe</p>
    </div>
</div>
<button onclick="showErrors()">Show Errors</button>