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 in my input field is too long and it overflows the box, causing it to get cut off.

Is there a way to make the placeholder text automatically continue to the next line when it reaches the edge of the input field?

I would prefer not to use a text area as it can't be vertically aligned like an input field.

javascripthtmlcssvue.js

Answer №1

To position a div or span element over the input field, use this code snippet. The element will display the placeholder text and automatically break into lines if needed.

.input-wrapper {
    position: relative;
    width: 15rem;
    height: 3rem;
}

.form-control {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    background: transparent;
}

.placeholder {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    color: #aaa; /* Placeholder text color */
    padding: 0.5rem;
    pointer-events: none;
    white-space: pre-wrap; /* Allows the text to wrap */
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center; /* Vertically center */
}
<div class="input-wrapper">
    <input
        class="form-control"
        style="width: 15rem; height: 3rem;"
        v-model="formData.booking_code"
        id="bookingCodeInput"
    />
    <span class="placeholder">Masukkan Kode Booking, contoh: XYBJLL</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

The link appears to be broken when trying to access the notFound component in Next.js version 13

In my Next.js 13.4 app directory, I added a not-found.tsx component that functions correctly when entering the wrong route: import Link from 'next/link' function NotFound() { return ( <section> 404, page not found ...

javascriptnext.js

Retrieving text data from the JSON response received from the Aeris API

I am attempting to showcase the word "General" text on the HTML page using data from the API found under details.risk.type. The JSON Response Is As Follows... { "success": true, "error": null, "response": [ ...

javascripthtmljsonapisdk

AngularJS Login Popup with SpringSecurity

I have successfully integrated spring security with my AngularJS webpage utilizing Rest API. However, I am facing an issue where every time I attempt to log in using the rest api from my customized login page, it prompts me for the login credentials in a p ...

javascriptjavaangularjsspringspring-security

Tips for deactivating dropdown values based on the selection of another dropdown

There are two dropdown menus known as minimum and maximum, each containing numbers from 1 to 25. If a value is selected from the minimum dropdown (e.g. 4), the maximum dropdown should only allow values that are equal to or greater than the selected value ...

javascriptjqueryhtmlhtml-select

Leverage Bootstrap to manage multiple tab panels with one tab navigation system

Is there a way to control two different tab contents with a single tab navigation in Bootstrap 4? In Bootstrap 3, I used comma separated data targets for achieving this (like in this example: ). However, in Bootstrap 4, this method no longer works for ta ...

jquerycsstwitter-bootstrapbootstrap-4bootstrap-5

Endless cycle of invoking Angular 16 function

I am currently facing an issue with my Angular app that uses AWS Amplify. When calling a function upon user authentication, everything works smoothly except for the first time login scenario. After signing in with temporary credentials and updating the pas ...

htmlangulartypescriptaws-amplify

The Bootstrap Carousel is failing to respond as expected

Having some trouble incorporating a carousel on my landing page. I can see the first image, but the carousel isn't sliding to the next one. I copied the template from bootstrap-carousel, but even the data-bs-interval attribute isn't responding. M ...

htmlcsscarouselbootstrap-5

Contrasts in padding arrangements between Firefox and other browsers

Take a look at the following code snippet: https://jsfiddle.net/a13nd32u/3/ #post_part{display:inline;padding:6px 9px;float:right;font-size:15px} select{width:80px;height:21px;padding-right:10px;display:inline} #button1{display:inline;padding-left:10px} ...

htmlcssuser-interfacealignment

Searching through the use of autocomplete with alternative parameters

In the example below, - https://codesandbox.io/s/g5ucdj?file=/demo.tsx I am aiming to achieve a functionality where, with an array like this - const top100Films = [ { title: 'The Shawshank Redemption', year: 1994 }, { title: 'The Godfa ...

javascriptjqueryreactjsmaterial-uiautocomplete

Storing HTML source code as a string

Being German, I apologize for my imperfect English ;) I am currently developing an app for my school that sends students notifications when a class is cancelled. The school updates the substitute plan on their website, which is a .htm file located at Sinc ...

androidhtmlstring

Randomly relocating array elements into separate arrays

My task involves an array of numbers ranging from 1 to 60. var originalArray = [1, 2, 3, 4 .... 58, 59, 60] // etc The challenge is to split these numbers randomly into a specified number of arrays based on another number between 2 and 4. It is important ...

javascriptarraysrandom

Should one prioritize learning TypeScript over diving into Angular2?

Should I prioritize learning TypeScript before diving into AngularJS 2? ...

javascriptangularjstypescript

Retrieve language translations using Vue from an external API

Utilizing vue along with I18n for translations has been smooth sailing when hardcoded: import { useI18n } from 'vue-i18n' const { locale, t } = useI18n({ useScope: 'global' }) Extracting values from a json file in the template: <di ...

vue.jsvue-i18nlanguage-translation

Error message: The export for 'Navigate' is not available in the 'react-router-dom' package

Hey everyone, I'm in need of some assistance dealing with this error I've encountered: "Attempted import error: 'Navigate' is not exported from 'react-router-dom'". My version of react-router-dom is 4.1.1 and I would prefer no ...

javascriptreactjsreact-routerreact-dom

Implementing user authentication in Node.js using the Passport library alongside Express framework

An interesting article caught my attention on Scotch.io: https://scotch.io/tutorials/easy-node-authentication-linking-all-accounts-together Although it was published back in January 2014, Chris demonstrates how to check the value of req.user within the p ...

javascriptnode.jsexpresspassport.js

Express is throwing a TypeError because it is unable to access the property 'app', which is undefined

On my nodejs server running the express framework, I have been encountering a random error when making requests. The error occurs unpredictably, usually appearing on the first request and not on subsequent ones. It's challenging for me to identify the ...

javascriptnode.jsexpress

Utilizing JavaScript along with ASP.NET web user controls

My web user control generates specific HTML code on the client side. I am trying to reference a particular RadioButton control using JavaScript. The issue is that the RadioButton ID is dynamically generated by ASP.NET, for example, I assign the ID as 1_R ...

asp.netjavascriptjqueryweb-user-controls

Using vuex-class to interact with Vuex in non-Vue components

Is it possible to access Vuex outside of a Vue component using vuex-class? In a typical scenario, the process is quite straightforward: // some JS file import store from './../store'; // path to Vuex store store.commit('ux/mutationName&ap ...

javascripttypescriptvue.jsvuex

Incorporate division elements around section components

I currently have three sections structured like this: <section class="rbs-section" id="rbi_S_12466479" name="world1"> <p>Hello World1</p> </section> <section class="rbs-section" id="rbi_S_12466477" name="world2"> <p>He ...

javascriptjqueryhtmlembed

Script executing single run only

I'm currently working on a side menu that slides open and closed from the left with the press of a button. I have successfully implemented the CSS and HTML code, but I am facing issues with the JavaScript. The functionality works flawlessly at first: ...

javascriptjquery