When the text input is selected, automatically scroll to the bottom

I found a codepen example by Chris Coyer and decided to fork it. My goal is to make the label move to the top instead of staying at the bottom, as in his original design.

However, I am facing an issue with getting the cursor to move to the bottom when typing, which results in the text overwriting the label. The CSS code snippet below is supposed to move the label but it's not working as expected:

form.go-bottom { input { padding: 12px 12px 12px 12px; } label { top: 0; bottom: 0; left: 0; width: 100%; } input:focus { padding: 4px 6px 20px 6px; } input:focus + label { top: 100%; margin-top: -36px; } }

I have tried adjusting the padding settings for the input element but haven't been able to change the cursor position properly. If anyone can provide guidance on how to resolve this solely using CSS/SASS without any JavaScript, I would greatly appreciate it.

Additionally, if someone can help me change the transition animation from top to bottom to bottom to top, that would be fantastic!

htmlcsssass

Answer №1

One solution to improve the input field's appearance when focused is by adjusting the padding. Consider increasing the top padding and decreasing the bottom padding.

input:focus {
    padding: 17px 6px 4px 6px;
}

It might also be beneficial to experiment with the overall padding if you decide to go ahead with this approach, especially since the input fields can feel cluttered with two lines of text.

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

Changing background color during drag and drop in Angular 2: A step-by-step guide

A drag and drop container has been created using Angular 2 typescript. The goal is to alter the background color of the drag & drop container while dragging a file into it. Typescript: @HostListener('dragover', ['$event']) public onDr ...

cssangulartypescriptdrag-and-dropangular2-hostbinding

Unable to retrieve the iframe variable from the parent as it returns undefined

I am trying to retrieve a variable within an iframe from the parent index.html. Here is the index.html code: <!doctype html> <html lang="en-us> <head> <title>Test</title> </head> <body> <p>Test& ...

javascripthtmliframe

Setting up pagination for displaying data from a database on the client-side: a step-by-step guide

Greetings to all my fellow programmers on Stack Overflow! I am currently in the process of developing an e-commerce application using JSP. The products for the application are stored in a server-side database (Mysql) within a table named product. The prod ...

jqueryhtmldatabasepaginationclient-server

Tips for customizing your MUI slider design

import * as React from "react"; import Box from "@mui/material/Box"; import Slider from "@mui/material/Slider"; function valuetext(value) { return `${value}°C`; } export default function RangeSlider() { const [value, se ...

javascriptcssreactjsmaterial-ui

Implementing PHP code to prevent the submission of forms with invalid inputs

When working on a form validation process in PHP, I encountered a challenge in preventing the form from being submitted to the database when there are errors in the input fields. While I was able to display error messages for invalid inputs upon submitti ...

phphtmlvalidation

Once the Json content is loaded into the array, proceed to append

I am facing an issue with my ajax function that loads thumbnails. The function is being called by another ajax function, and the parameter is retrieved from there in the loop. I have attempted to wait for the ajax call to finish using .done and .ajaxCompl ...

jqueryhtmljson

Modifying the state object in ReactJS: A step-by-step guide on updating values

Below my query and explanation, you will find all the code. I am currently attempting to update the state in a grandparent class. This is necessary due to file-related reasons, and I am using Material-UI for text boxes. Additionally, I am implementing Red ...

javascripthtmlreactjsmaterial-ui

Unusual behavior observed in the angular-daterangepicker module

I'm currently working on an Angularjs application and utilizing the angular-daterangepicker to input dates into a table. Upon the initial load of the app, the startDate is automatically set to the current day and the endDate is set to 4 days later. T ...

jqueryhtmlangularjsangular-daterangepicker

What is the best way to modify the CSS class of a particular textbox within a gridview using C# in ASP.NET?

I need assistance with removing and adding a CssClass to a specific textbox within a gridview. I have attempted the following code but it does not update the css for the textbox. Here is the CSS in my .aspx page: <style type="text/css"> .erroram ...

c#htmlasp.netcssgridview

Unexpected Results from Div Positioning

Here is the PHP code snippet I am working on: <?php include 'header-adminpanel.php'; ?> <div class="container"> <div class="body-content"> <div class="side-left"><?php include 'adminproduct_sidebar.ph ...

phphtmlcss

Modify the color scheme of an HTML webpage

Looking to enhance my HTML page with a new feature. The page is responsive and currently using Bootstrap CSS and JS. My goal is to allow users to change the color of the page dynamically by selecting a background or text color. Check out this example link ...

javascriptjqueryhtmlcssplugins

Creating a WordPress Infographic: How to Design a "Wide" Graphic

I have a question for those who are experienced with infographics. I'm in the process of getting an infographic designed for my blog and I've noticed that some websites have a feature that allows the infographic to expand to full width when you c ...

phpcsswordpress

The CSS3 :nth-child(odd) Selector is not working for either columns or rows in the selection

I am facing an issue with a table where I have used tr:nth-child(odd) to alternate row background colors. HTML /*-----------#602 SAO Styles-----------------------------*/ /*---------SAO Global------------*/ .sao-pricing-table table { border-collaps ...

htmlcss

Creating content on HTML AzureWebApp for transfer to CDS

Currently, my web app is running on azurewebsites.net. I am looking to extract data from a text field or captured photos and save it in the CDS / Dynamics 365 CE database. The website design is complete; I just need to focus on storing the data efficient ...

htmldynamics-crmazure-web-app-servicemicrosoft-dynamicscommon-data-service

Converting HTML Form Data into CSV with Multiple Rows

I currently have a form that generates a CSV file with data from select elements in the HTML form. The columns in the CSV correspond to the selected options in the form, but I need to extend this functionality to populate multiple rows in the CSV. Expecte ...

phphtmlarrayscsvforeach

What steps should I take to ensure a local HTML page retains the current section that is hidden open whenever it is reloaded?

One of the challenges I have encountered with my local HTML note-taking file is that, despite dividing it into hidden sections accessible by clicking on buttons at the top of the page, reloading the content resets it back to its default state. This means t ...

javascripthtml

Utilize style as a module in Angular

The issue at hand: Let's take a look at this project structure: /src /public /styles /general /tables.scss /secure /components /someTable1 /someTable.component.ts /someTable.component.css /someTa ...

angulartypescriptimportsassangular5

Tips for Sending <Div> Data to a Servlet

I attempted to pass the content of an entire div in a form action URL using JavaScript. However, when I try to retrieve this request parameter as a String on the servlet side, it is returning [object Object]. Below is my code for the form and JavaScript: ...

javascriptjqueryhtmlservlets

Python's selenium did not locate the specified CSS element

After transferring the code from Selenium IDE to Python, the selenium test was functioning properly except for clicking on the item and scrolling clicks smoothly on an item. Here is the HTML selenium code: <?xml version="1.0" encoding="UTF-8"?> ...

pythonhtmlcssseleniumxpath

Element that hovers and floats

Just last week, I was working on coding a custom menu bar for my blog located at . However, when it came to adding social buttons, things went awry. It seemed like a float element issue! Despite my attempts to resolve it by adjusting widths and properties, ...

htmlcss