Maximized TextArea

Developer
Alex Vazquez
Size
2,295 Kb
Views
42,504
  1. Maximized TextArea Previews
  2. Maximized TextArea HTML Codes
  3. Maximized TextArea CSS Codes

How do I make an maximized textarea?

What is a maximized textarea? How do you make a maximized textarea? This script and codes were developed by Alex Vazquez on 14 September 2022, Wednesday.

Maximized TextArea Previews
IQ Test

Maximized TextArea - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Maximized TextArea</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h2>Textarea minified</h2>
<textarea name="comment[body]" tabindex="1" id="comment_body_440" placeholder="Leave a comment" class="js-comment-field js-size-to-fit input-with-fullscreen-icon" data-suggester="440_new_preview_suggester" style="height: 22px;"></textarea>
<h2>Textarea Maximized</h2>
<div class="fullscreen-overlay" id="fullscreen_overlay"> <div class="fullscreen-container js-fullscreen-container"> <div class="textarea-wrap"> <textarea name="fullscreen-contents" id="fullscreen-contents" placeholder="Leave a comment"></textarea> </div> </div> <div class="fullscreen-sidebar"> <!-- there should be an image here mapped to the link --> <a href="#" class="exit-fullscreen js-exit-fullscreen tooltipped leftwards" original-title="Exit Zen Mode"></a> <a href="#" class="theme-switcher js-theme-switcher tooltipped leftwards" original-title= "Switch themes"></a> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Maximized TextArea - Script Codes CSS Codes

body, input, select, textarea, button { font: 13px Helvetica, arial, freesans, clean, sans-serif; line-height: 1.4;
}
textarea { -webkit-appearance: textarea; -moz-box-sizing: border-box; -webkit-flex-direction: column; -webkit-rtl-ordering: logical; -webkit-transition: all 0.15s ease-in 0; -webkit-user-select: text; background-color: white; background-position: right center; background-repeat: no-repeat; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border-radius: 3px; border: 1px solid #ccc; box-shadow: inset 0 1px 2px rgba(0,0,0,0.075); box-sizing: border-box; color: #333; cursor: auto; min-height: 34px; outline: none; padding: 7px 8px; resize: auto; transition: all 0.15s ease-in; vertical-align: middle; white-space: pre-wrap; word-wrap: break-word;
}
.fullscreen-overlay textarea { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 100%; padding: 20px; border: 0; background: #fff; color: #999999; font-size: 21px; line-height: 1.6em; resize: none; -moz-transition: color 0.15s ease-in 0; -webkit-transition: color 0.15s ease-in 0; transition: color 0.15s ease-in 0; box-shadow: none;
}
.fullscreen-overlay .textarea-wrap { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 100%; position: relative;
}
.fullscreen-overlay textarea:focus, .fullscreen-overlay textarea:hover { outline: none; color: #333333;
}
Maximized TextArea - Script Codes
Maximized TextArea - Script Codes
Home Page Home
Developer Alex Vazquez
Username quezo
Uploaded September 14, 2022
Rating 3
Size 2,295 Kb
Views 42,504
Do you need developer help for Maximized TextArea?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Alex Vazquez (quezo) Script Codes
Name
DC.js Example Pie Chart
A Pen by Alex Vazquez
Example of Submitting a Bad Form
Event Bus Example using JQuery.
Maximizing the Height of a CodePen Embed
Awesome Chart
Default DC.js Template
Simple Redux, React Example
Dynamic CSS Update V1
Angular 2 Example
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!