What is the best way to position a label beneath a textbox?

Hello everyone, I am currently working on a form within an asp.net core solution and facing some issues with my CSS styling.

Whenever I click the submit button with empty input fields, it validates and displays an error message; however, this action causes the size of the input fields to change. How can I rearrange these labels to appear below my text boxes?

<label asp-for="CxP_NroControl" class="control-label"></label>
<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text">
            <i class="fas fa-paragraph"></i>
        </span>
    </div>
    <input asp-for="CxP_NroControl" class="form-control" />
    <span asp-validation-for="CxP_NroControl" class="text-danger"></span>
</div>

<label asp-for="CxP_NroFactura" class="control-label"></label>
<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text">
            <i class="fas fa-paragraph"></i>
        </span>
    </div>
    <input asp-for="CxP_NroFactura" class="form-control" />
    <span asp-validation-for="CxP_NroFactura" class="text-danger"></span>
</div>

https://i.sstatic.net/MGinf.png

Answer №1

To achieve the desired outcome, use the CSS code below:

span.text-danger {
    display:block;
}

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

Using a background image in a PyQt4 QLabel

After making modifications to a simple countdown timer found here, I am now trying to add a background image behind the countdown timer. Does anyone have suggestions on how to accomplish this? #!/usr/bin/python import sys from PyQt4.QtCore import Qt, ...

Can one look through a div to the one beneath it by moving the cursor?

Hey there! I have a unique question for you. I've been trying to achieve a specific effect where two divs are stacked on top of each other, and the content of the lower div is only revealed in a certain area around the cursor. Is it possible to make o ...

Design the border of the highlighted section within the table using CSS

Is there a way to access the edge (top, left, right, bottom) width css for a selectable table using jQuery UI selectable, or do I need to use JavaScript? Update: By "accessing the edge," I mean creating a border around a selected area in a table (selectin ...

How to ensure HTML elements are styled to occupy the full width of their parent container while respecting the minimum width requirement

Is there a way to make HTML elements have a width ranging from 150px to 200px while filling up 100% of their parent's width? Check out Image 1: https://i.sstatic.net/nYNGp.jpg And here is Image 2 (after resizing the window): https://i.sstatic.net/ ...

Creating visually appealing emails can be a breeze with the help of freemarker, spring, and outlook

I've been facing challenges with email templates and images for a while now. Although I have managed to get the images to display in the email, they are not taking into account the CSS. Backend/Spring : This is a basic Spring service used for sendin ...

Concealing content that exists outside of its designated tag, excluding any images within the corresponding parent tag

Here is the HTML code that I am working with: <span class="wrapper"> <img src="..." /> Some text! </span> I need to figure out a way to conceal the text within the span element, without affecting the visibility of the image, especia ...

I am looking to upload a text file into a Javascript program in order to display the data from the file in a table format

As I venture into the world of programming, a new assignment has come my way. I have been given this txt file: nombre="Mario"; apellido="Atencio"; cedula="8-782-2289"; telefono="233-7867"; correo="<a href="/c ...

Identify the specific IP address being utilized in an ASP.NET website that has multiple bindings

I currently have an ASP.NET application hosted in IIS 7 with two HTTP bindings on port 80, each assigned to a different IP address. This web server is located behind a load balancer that can direct traffic to the web server using either of the IP addresse ...

Excessive Text Overflow in HTML Input Placeholder

<input class="form-control" style="width: 15rem; height: 15rem;" v-model="formData.booking_code" placeholder="Enter Booking Code, e.g. XYBJLL" /> I am facing an issue where the placeholder text ...

Issue with AngularJS pagination: unable to detect the current page number

I am currently developing a compact application that showcases a JSON object of "users" in an HTML5 table. The application is built using Bootstrap 3 and AngularJS, and I have the intention to implement pagination for this table. Instead of having an arra ...

"Perfectly Centered: Aligning Vertically and Hor

My goal is to center a box vertically and horizontally, but I'm struggling to get it just right: HTML: <div id="wrapper"> <header> <div id="logoWrapper"> <div class="logo">Logo Here </di ...

Center-aligned Bootstrap column with a width of 50% and centered vertically

I am looking to have images and videos displayed side by side on my webpage. The code below functions properly, however there is an issue with the alignment. While the horizontal center alignment is correct, the video and images are not centered vertically ...

What is the process for determining the area of the section?

Take a look at this page as an example - scrolling down on responsive devices reveals related navigation areas which I aim to change with scrollspy (affix fixed navigation). Having a bootstrap navbar, when on the corresponding section of the navbar while u ...

The functionality of exporting a grid to Excel is not compatible with asp.net

I am facing an issue with a simple program that has a button called 'btnExportToExcel'. When I click this button, no response is shown. Upon debugging the code of this button, it executes all lines and shows the form after clicking the button for ...

The app was rejected from the Play Store due to a breach of section 4.4 in the Developer Distribution Agreement

Just got an email notification that my application submission, Chami Browser, has been rejected due to violation of section 4.4 of the Developer Distribution Agreement. The reason for rejection is accessing YouTube videos in violation of their Terms of Se ...

Combining and dividing a caret button: A Bootstrap approach

The title I chose may not be very clear, but I struggled to find the right words. Currently, I have a vertical navigation bar with a small caret next to the text. When clicked, the button expands to display its contents. In the image above, you can see th ...

Arrange list items in alignment without the need for additional CSS (bootstrap) styling

<div class="card-body p-0"> <ul class="list-group list-group-flush"> <li class="list-group-item d-flex justify-content-between" th:each="extraConfig : ${extraConfigsPage.content}"> ...

Utilizing Ajax to update the login form without reloading the page and displaying any errors

I have created a login form that utilizes ajax to handle login errors such as "incorrect password" from my login.php file. Instead of reloading a new page with the error message, it now displays the errors on the same login form, which is working perfectly ...

Incorporate a tall button on the right edge of the division

I have successfully implemented a sidebar with the ability to hide or display it using this link. Now, I am looking to add a clickable bar on the right side of the div that can also trigger the hide/show functionality. After experimenting, I discovered th ...

Issues with absolutely positioned slideshows

Currently, I am attempting to design a slideshow using absolute positioning to layer images on top of each other. However, I am encountering a problem where the text below the slideshow is also being stacked on top of the pictures. I have tried enclosing t ...