Text will not align with the top left corner of the Text Box

There is an input description box on my website that has a specific height and width, along with its own unique style. Currently, the text within the box is centered, but I would like it to align to the top left corner.

Here is the HTML code:

<input id="eventDescriptionInput" placeholder="Description" />

And here is the CSS code:

#eventDescriptionInput {
padding: 10px;
width: 100%;
height: 200px;
box-sizing: border-box;
margin-bottom: 25px;
border-radius: 3px;
outline: none;
border: none;
box-shadow: 0px 0px 3px gray;
}

Answer №1

If you prefer to stick with using input over textarea, you should delete the height: 200px; and insert padding-bottom: <number>px:

#eventDescriptionInput {
padding: 10px;
width: 100%;
box-sizing: border-box;
margin-bottom: 25px;
border-radius: 3px;
outline: none;
border: none;
box-shadow: 0px 0px 3px gray;
padding-bottom: 200px; /* new line */
}

However, it is suggested to utilize textarea as recommended by another individual

Answer №2

If you're open to using tags other than the input tag, as long as the style remains consistent, I have a suggestion.

Consider using a textarea element for simplicity.

#eventDescriptionInput {
padding: 10px;
width: 100%;
height: 200px;
box-sizing: border-box;
margin-bottom: 25px;
border-radius: 3px;
outline: none;
border: none;
box-shadow: 0px 0px 3px gray;
}
<html>
<head>
</head>
<body>
<textarea id="eventDescriptionInput" placeholder="Description"></textarea>
</body>
</html>

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

Creating rounded buttons with Font Awesome icons and hover effects

I am currently working on creating buttons similar to the design shown in the image below. https://i.sstatic.net/hMqHs.png I have utilized stacked Font Awesome icons to place the icons atop a circle, resulting in this look: https://i.sstatic.net/rtEkP.p ...

Maintain the layout of HTML page while reducing the window size

My webpage is experiencing an issue. When I resize the window, the placement of all elements becomes misaligned and the layout gets distorted. ...

Problem with transitions not working properly in Vue.js.The issue

Experiencing an issue with the Vue.js transition feature. Check out this link for reference. When the transition enters, it works smoothly, but when transitioning out, it's not functioning properly. File: genetic.vue <transition name="slide-f ...

Using jQuery to create a checkbox that functions like a radio button

In my code, I have a bunch of checkbox elements placed in different containers as demonstrated below: $("input:checkbox").click(function() { var url = "http://example.com/results?&" var flag = false; var $box = $(this); var $facet = $box.val ...

Can WireMock be used to send an HTML file as a response?

Is it possible to return an HTML file as a response in WireMock and how can this be achieved? ...

Using Html Language to convert text into a clickable LINK

I need some assistance with coding a html code. Can you help me create a link from normal text in the LINK-COLUMN? Currently, it is just plain text and I want it to be a clickable link. I have been trying on my own but haven't found a solution yet. I ...

Accordion jQuery failing to display tabs

I have a question about using 2 jQuery accordions with tabs inside them. Everything seems to be working, but when I try to expand the second accordion, the two tabs inside don't render properly. I'm not sure what the issue is. Any help on this wo ...

Tips for displaying the contents of a URL within a div element

Is there a way to load a new page into a <div></div> without opening a separate tab? I tried using an iframe, but that method is not recommended and it includes scroll bars. <div id="iframeLogin"><a href="first.php" target="_self"> ...

Preventing Unwanted Scroll with jQuery

I'm currently working on a project where I have several description blocks that are meant to fade in when the corresponding image is clicked. The fading effect works fine, but there's an issue with the page scrolling up each time a new image is c ...

Display the message "currently being loaded" on a Django platform

I'm a newcomer to django and styling and I have two things I want to address. First, I have an algorithm running on the upload file that takes time to load. I want to display a loading message until the output.csv file is generated and ready for downl ...

Using Bootstrap and CSS to style a div element and fill it

I'm struggling with a div that splits in two, where I've placed an image on the left side. However, the image doesn't seem to fill the entire space and there are empty spaces on the sides. I'm using bootstrap, but any CSS solution would ...

External JavaScript file not executing defined function

My homepage includes a register form that should open when the register button is clicked. However, I am encountering an issue where the function responsible for opening the form from another JavaScript file is not being triggered. Here is the HTML code: ...

Custom HTML structure for WordPress navigation menu - WP Nav Menu

Need help creating a customized Wordpress Menu with HTML structure: <?php wp_nav_menu( array( 'theme_location' => 'global-menu' ) ); ?> The desired HTML output should resemble the following: <nav> < ...

Connecting an HTML box to a JavaScript function for the desired outcome: How to do it?

My goal is to connect the input box with id="b" (located inside the div with id="but1") with a JavaScript function that calculates values within an array. Although my junior logic review didn't detect any issues in the code, what mistakes could I have ...

Mobile-style menu with full desktop height

I am currently working on developing my first custom WordPress theme from scratch. My goal is to design a mobile-style menu that can also be displayed on desktop screens. To achieve this, I have used jQuery to implement the sliding effect. You can view a ...

Utilizing variable values in HTML and CSS to enhance a website's functionality

My current project involves modifying an HTML web resource for use in Dynamics 365. I need to replace a static URL with a dynamic value obtained via Javascript, specifically: var URL = Xrm.Page.context.getClientUrl(); There are multiple instances within ...

Utilizing Bootstrap 4 to integrate both collapsible and non-collapsible navigation elements

I am working with a bootstrap nav bar and trying to achieve a design where some menu items are collapsible while others remain visible at all times. Below is the code snippet I am using: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.co ...

Exploring the Contrasts Between HTML String and Emphasizing the Variances

Challenge Description: The task is to compare two HTML input strings with various styling elements like strong, li, ol, line-through, etc. The goal is to display the original text and the edited text in two separate boxes on the screen. Any words missing i ...

Reaching out to the Edge: Enhancing the jQuery Slider Experience

Alright, I'm really excited about using this amazing slider. What I love most is the "free mode" feature that creates this stunning sliding effect. The size and number of slides are absolutely perfect for me. But there's just one small adjustment ...

Creating the main webpage's HTML through the Codebehind feature in ASP.Net using VB

Currently, I am immersed in a recreational project aimed at enhancing my understanding of vb.net and its interconnectivity. I welcome any suggestions that could potentially enhance the efficiency of my approach! My present focus involves extracting data f ...