What is the best way to set a fixed placeholder at the upper left corner of the input field?

I'm working on customizing an Input component from antd. My goal is to keep the placeholder text constant, small, and positioned in the top left corner of the component.

So far, I've successfully moved the placeholder to the top left corner, but I'm having trouble keeping it a consistent size:

const MyInput = styled(Input)`
  ::placeholder {
    font-size: 14px;
    width: 200px;
    position: absolute;
    pointer-events: none;
    left: 4px;
    top: 0px;
  }
  height: 50px;
`;

<MyInput style={{ width: "50vw" }} placeholder={"name here"} />
cssreactjsantdstyled-componentsplaceholder

Answer №1

I have created something using absolute positioning, although I'm not entirely sure if it meets your requirements.

       .inputContainer {
            width:200px;
        }
        .inputContainer input {
            color: black;
            width:200px;
            padding-top:15px;
            height:25px;
            border:1px solid black;
            border-radius:5px
        }
        .soCalledPlaceholder {
            color: gray;
            position: absolute;
            left: 10px;
            top: 10px;
        }
 <div class="inputContainer">
        <input type="text">
        <div class="soCalledPlaceholder">
            Iam a Placeholder
        </div>
    </div>

Answer №2

Upon further investigation, I realized that @Terry was correct in suggesting to use a label tag instead of a placeholder,

After browsing through Stack Overflow, I came across a helpful post (Floating labels using React and Ant Design)

I decided to tweak the code a bit and came up with this solution -

const FloatLabel = ({ children, labelText }) => {
  const labelStyle = {
top: 2,
fontSize: 10,
fontWeight: "normal",
position: "absolute",
pointerEvents: "none",
left: 12,
transition: "0.2s ease all"
};

 return (
<div style={{ position: "relative", marginBottom: 12 }}>
  {children}
  <label style={labelStyle}>{labelText}</label>
</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

After deploying to Firebase, animations suddenly cease to function

After running npm run-script build and deploying my React app to Firebase hosting with firebase deploy, I encountered an issue where my animations stopped working. I'm puzzled as to why this is happening, especially since I've included keyframes ...

javascriptcssnpmweb-deploymentfirebase-hosting

Is it possible to alter the page color using radio buttons and Vue.js?

How can I implement a feature to allow users to change the page color using radio buttons in Vue.js? This is what I have so far: JavaScript var theme = new Vue({ el: '#theme', data: { picked: '' } }) HTML <div ...

javascripthtmlcssvue.js

What is the best way to examine a React component that integrates the useHistory hook from React Hooks using Enzyme?

I encountered an issue while testing a React component with Enzyme. Everything was fine until we switched the component to hooks. Now, I'm facing an error message that says, "Error: Uncaught [TypeError: Cannot read property 'history' of unde ...

reactjsreact-hooksenzyme

404 Error: The POST Route for Express, React, and Node.js Cannot Be Located

I encountered an issue while trying to upload a file through a post request, resulting in the following error: POST http://localhost:8080/api/files 404 (Not found). The URL of the page I'm attempting to upload the file from is http://localhost:808 ...

node.jsreactjsexpress

Text wrapped automatically to display multiple lines with spacing between each highlighted line

Question about CSS formatting and spacing. I need to automatically break sentences into new lines based on the width of the container. For example, a sentence like: This is a sentence should be displayed as: This is<br>a sentence I am trying ...

htmlcssfrontend

Is it possible to retrieve the ID instead of the country name in the autocomplete feature?

I implemented Autocomplete from @Mui in my component const Profile = () => { const { register, handleSubmit, setValue, formState: { errors }, } = useForm({}); const [countries, setCountries] = useState([]); const submit = asyn ...

javascriptreactjsmaterial-uifrontend

A guide on incorporating translated routes (by translating the route paths) within a NextJS application

I am currently working on a NextJS web application that will be deployed in multiple countries, with each deployment requiring changes only to the env.country variables. However, I am facing an issue with routes that have significant slugs needing translat ...

reactjsnext.js

Encountering difficulties in importing TailwindCSS

Having trouble importing TailwindCSS and applying CSS? Here's how it's included in my package.json: "devDependencies": { "autoprefixer": "^10.2.4", "css-loader": "^5.1.1", "postc ...

javascriptreactjstailwind-css

What is the best way to implement custom pagination in Material UI?

<Pagination count={35} variant="outlined" shape="rounded" color="primary"/> Although the default background and text colors are set, I am unable to customize them. I have attempted to change the colors without success. ...

reactjsnext.jsmaterial-ui

What is the method for storing elements in localStorage within a ReactJs application?

Currently, I am working on learning react-redux and coding a new project. My goal is to implement a feature where clicking the Add Favorites button will push all column data to local storage. Despite reading numerous articles, none of them have provided ...

javascriptreactjsreduxreact-reduxlocal-storage

An issue has been detected in the constants.json file located in the constants-browserify

I organized my folders into client-side and server-side categories, but I failed to work from a parent folder perspective. Now, as I attempt to deploy to Heroku, I realize that I need one main folder for the deployment process. To address this issue, I dec ...

javascriptreactjsnpmwebpackredux

I am looking to dynamically alter the CSS background URL using JavaScript

Currently, I am looking to update the background image url using JavaScript. Most tutorials I've come across involve having the image downloaded on the desktop and then providing its path. However, in my scenario, the user will input an image link whi ...

javascripthtmlcss

What is the best way to customize a hyperlink to match the current webpage design?

I have created a navigation bar at the top of my website screen. I want to implement a feature where the word corresponding to the current page is highlighted. For example, if I am on the "Contact" page, the word "Contact" should be highlighted, and so o ...

htmlcss

Place the second division beneath the first within a single navigation bar that adjusts accordingly to all screen sizes

I am experiencing an issue with the layout of my page that has 2 divs within one nav element. When the screen width is greater than 1024px, everything looks fine. However, when I reduce the width to less than 768px, the two divs merge into one line instead ...

javascripthtmlcss

Is it possible to make the li elements within my ul list display on multiple lines to be more responsive?

My credit card icons are contained within a ul. I have used the properties background-image and display:inline for the LIs, which display nicely on larger screens. Unfortunately, when viewed on mobile devices, the icons are cut off. My question is whether ...

htmlcsshtml-listsresponsive

Align the last column to the right side using HTML

I am facing an issue with my current project. I have a page that displays a list of posts in a CSS grid. The last two columns of the grid are supposed to be right-aligned, but for some reason, it's not working as expected. Here is the snippet of the c ...

htmlcssangular

What is the best way to apply a datepicker to all textboxes with a specific class using jQuery?

I have enclosed multiple fields within div elements in order to specify them with a datepicker for a better user experience. For example: <div class="need-date" > <label>Appointment Date</label> <input id="id_appointment_date" ty ...

javascriptjqueryhtmlcssdatepicker

Are there alternative methods for incorporating react-multi-carousel in a project utilizing NEXT.js and React/Typescript?

I installed the react-multi-carousel module and configured a simple carousel, but it's not functioning properly. The issue seems to be related to the absence of <li> tags. Here is the HTML that was rendered: <ul class="react-multi-caro ...

reactjstypescriptnext.jsreact-multi-carousel

Is there a way to navigate to the next or previous image in a lightbox by using ev.target.nextElementSibling or ev.target.prevElementSibling?

I am new to the world of web development Currently, I'm facing an issue with my lightbox feature. I want to navigate between images by using ev.target.nextElementSibling and ev.target.prevElementSibling when clicking on the next/previous arrow.png ic ...

javascripthtmlcss

Animating transitions in a Vuetify data table

I am in the process of animating the data on a Vuetify data table. My objective is to make the current data slide out to the right when Next is clicked, and then have the new data slide in from the left. The current result I am getting can be viewed here: ...

cssvue.jsvuetify.js