Positioning a span to be below an input field

Below is the code for a Blazor component that includes a textbox which can be edited with the click of a button.

                @if (_editing)
                {
                    <div class="floatingbox position-relative">
                        <input type="text" value="@AddText" @oninput="@(e => { AddText = e.Value.ToString(); })" 
                        @onblur="@(e => { InputBlured(e); })" @onkeyup="@(e => KeyPressed(e))" maxlength="75" />
                        <button type="button" class="button_search_term">
                            <div @onclick="ProcessInput"><i class="fas fa-arrow-right"></i></div>
                        </button>
                    </div>
                }
                else
                {
                    <div class="floatingbox position-relative" @ondblclick="ToggleMode">
                        <span>@AddText</span>
                    </div>
                }
                

I would like to have this span displayed directly under the input box for error messages:

            <span hidden="@IsShow" class="error-color">Error message</span>

Despite using CSS with display block, the issue arises where the span becomes enabled and rearranges the input box controls when an error occurs. This problem can occur multiple times on a single page.

            .error-color{
                color:red;
                //display:block;
                padding-left:35px;
            }
        

How can I style this so that the span remains positioned directly beneath the input box?

Answer №1

To achieve this effect, utilize the position:absolute property.

Take a look at this demonstration:

.control{
  position: relative;
}
.error{
  position: absolute;
  left: 0;
  bottom: -10px;
  
  font-size: 10px;
  line-height: 1;
}
<div class="control">
  <input type="text">
  <span class="error">ERROR</span>
</div>

Remember to include position:relative on the parent Element for proper functionality.

Your final HTML should resemble something like this:

<div class="floatingbox position-relative">
  <input type="text" value="@AddText" @oninput="@(e => { AddText = e.Value.ToString(); })" @onblur="@(e => { InputBlured(e); })" @onkeyup="@(e => KeyPressed(e))" maxlength="75" />
  <button type="button" class="button_search_term">
    <div @onclick="ProcessInput"><i class="fas fa-arrow-right"></i></div>
  </button>
  <!-- insert your error span here -->
  <span hidden="@IsShow" class="error-color">Error message</span>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

issues with jquery functionality on mobile devices

I'm currently working on a website where I've implemented a jQuery script to dynamically load specific parts of an HTML page with an ID of 'guts' into the main content area. The goal was to keep the menu consistent while only changing t ...

What sets npm node-sass apart from npm sass?

Recently, I discovered that the recommended approach is to utilize @use rather than @import in sass. However, it appears that using npm sass instead of npm node-sass is necessary for this. Can you clarify the distinction between these two? Also, why do @ ...

Divs are unable to be positioned at the top of the container

I am struggling with the alignment of blocks inside a container that can be dragged and re-sized within their container. The default position should have 7 divs side-by-side at the top of the container, however, they are appearing stacked on top of each ...

Ensure that a span within a cell table has a height of 100%

Is there a way to have the span element expand to full height? Click here <table class="table table-condensed table-hover table-striped"> <thead> <tr> <th class="shrink"></th> <th class ...

What are the reasons for avoiding placing CSS code directly within HTML?

Situation: My website is dynamically served, with all CSS and javascript directly embedded into the HTML document to optimize speed. Advantages: Reduces web requests Fewer files downloaded Speeds up webpage loading time Disadvantages: Potential cachin ...

The margin 0 auto feature is ineffective, and instead, the target is activated upon the page's initial loading

As a beginner in CSS, I am encountering some issues with the HTML page of my application. I am currently working on an app and aiming to create a login view where the login form appears either after a voice command or button click. I am facing two main pro ...

Can someone please provide guidance on how to focus on these boxes? (see image below)

My goal is to specifically target the boxes with white dots inside them. Each black box in this picture represents a blog post, even including the larger one at the top. I initially considered using the nth-child selector, but I'm not confident in how ...

Transform the Bootstrap container to fill the entire height of the browser

How can I make the container height 100% of the browser without breaking the contents inside? html, body { height: 100%; min-height: 100%; } .container { min-height: 100%; height: 100%; background-color:red; } <div class="contai ...

Encountering difficulty with installing sass

I recently attempted to install node-sass and, while the installation was successful, I encountered an issue where the code in main.scss was not automatically transferred to style.css. In an attempt to resolve this issue, I deleted all related files incl ...

Update the navigation logo while scrolling

My website has a scrolling navigation menu using Wordpress. The default logo color is green, but when the user scrolls, a white background appears. However, on specific screens, I need the initial logo to be white. I have managed to create an alternate na ...

Drop-down menu for every individual cell within the tabular data

I'm working with a large HTML table that looks like this: <table> <tr> <td>value1</td> <td>value2</td> </tr> <tr> <td>value3</td> <td>value4 ...

MUI: Issue with pseudo element appearing cropped outside of Paper container

I am facing an issue where a red arrow pseudo element '::before' is partially cut off outside its container '.MuiPaper-root'. I need the arrow to remain visible, any suggestions on how to fix this? Here is the relevant code snippet and ...

When using position:sticky, the overflow:auto behavior may not function as intended

My Bootstrap table has the class "table-responsive," which automatically sets overflow-x to auto when the table is too wide for the screen. In addition, I've applied the class "sticky-top" to the th elements in order to make them sticky within the ta ...

The CSS Validator does not recognize the CSS pointer-events and appearance properties

I'm a CSS beginner who recently created an app. I've encountered some errors and warnings when validating my CSS code: https://i.stack.imgur.com/g4MUz.png https://i.stack.imgur.com/Es1DE.png Could someone kindly explain these errors and warnin ...

Using Font Awesome icons instead of markers in Leaflet

Within this code snippet, I initially utilized data[key].category to represent the corresponding icon as a marker. However, my intention is to switch to Font Awesome icons for a more lightweight runtime experience in instances where multiple icons may ne ...

Converting a CSS Submenu from Horizontal to Vertical Orientation

Below is the current code snippet for my menu navigation bar: To access my live blog, please click on this link: www.4time2fun.com <div id="topmenu"> <div id="navigation"> <ul class="categories"> <li class="articles"> <a href ...

Php/JavaScript Error: Identifier Not Found

I've double-checked my code multiple times, but it still doesn't seem to be working properly. When the PHP runs, the browser console displays the following error: Uncaught SyntaxError: Unexpected identifier. I'm not sure if this is a si ...

Looking to make changes to the updateActivePagerLink setting in JQuery Cycle?

I'm in the process of developing a basic slideshow with 3 images, and I am relatively new to Jquery and Cycle. The slideshow is functioning properly, and the 3 pager links are also functional. The only remaining task for me is to implement "activeSli ...

What could be causing my tabs (such as HOME, ABOUT ME..) not displaying the correct paragraph or section content?

I have set up navigation tabs on my website using anchor tags, but they are currently not linked to any specific paragraphs. I want the corresponding paragraph to be displayed when a tab is clicked, but I'm unsure how to add this functionality using j ...

Differences in Cross-Browser Styling for ListView Item Templates

I'm following up on my previous query regarding ListView's ItemTemplate table styling. I am still working on achieving the desired look for the ItemTemplate: ______________________________________________ | |___________Title_______ ...