Expanding the size of the textarea to fill the entire

Is there a way to enlarge the textarea and increase the size of the button on my webpage?
I'm aiming for a design similar to this: http://prntscr.com/bwmcf3
Here's the code snippet I'm currently using:

<BODY>
<form method="post" action="query.php">
<textarea type="text" size="50" name="txtarea" maxlength="1000000" style="font-family: Arial;font-size: 12pt;">
</textarea>
<CENTER>
<input type="submit">
</form>

If you decide to downvote this question, please provide constructive feedback on how I can improve it for future reference. Thank you.

htmlcsstextarea

Answer №1

To get the desired outcome, implement the following:

body {
  height: 100%;
}

textarea {
  width: 100%;
  height: 100vh;
}

http://codepen.io/nagasai/pen/NArRYK

For inline styling, utilize the code below

<textarea type="text"  name="txtarea" style="font-family: Arial;font-size: 12pt;width:100%;height:100vw">
</textarea>

http://codepen.io/nagasai/pen/akGmYy

Answer №2

Give this a shot:

<HTML>
<form method="post" action="query.php" style="height:100%">
<textarea type="text" size="50" name="txtarea" maxlength="1000000"style="font-family: Arial;font-size: 12pt; width:100%;height:95%">
</textarea>
<CENTER>
<input type="submit" style="height:100%; width:20%">
</form>

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 value entered in the HTML input is not being recognized by PHP

I'm facing an issue with my project (index.php), which is a HTML webpage. I am trying to use the 'include' function to bring in the header and footer (header.php, footer.php). Additionally, I want the current date to automatically populate i ...

phphtmlinclude

My attempt to reveal hidden information in my repeater using a button and JavaScript has not produced the desired results

Welcome to my first post on this forum. In the HTML code, there is a repeater containing a button shown below: <button type="button" class="btn btn-info">Contact</button> <p style="display: none" id="contact"><%# Eval("Email") %&g ...

javascripthtmlasp.netwebforms

Create unique image designs using CSS with full height and variable width

I've put a lot of effort into this website, but I'm still facing challenges with a few aspects. Here's the current setup: Top navigation bar: 68px in height, full-width, fixed at the top. Bottom navigation bar: 42px in height, full-width, ...

htmlcss

Tips for refreshing an IFrame in one fell swoop

I am currently working on a markdown editor, but I have encountered an issue with my IFrame. I am setting the source of the IFrame to about:blank in order to clear the screen, however, it does not write to the iframe again until a key is pressed. How can I ...

javascripthtmliframe

Inserting lines into the text, creating a visually appealing layout

Can a notepad design be created using CSS only? Is it feasible to include lines between text lines without using underscores? I want it to look like this example but with minimal spacing between lines and no manual insertion of span tags since the text wi ...

jqueryhtmlcss

eliminating empty space within a cell of an HTML table

My HTML table looks like this: <table width="600" cellspacing="0" cellpadding="0"> <tr> <td><img src="image.jpg" width="600" height="170" style="padding:0; margin:0;"></td> </tr> <tr> <td> <p style=" ...

htmlcssoutlook

Token-StripeError not found

Can someone help me figure out why I keep getting this error message? Error: Stripe \ Error \ InvalidRequest No such token: tok_1E6AbPFWwEbVuzsrPEO3KM3A \vendor\stripe\stripe-php\lib\ApiRequestor.php // dealing wit ...

phphtmllaravellaravel-5stripe-payments

Which is more effective: HTML5 appcache, expires headers, or localstorage?

Imagine this scenario: Your site/app can only be used online and requires an active internet connection; All files are equipped with proper expire header settings; Refresh file can be triggered using something like myFile.css?v=2 and location.reload(true ...

htmllocal-storagehtml5-appcacheexpires-header

Aligning a div beneath other divs using Bootstrap 5

My HTML code is very basic, with no CSS involved. It's supposed to show a title at the top of the page followed by some centered text. Here's what I have: <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" cl ...

htmlcsstwitter-bootstrapbootstrap-5

Instructions on utilizing the transpiled "main.js" file using gulp

As a novice in Angularjs 1.0, I encountered issues with my script and decided to use gulp to compile ec6 to ec5 by implementing the code provided below. The compilation process generated the file main.js. However, I am unsure about how to connect it when l ...

javascripthtmlangularjsasp.net-mvc-5gulp

Ways to initiate a flip motion

Looking for a way to create a flip image effect when clicked by the user. Here is the code I have so far: let img = document.querySelector('img') let div; let click = 0; img.onclick=function(){ console.log(click) if(click %2 ==0){ d ...

javascripthtmlcss

What is the best way to eliminate the background color from one span after selecting a different one?

I created a span element that changes its background color when clicked, but I want the background color to switch to the newly clicked span while removing it from the previously clicked one. Can someone help me achieve this? CSS list-sty ...

javascriptjqueryhtmlcss

The issue with jquery's marginTop functionality appears to be malfunctioning

Is there an easy way to vertically center text of unknown height within a div of known height? I've experimented with the css display: table-cell option without success, so I'm currently using jQuery to detect the height and apply a top margin if ...

jquerycsscentering

Utilizing a function argument within the :not() selector

I am currently working towards the objective of selecting all elements in my document except for those within a specific class. This is what I have come up with so far: var x = document.querySelectorAll(":not(.myParameter)"); My aim is to make 'myPa ...

javascripthtml

Unable to adjust row height within the gridview component

Below is my ASP code: <asp:GridView ID="GridView1" runat="server" AllowSorting="True" AutoGenerateEditButton="true" DataSourceID="AccessDataSource1" AutoGenerateColumns="False" DataKeyNames="ID" RowStyle-CssClass="editPhotoGridFormat" ...

asp.netcssvisual-studio-2010gridview

How to make the first item in a bootstrap 4 nav-pills full width even when justified

I'm running into an issue with the display of nav-pills on mobile devices when I set it to justified. Specifically, when viewing on an iPhone, the tabs are justified but the "It NavTab" pill appears on two lines. Is there a way to have the first nav-p ...

htmlcsstwitter-bootstrapbootstrap-4

Alternative solution to avoid conflicts with variable names in JavaScript, besides using an iframe

I am currently using the Classy library for object-oriented programming in JavaScript. In my code, I have implemented a class that handles canvas operations on a specific DIV element. However, due to some difficulties in certain parts of the code, I had t ...

javascriptjqueryhtmloopcodeigniter

Navigate back to a previous page on a PHP website

I am working on a PHP program and need help figuring out how to go from page 2 back to page 1 using a button. I tried creating a button on the second page with a value of 1, but it resulted in an error for the user. Can someone guide me on how to achieve ...

phphtmlmysqlxampp

Rectify the functionality of collapsing and expanding sections

I am utilizing the bootstrap 4 alpha 6 version in my project. On my page, I have multiple blocks that I would like to expand/collapse by clicking on a main button (with the id of 'expand-collapse'). Additionally, each block has its own individual ...

javascriptjqueryhtmltwitter-bootstraptwitter-bootstrap-4

Developing a hovercard/tooltip feature

I'm currently working on developing a hovercard feature for a social media platform I'm building. The concept involves displaying additional information about a user when their name is hovered over. The hovercard will appear with the user's ...

jqueryhtmlcssajax