Is there a way to create a textarea that dynamically expands to fill the available space within a div, while maintaining fixed height offsets from the top and bottom? The CSS code below achieves this effect in Chrome, but Firefox displays the textarea with a default height, resulting in extra space at the bottom. Any ideas on how to achieve consistent behavior across all browsers?
#add-comment-text
{
position: absolute;
left: 5px;
top: 50px;
bottom: 50px;
width: 99%;
}
If you want to incorporate dynamic calculations in your CSS, consider using the css calc function:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
#add-comment-pane
{
height: 100%;
}
#add-comment-header
{
position: absolute;
top: 10px;
left: 10px;
}
#add-comment-text
{
position: absolute;
left: 5px;
top: 50px;
bottom: 50px;
width: 99%;
height: calc(100% - 100px); <!-- HERE -->
}
#add-comment-button
{
position: absolute;
bottom: 10px;
right: 10px;
}<div id="add-comment-pane">
<div class="unselectable" id="add-comment-header">
Comment on:
<a href="https://daringfireball.net/projects/markdown/syntax" style="text-decoration: none" target="_blank">markdown</a>.
</div>
<textarea id="add-comment-text"></textarea>
<button class="pure-button pure-button-primary" id="add-comment-button">Post Comment</button>
</div>Include height in your styling for the textarea:
#comment-section {
position: absolute;
left: 5px;
top: 50px;
bottom: 50px;
width: 99%;
height:85%;
}
I'm embarking on a new website project and I'm contemplating whether using a React UI Framework is the way to go, or if I should create my own components and grid system from scratch. I've been drawn to projects like ElementalUI's take ...
I encountered an issue: Uncaught TypeError: Cannot read property 'html' of undefined I am working on implementing a voting system for each video on my webpage from a database. I have successfully integrated it using AJAX, but the problem is ...
I am trying to display the user's image by inserting it into the src attribute of the img tag, but I am facing difficulties with it. Here is my code: models.py class allusers(models.Model): user = models.OneToOneField(User, on_delete=models.CASC ...
Recently updated my application to be mobile-friendly. I've noticed that at times, the keyboard seems to have a slight delay in appearing when I tap on an input field. I have around 20 inputs on a single page. I conducted a test with the same number ...
Can the Vue attributes and directives be highlighted? Including those in quotes. ...
$("button").click(function (){ $("<button>Start</button>).appendTo('main'); }); The code above introduces a functionality where clicking a button generates another button dynamically. However, each subsequent click kee ...
Is there a method to download attribute work in Internet Explorer. When attempting to force download a file on IE using The following works flawlessly on Firefox but not on IE <a href="image.jpg" download>Click here to download</a> ...
In my index.jsp file, I have implemented the following code to populate two textareas, INPUT_TEXT and INPUT_TEXT2, with processed data. This involves passing the text through a servlet, a Java class, and finally displaying the preprocessed results in the s ...
I frequently utilize the input type calendar on my website's intranet, but unfortunately, it only seems to work properly in Google Chrome and not in other browsers. As a solution, I have developed a code for a CSS/JavaScript calendar that I would like ...
I have implemented the collapsible sections code from W3 School successfully on my website. Now, I am trying to achieve a specific functionality where the "Open Section 1 Button" should slide down with a margin-top of 10px only if the first section "Open S ...
Despite following the instructions in this post Attempting to incorporate a linear gradient into a MaterialUI icon, as per a comment's recommendation, I am unable to get it to work. I experimented with the idea that the icons could be considered text ...
When it comes to loading my mobile-only CSS, I typically use a media query similar to: <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="/includes/css/mobile.css" /> However, in addition to these CSS mod ...
I am faced with a block of two HTML elements in this format: <div class="a-row"> <a class="a-size-small a-link-normal a-text-normal" href="/Chemical-Guys-CWS-107-Extreme-Synthetic/dp/B003U4P3U0/ref=sr_1_1_sns?s=automotive&ie=UTF8& ...
I have been working on developing a table that allows users to edit it. I successfully created a script that adds comments to the table, but unfortunately, these comments disappear when the page is refreshed. I understand that I may need some additional to ...
I am currently working on a design layout that includes a 'header' section with a logo and links, as well as a content area that should extend to the bottom of the page. However, I am facing some challenges in achieving this. Initially, I enclos ...
I have a MySQL database where orders are stored along with various activities. My PHP/HTML page retrieves these activities when an order is clicked and allows users to modify them using a form. Upon submission, another PHP file updates the database by loop ...
Can anyone assist me with my code? Here is the current version: https://i.stack.imgur.com/00RGC.png I want it to resemble this: https://i.stack.imgur.com/JSclD.png You can find all my attempted media queries in the CSS comments at the end. Please let m ...
I have a small project with a predefined format, where I need to select a value from a dropdown menu and use that value to fetch data from a database and display it in HTML. While I am able to retrieve the data from the database based on the selected value ...
Here is the current layout of my form: https://i.sstatic.net/2vZjl.jpg You may notice that the labels are not properly aligned. I would like them to appear like this: https://i.sstatic.net/gm39D.jpg Below is the code for all the input fields: <%= si ...
Although there are similar answers available, I want to address those who are trying to prevent their columns from stacking on XS display. Despite having two columns, the content is still stacking at certain displays. This issue is occurring while using B ...