I am struggling with setting the height of input (type text) to fit 100% of its parent element (td). I attempted to individually adjust the height of each input using jQuery, but this method is time-consuming, especially since the site I am working on has a large number of cells. Additionally, this approach does not work on IE 7 and 8, which I also need to support. Here is an example:
If anyone knows of a solution or workaround, I would greatly appreciate it.
If the parent element does not have a set height, it is not possible to apply height:100% to a child element.
Instead, try setting td { height: 30px; } and see if that resolves the issue.
It appears that achieving the desired outcome without JavaScript may not be possible. However, since you have already explored using JavaScript, this answer might be helpful: Answer to a similar question (Check out the associated fiddle for more information.) It seems that options are limited in this case.
To make the input move independently of its parent elements, apply the position:absolute property.
Check out this example on Fiddle (remember to define a width for the <td> enclosing the input):
input{
position:absolute;
top:0px;
height:100%;
}
td{
position:relative;
width:220px;
}
This technique can be used with <input type="submit"> and <div> elements as well.
Tested successfully on Firefox, Chrome, and Edge browsers. To ensure compatibility with Internet Explorer, set a min-height for the input for basic functionality.
UPDATE: For a Drag-and-Drop feature, check out this Fiddle example.
By some stroke of luck, changing the table height to 100% miraculously resolved the issue.
table {
height: 100%;
}
input {
height: 100%;
}<table>
<tr>
<td> 1<br> 1 </td>
<td> <input> </td>
</tr>
</table>I've been considering the idea of implementing a temporary screen that allows users to choose between different options before proceeding to a specific page. For instance, on the contact page, users would be prompted with a question like "Are you loo ...
I am having a CheckBox with two links embedded in the text. The text is set using the following code: String htmlText = "Accept <a href='someUrl'>Terms and Conditions</a> and <a href='anotherUrl'>Privacy Policy&l ...
Okay, so I have this table snippet: <tr> <td> <input type="text" name="value[]" class="value" /> </td> <td> <input type="text" name="quantity[]" class="quantity" /> </td> </tr> Here& ...
I have a question regarding two tables shown below: /* questionnaire table */ | q_id | q_title | | ------- | ---------------------- | | 1 | What is your name? | | ------- | ---------------------- | | 2 | What is your gend ...
After creating a WCFRestful service that populates data in JSON format as shown below: {"GetEmployeesJSONResult":"[{\"Name\":\"Sumanth\",\"Id\":101,\"Salary\":5000},{\"Name\":\"Sumanth\",\"I ...
On my website, I am trying to make an href button and a menu fade in as the page loads. However, I am struggling to find the correct code due to its placement within multiple tags, especially since I am new to JS and JQuery. I have provided a fiddle with a ...
I have a basic webpage showcasing a list of videos. Towards the bottom of the page, there is a button labeled "Load more". When a user clicks on this button, an HTTP request is triggered to add more data to the existing array of videos. Here is a simplifi ...
Being new to markup languages, I encountered an issue when trying to apply my first CSS file to my index.html. Here is how I included the link tag in the HTML file for the CSS file: index.html code Upon checking the network tab in developer tools, I notic ...
In my form, I want to indicate required fields with a red star (*). Is there a way to display the star in red color? Also, why does the border turn blue when I click on an input field? Here is the code and screenshot for reference: https://codesandbox.io/ ...
Recently, I worked on a script (credit to Chyno Deluxe) that generates a list of menu items based on what is written in the input box. However, I now have a new requirement which involves generating a sequence of numbers to be added continuously. Here is ...
Having an issue with displaying a button when an input field is in focus. The "Cancel" button should appear when a user interacts with a search bar. I initially used addEventListener for input click/focus to achieve this, but ran into a problem: on mobile ...
I've created a single-page web application with multiple views, utilizing ng-if for rendering. These views lack headers or body sections and consist only of HTML code. Each view is managed by a separate controller, with many click functionalities han ...
I recently completed an Electron project and decided to incorporate dark mode support into it. However, for some reason, the dark mode feature is not functioning properly. Below you will find the dark.css styling that I have included in every page: @medi ...
Is there a simple method to dynamically update the <title> of my index.html based on the <title> of a child iframe? Take a look at my website for reference If the content within the iframe changes, will the title automatically update along wi ...
I have a creative idea for a random ruffling game, where it picks a user's name and image randomly. However, I'm facing an issue with ensuring that each image matches the correct user when selected randomly. I want to make sure that every objec ...
I have two sets of images named Div1 and Div2 that need to be displayed in a slideshow. The condition is as follows: For the first seven days, I want the images from the first set, Div1, to appear in the slideshow. Once the seven days are over, the images ...
Here is an example of the HTML code I am working with: <td value='3' style='text-align: center'> <select class='selection' onchange=''> <option value='1'>1</option> <opti ...
Here is the SVG code snippet I am currently working with: <div className="behaviorPatternsItem" key={item.id}> <div className="behaviorPatternsItemStyled"> <svg height="25" width="100%" preserveAspectRatio="non ...
Can someone help me with a coding issue I'm facing on my website? I am trying to create three vertical lines to separate images in columns, but every time I exit the editor and preview the site, the position of the lines changes. I'm new to HTML ...
Currently, I've been developing a chat plugin for HTML using VueJs. My dilemma lies in creating a versatile plugin that can seamlessly integrate into any website. My ultimate goal is to design a plugin that can be easily deployed on various websites ...