How to prevent labels from overlapping textboxes when the labels are lengthy using CSS

I am having an issue with an asp control that renders as a text area. I have applied some CSS to style it, but I am facing a problem where a long label is overlapping the textbox. Is there any CSS I can add to push the textbox down if the label gets too long? In my form, I have set the width to 50%, which causes the text to go onto 2 lines and then overlap.

*,
*:before,
*:after {
  box-sizing: border-box;
}

#formQuestions {
  width: 500px;
  margin: 2em auto;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  font-size: 25px;
}

.float-label .control {
  float: left;
  position: relative;
  width: 100%;
  border-bottom: 1px solid #ddd;
  padding-top: 23px;
  padding-bottom: 10px;
}

.float-label .control.small {
  width: 30%;
  border-right: 1px solid #ddd;
}

.float-label .control.medium {
  width: 70%;
  padding-left: 10px;
}

.float-label .control:last-child {
  border: 0;
}

.float-label input,
.float-label textarea {
  display: block;
  width: 100%;
  border: 0;
  outline: 0;
  overflow-y: hidden;
  border: none;
  border-left: 1px solid rgb(204, 204, 204);
  border-right: 1px solid rgb(204, 204, 204);
  border-bottom: 1px solid rgb(204, 204, 204);
  overflow: auto;
}

.float-label input+label,
.float-label textarea+label {
  position: absolute;
  top: 10px;
  transition: top 0.7s ease, opacity 0.7s ease;
  opacity: 0;
  font-size: 18px;
  font-weight: 600;
  color: #ccc;
}

.float-label input:valid+label,
.float-label textarea:valid+label {
  opacity: 1;
  top: 3px;
}

.float-label input:focus+label,
.float-label textarea:focus+label {
  color: #2c8efe;
}
  

 <div id="formQuestion" class="float-label" spellcheck="false">
    <div class="divJobDescription">
        <h3><b>Job Description</b></h3>
        <div class="control">
            <textarea name="ctl00$ContentPlaceHolder1$Details1$ProjectReviewForm1$txtDeliverables$TextBox1" rows="2" cols="20" id="ctl00_ContentPlaceHolder1_Details1_ProjectReviewForm1_txtDeliverables_TextBox1" title="Please provide a meaningful description for your project, this will be used in bids" style="width: 80%;">
Data pulled from job search</textarea>
            <label for="ctl00_ContentPlaceHolder1_Details1_ProjectReviewForm1_txtDeliverables_TextBox1" id="ctl00_ContentPlaceHolder1_Details1_ProjectReviewForm1_txtDeliverables_Label1">Please provide a meaningful description for your project, this will be used in bids</label>
        </div>
    </div>

Answer №1

To improve the layout, simply remove the position:absolute; from the label and instead add the following properties to your .control div:

display: flex;
flex-flow: column-reverse wrap;

For more information, visit this link: https://example.com/#search=flex Flex is widely supported now. There may be minor issues, but not with the properties recommended.

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

Shatter a connection into pieces across various lines

Looking for a solution to displaying a long link in its entirety without overflowing? Seeking advice on how to wrap the text instead of having it overflow? Let me know your thoughts! ...

Is it possible to assign a class to the initial word within a designated class?

How can I customize the first and second word of a specific class in my code? This is an example of my current code: <h2 class="content-heading">Latest News</h2> I would like to achieve something similar to this: <h2 class="content-headi ...

Tips for adding CSS attributes to a <style> tag in Internet Explorer

My current issue involves an ajax web application that loads all parts on a single page, specifically index.html. The inner parts being loaded in index.html have exceeded 32 pages (html, js, css). Now I am facing difficulties with the CSS files that need ...

The removal of a JQuery element can result in causing the webpage to become unresponsive and lead to

When attempting to create a loop in JQuery to remove elements from my HTML, I encountered an issue where the function caused my browser to hang and become unresponsive. Here is the JQuery code I used: function removeElement(){ var i =0; ...

Is it acceptable to place a <figure> tag inside a <header> tag within an <article>?

Imagine having this scenario: <article> <header> <h1>Article title</h1> <p>Article kicker</p> <figure> <img class="featured-image" src="http://article.com/featured/image. ...

Creating a button that seamlessly adapts to all browsers

I am encountering an issue with the positioning of a chat button on my website. Despite my efforts, the button does not remain in the desired location across different browsers and screen resolutions. The browser zoom also causes inconsistencies in the but ...

What is the process for turning off bootstrap form validation?

I am facing an issue with utilizing the default input email validation in my development project. It seems that Bootstrap, which is being used for the website, has its own validation mechanism. Whenever I begin typing in a Bootstrap input field, an error m ...

A dynamic 3-column layout featuring a fluid design, with the middle div expanding based on the

Sorry for the vague title, I'm struggling to explain my issue clearly, so let me elaborate. I am using flexbox to create a 3-column layout and want the middle column to expand when either or both of the side panels are collapsed. Here is a screenshot ...

What is the most effective method for incorporating parameterized aesthetics using CSS in a JSP program?

I am currently working on a JSP web application without the support of any framework, unfortunately. This application is intended to serve multiple customers, each with their unique set of colors and company logos. The overall layout of the CSS will remai ...

Hover over me to see the CSS animation translate upwards until it reaches a specific point

I am new to CSS animation and I am trying to create a circle that moves from one end to the other on hover. However, I am facing an issue where the circle goes off-screen when the browser size is changed. How can I make it stop at a certain point within th ...

What causes Chrome to crash when dealing with lengthy tail files?

My objective is to display a log file in real-time using a websocket connection. However, I am facing performance issues with Chrome when the paragraph ('p') element in the HTML becomes large (about 450 lines). This is the current implementation ...

What is the best way to show a left and right arrow on a mobile website page?

I'm experiencing a strange issue with my webpage, specifically a post in Wordpress. When I try to insert the left right arrow character (U+2194) either by copying from a character map or using the html code, I end up with an icon instead of the actual ...

What is the method for shortening the sizable text "Hereisthelargetextbreakwithphp" to "Hereisthelarge..." using PHP?

Modify the large text "Hereisthelargetextbreakwithphp" to "Hereisthelarge..." $string = "Hereisthelargetextbreakwithphp"; $string = strip_tags($string); if (strlen($string) > 21) { $stringCut = substr($string, 0, 21); echo $string = substr($str ...

Leveraging the Scroll feature in Bootstrap for smooth scrolling

Seeking assistance with implementing scroll in Bootstrap 5 on my child component (ProductList.vue). Can anyone guide me on how to integrate the code? I have been searching for a solution without success. Below is the Bootstrap 5 code on the child component ...

In Internet Explorer 9, the cursor unexpectedly moves up above the element

Within my MVC3 application, I have implemented a feature to change the cursor when hovering over an element. Below is the JavaScript code that accomplishes this: $('#print').hover(function () { var cursorUrl = 'url(@Url.Content("~/Cont ...

Navigate through the list of options by scrolling and selecting each one until the desired element is

Hey, I've got this AngularJs directive that selects an item based on the "key-pressed" event, and it's working perfectly. The issue arises when there is a scroll bar since the elements get hidden, making it difficult for me to see them. You can ...

Adjusting Image Size based on Window Width for Internet Explorer

Based on the provided code snippet <style> .x{ background: url('img.jpg') no-repeat; background-size: contain; height: 100%; } </style> <div class="x"></div> It is functioning correctly in Chrome and Firef ...

Modifying the appearance of a text area through the adjustment of a single file

I am in the process of creating a unique code box style that I frequently update to keep it fresh. My goal is to have all the script external so that editing one file will automatically update all code boxes, eliminating the need to edit each one individua ...

How can I change the padding that is being inherited from "@ .MuiAlert-icon"?

Is there a method to override the padding inherited from "@ .MuiAlert-icon"? The Chrome inspector indicates that the current padding is set to 7px. .MuiAlert-icon { display: flex; opacity: 0.9; padding: 7px 0; font-size: 22px; ...

Styling containers with Pandoc

Currently, I am utilizing Pandoc for the purpose of transforming Pandoc Markdown documents into HTML5 documents. Within my md input, I incorporate custom divs by employing a special Pandoc syntax, like so: ::: Resources A nice document Informative website ...