Tips for inserting a placeholder into a form input field

I am currently working on developing a form displayed in this fiddle. My goal is to fit an entire placeholder text into the form.

Here is the HTML I've used to create a compact input form:

<div class="container text-center ">
   <div class="form-group">
      <label class="ml-2" style="width:100%;text-align:left;" for="inputAddress">Hello World</label>
      <input type="text" class="form-control" id="inputAddress" placeholder="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.">
   </div>
</div>


Issue at Hand:

I am uncertain about the modifications required in the fiddle to display the complete placeholder text. Currently, I can only view a few words (not the entire statement) as illustrated in the following image:


https://i.sstatic.net/4F6gq.png

htmlcssformsbootstrap-4placeholder

Answer №2

Consider using a textarea instead of an input for a different user experience.

Answer №3

This issue is not related to Bootstrap, but you can address it by utilizing CSS3 -placeholder in the following manner...

http://jsfiddle.net/navcLefq/1/

::-webkit-input-placeholder {
  white-space:pre-line;  
  position:relative;
}
::-moz-placeholder {
  white-space:pre-line;  
  position:relative;

}
:-ms-input-placeholder {
  white-space:pre-line;  
  position:relative;
}
:-moz-placeholder {
  white-space:pre-line;  
  position:relative;
}

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 animation.width() in Javascript to create a countdown

Currently, I am working on creating a visual countdown for my users to indicate when an animation will finish. The code snippet below shows my initial attempt: function setClassAndFire(){ timer = setInterval(function () { t--; ...

javascriptcssanimationcountdown

Struggling with React integration of AdminLTE3 sidebar treeview?

I have a requirement to create a React sidebar with a category 'Staff' that, when clicked, reveals three subordinate categories. Below is the code snippet: import React, { Component } from "react"; export default class Sidebar extends Componen ...

javascripthtmlreactjsbootstrap-4adminlte

Prevent Google Autofill from replacing current values in fields of a react form

When using a simple form in React within a modal, I encountered an issue with autofill functionality. If a user uses autofill for one field, such as the email field, it also updates other fields - including ones that have already been manually filled out. ...

reactjsformsautofillreact-jsonschema-forms

Changing the type of value in a React select onChange

<Select options={options} value={selectedBusinessList} isMulti placeholder="Select Business" onChange={(value: any) => setSelectedBusinessList(value)} onInputChange={query => { if ...

javascripthtmlreactjstypescriptreact-select

Modifying the background color of a specific section on a Bootstrap website

If you visit a bootstrap website like www.teachyourselfpython.com, you will notice that the welcome and resources sections have a white background color. I've been trying to figure out how to change this white background to a light grey specifically f ...

colorsbackgroundbootstrap-4sections

Submitting numerous data fields using a post AJAX call

I have roughly 143 form fields including text, textarea, and select options that I need to send via an AJAX post request. Is there a way to achieve this efficiently without manually adding each field to the query? Here is how I've set things up: Usi ...

phpjqueryhtmlajaxpost

Add the output of an SQL query to an HTML table using Powershell

I have multiple databases from various SQL Servers. I am attempting to output SQL data to an HTML table using Powershell from these different databases/SQL Servers, and then send it via email. Although my current script is functioning, it generates multip ...

htmlsql-serverwindowspowershellautomation

Utilizing jQuery to dynamically load CSS files on a webpage

For my website, I have implemented 4 different .css files to handle various screen resolutions. Here is the innovative jquery code I've developed to dynamically load these files based on the width of the screen. <link id="size-stylesheet" rel="st ...

jqueryhtmlcss

Can passing parameters between nested map functions cause any issues?

While attempting to navigate to a page in reactjs and pass parameters using the useNavigate hook, I encounter an unexpected token error as soon as I include the navigation within the anchor tag. <a onClick={() ={ ...

javascripthtmlreactjs

Collaboration of Bootstrap components

I am facing an issue with two divs that are supposed to be displayed side by side in a normal browser. However, when the browser window is resized, the first div loses its height and the second div overlaps into it. I attempted to set the body's min h ...

htmlcsstwitter-bootstrap

When I press the button, a model popup will display the complete information

How can I display full information on a model popup when clicking a button? <button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModal" > <i class="glyphicon glyphicon-zoom-in"></i> </button>< ...

phphtmlsqlmodelpopup

Trying to locate the subsequent div element following the current one

Here is an example of some HTML code: <div style="display: inline-block; position: absolute; top: 84px; bottom: auto; left: 5px; right: auto; width: auto; height: auto; max-width: none; max-height: none;" _afrc="2 1 8 1 start top><strong>CRED ...

javahtmlseleniumxpathselenium-webdriver

The div's height is failing to adjust based on the content it contains

My div with the class .list-holder in the header is not adjusting its size based on the content within the div. When I increase the padding of the list items, the content overflows outside the div. I have included the Bootstrap CDN. .list-holder { ...

htmlcssbootstrap-4

Flip elements in jQuery that are overlapping other elements following them

Utilizing the jQuery flip plugin to create image flip animations within an ejs file in a Node environment. The issue arises where any element positioned below the flip element ends up overlapping with it, causing visual discrepancies. Here is a simple co ...

jqueryhtmlnode.jsejs

What is the best location to include my JavaScript code in WordPress?

Alright, so I've got this world map on one of my WordPress pages and here's an example of the code: <area onmousedown="modifyImage('world_map_01', './images/map/asia.jpg')" onmouseout="modifyImage('world_map_01', ...

javascripthtmlwordpress

Adjust the column sequence in Bootstrap for mobile devices within a loop

I am facing a challenge with changing the column order in Bootstrap for mobile devices. The .col-order doesn't seem to work properly because it is inside a loop. Currently, I have $loop->iteration set up to display different backgrounds on columns ...

laravelbootstrap-4

Showing options in a menu to choose from

I'm currently working on implementing a dropdown menu for a news website. When the user selects '1' from the dropdown list, the page should display content corresponding to that selection. If the user selects '2', the page ...

javascripthtml

What is the most concise way to write this Xpath?

How can I retrieve the attribute value of an element using an absolute path like this: //*[@id="main"]/div[3]/div/div/div[3]/div[23]/div/div/div[1]/div/div/span/img I would like to know how to write code in relative xpath. Can you provide guidance on that ...

pythonhtmlselenium

Using regular expressions to extract URLs from code in Python

My research involves a dataset of newspaper article links, but I've run into an issue. The links in the dataset all end with .ece extension, which is causing problems due to some API restrictions. http://www.telegraaf.nl/telesport/voetbal/buitenlands ...

pythonhtmlregexxpath

Choosing an HTML element based on its specific class is a breeze with these simple steps

Looking to add some CSS styles to a tag that has a particular class? One example is selecting the article tag with the news class. <article class="news"> <div>some content</div> </article> ...

htmlcss