Elevate the block when encountering errors in HTML/CSS

Question

Elevate the block when encountering errors in HTML/CSS

Here is a picture of what I want, and below I will provide a more detailed description:

Link to the image (I cannot paste it here)

I am explaining the elements involved. There are three main components:

1) The topmost text "Bla bla bla bla"

2) The button "Click me"

3) And the bottom text

When you click the button, an error message will appear. I want to move the first two elements higher without affecting the bottom text. Therefore, the bottom text should remain in its original position.

My question is - How can I achieve this using HTML/CSS code only (excluding JavaScript for text appearance)? I require HTML/CSS code that will ensure the movement of the top two elements higher.

html css web frontend

Answer 1

Answer №1

It would be more effective to utilize javascript in this scenario, allowing for the dynamic calculation of the error message display height. Resorting to other methods may lead to hacky solutions based on fixed heights, as illustrated below.

//Purely for CSS demonstration
$("#btn").click(function(){
  $(".msg").toggleClass("error");
});

.msg {padding: 3em; border:1px solid black;}
.msg.error {padding-top: 1em;
border-color:red;}

.errorMsg { 
display:none;
color:red;
height:2em;}

.error .errorMsg{
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="msg">
<h1>bla blah bla</h1>
   <input type="button" value="Click Me" id="btn" />
   <div id="error" class="errorMsg">Error message goes here</div>
   <div>Text has to not move</div>
</div>

Another approach is to leverage the visibility attribute to maintain the hidden element's position on the page

.msg {padding: 30px; border:1px solid black;}
.errorMsg { visibility:hidden; /*Important line*/
color:red;}

.errorMsg:target{
  visibility: visible;
}

<div class="msg">
<h1>bla blah bla</h1>
   <a href="#error">Click Me</a>
   <div id="error" class="errorMsg">Error message goes here</div>
   <div>Text has to not move</div>
</div>

I've incorporated the use of target in the above example for styling purposes, but modifications can be made by assigning a class to the error element or its parent and styling accordingly.

Answer 2

It would be more effective to utilize javascript in this scenario, allowing for the dynamic calculation of the error message display height. Resorting to other methods may lead to hacky solutions based on fixed heights, as illustrated below.

//Purely for CSS demonstration
$("#btn").click(function(){
  $(".msg").toggleClass("error");
});

.msg {padding: 3em; border:1px solid black;}
.msg.error {padding-top: 1em;
border-color:red;}

.errorMsg { 
display:none;
color:red;
height:2em;}

.error .errorMsg{
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="msg">
<h1>bla blah bla</h1>
   <input type="button" value="Click Me" id="btn" />
   <div id="error" class="errorMsg">Error message goes here</div>
   <div>Text has to not move</div>
</div>

Another approach is to leverage the visibility attribute to maintain the hidden element's position on the page

.msg {padding: 30px; border:1px solid black;}
.errorMsg { visibility:hidden; /*Important line*/
color:red;}

.errorMsg:target{
  visibility: visible;
}

<div class="msg">
<h1>bla blah bla</h1>
   <a href="#error">Click Me</a>
   <div id="error" class="errorMsg">Error message goes here</div>
   <div>Text has to not move</div>
</div>

I've incorporated the use of target in the above example for styling purposes, but modifications can be made by assigning a class to the error element or its parent and styling accordingly.

Elevate the block when encountering errors in HTML/CSS

Answer №1

Similar questions

Challenge with the positioning of HTML output layout

When using iOS, inserting an iFrame with a source URL (SRC) on a webpage will automatically open the URL

I have a question regarding the CSS universal selector

What is the proper way to include 'rowspan' specific CSS within an HTML table?

I am looking to adjust the height of my MUI Grid component

What are the ways to incorporate the width property in @media queries within CSS?

How to save HTML content in a variable for future use in Next.js

Failure to receive Ajax XML data in success callback

Tips for creating a zoomable drawing

Is there a way to clear out input values in a form after some errors are caught and the rest of the data is saved upon resubmission?

Two adjacent divs positioned next to each other, where the right-hand div occupies the remaining space within its

Trigger submission issue encountered with Jquery in a dialog (modal) window

How can I dynamically adjust the size of an image in a directory based on its filename with php?

Load Image Timing Discrepancy in Web Development (jQuery/PHP/HTML)

Are there any alternatives to PHP for implementing an auto-complete search feature?

Prevent scrolling in a full-screen modal using CSS

A demonstration of VueJS Nested Builder functionality

Enter the ISO code for the country in an HTML form to submit

Trouble displaying AngularJS $scope.data in the HTML code

Issue with React Ref: Invariant Violation when trying to addComponentAsRefTo