When a new element is dynamically added to a table cell, how is the computation of "width: 100%" handled?

When utilizing Backgrid for editing values in a table, an <input type="text"> is inserted inside the <td>. Despite setting the input to max-width: 100%, it can still cause the column to expand beyond desired dimensions.

To see this behavior in action, take a look at the grid featured on their Examples section and select an item in the "Population" column. Even with the addition of the editor class, padding is set to 0, and both the <td> and <input> elements have box-sizing: border-box, the width of the column continues to grow.

So, does width: 100% not actually mean 100% of the current <td> width? Or is it simply impossible to achieve this effect using only CSS? It may be necessary to use a backbone event to determine the td size and then adjust the input accordingly, although that solution might seem a bit makeshift.

Answer №1

The calculation of table column widths is a complex process. The goal is to distribute the available space among columns based on their content, giving more space to columns with more content.

Attempting to make the column width match the content's width creates a circular dependency which complicates matters even further.

Does setting width: 100% mean taking up 100% of the current <td> width?

No, CSS updates everything simultaneously without maintaining a history. Therefore, setting width: 100% ensures the input will match the <td> width after all updates are completed. However, this may result in a different width than before any changes were made.

While there is no perfect solution, here are some suggestions:

  • Check the column width using JavaScript before replacing the content
  • Utilize fixed table layout to ensure uniform column widths independent of content
  • Apply contenteditable directly on the <td> instead of an input element to potentially avoid affecting column widths while editing

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

Incorporate an icon into an Angular Material input field

I want to enhance my input search bar by adding a search icon from Angular Material : <aside class="main-sidebar"> <section class="sidebar control-sidebar-dark" id="leftMenu"> <div> <md-tabs md-center-tabs id=" ...

The design of the website is all over the place

I am encountering challenges in creating distinct containers for the header, body, and other sections of my website. The layout is not turning out as planned, and I can't pinpoint where my code is going wrong. Any advice or suggestions on how to resol ...

What class is utilized when multiple classes are specified?

When an element has two classes assigned to it and the CSS for the two classes conflict with each other, which one takes precedence? Is there a method to determine which one will be used? For instance: <p class='red small'>Some Text Here& ...

Ways to ensure a div remains at the bottom of a page without using a wrapper

I am currently working on my website and this is the content I have in my body tag: #social-media { width: 175px; margin-left: auto; margin-right: auto; padding-top: 10%; } #social-media img { padding: 5px; } #soci ...

button click event blocked due to unforeseen circumstances

Recently, I've been attempting to change the CSS properties of a div by triggering a click event. However, no matter what I do, it doesn't seem to be working and it's starting to frustrate me. Can anyone shed some light on why this might be ...

What's the best way to enable touch scrolling for items within a div container?

I am in the process of creating a code snippet that will allow users to scroll through items within a div, similar to a spinning wheel or slot machine. While I am aware of an existing solution for iPhone and iPod, I want to develop a simpler, more streamli ...

I have implemented the appropriate code to showcase a background color, yet it doesn't seem to be appearing on the screen. Additionally, I am utilizing Sass in this project

Could someone help me understand why the background color is not showing on my website? This is the CSS I am using html { font-size: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } *, *::before, *::after { -webkit-box-sizi ...

Achieving a consistent border-radius effect during hover transitions

I designed a div that initially displays an image, but upon hovering over it, a second div with text and a solid colored background appears to mask the original content. To see what I'm talking about, check out my jsfiddle: 'Mask on Hover' ...

When the width of the screen is less than 992 pixels, my div will be hidden

I have been working with the bootstrap4 layout, and I noticed that when the screen width is less than 992px, the yellow-div is overlapping the brown-div. Can someone explain why this is happening and suggest a solution? Below is the code snippet: .head ...

Explore the interactive feature of hovering over a component within a div that is enhanced with a transformative translate3d effect upon hover. Discover the seamless event queuing

Within a div, there is a modal component that includes a transform: translate3d effect with hover transition. The div is created using vue.js list rendering method. Upon opening the modal and hovering over it, it jerks between the parent div and its intend ...

Generate a variety of HTML ordered lists

Can anyone assist me in determining the type of ordered list shown below? What is the method to achieve an ordered list like this: (a) (b) (c) in HTML? ...

Align a button within an input field to be in line with a stacked label in

I'm currently facing some issues with Ionic because it's not placing my button where I want it to be: https://i.stack.imgur.com/qtUQJ.png My goal is to have the button on the same line as the input, similar to the clear-button. This is the cod ...

Error: The parent selector "&" cannot be used in top-level selectors. $::webkit-input-placeholder

I am facing an issue while trying to run a legacy create-react-app that utilizes Sass. Initially, when I ran npm start, I encountered the error 'Cannot find module sass', which resembled the message found in this stack overflow post. To resolve t ...

Focus on the iPad3 model specifically, excluding the iPad4

I am looking to apply specific CSS that works on iPad 3, but not on iPad 4, or vice versa. Currently, I am able to target both versions by using the following code: @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( m ...

Gallery Pagination using JQuery is not working properly

I am experimenting with the jquery easy paginate plugin on a separate page of my Blogspot. The images are displaying properly, but the pagination and CSS are not showing up. I need to adjust my CSS to make this jQuery pagination work correctly. Can someone ...

Background wrapper does not reach full height of page

I am currently dealing with a website template that has a background image in the wrapper. However, when I view the site on a 13" laptop screen, the text extends below the fold because the wrapper only covers above the fold. This results in my content not ...

Center alignment function is not functioning correctly

I'm struggling to center the text both vertically and horizontally inside my div. No matter what I try, I can only get it to align horizontally. Here is the CSS code I have been using: #loading > h1 { text-align: center; font-size: 21px; ani ...

Steps for creating a dynamic progress bar with inverted text style using only CSS

I am working on creating a dynamic progress bar with inverted text color using only CSS. To see examples of what I am trying to achieve, you can refer to the following links. Inverted Colors CSS progress bar CSS Progress Bars https://i.sstatic.net/VSs5 ...

Fix background transition and add background dim effect on hover - check out the fiddle!

I'm facing a challenging situation here. I have a container with a background image, and inside it, there are 3 small circles. My goal is to make the background image zoom in when I hover over it, and dim the background image when I hover over any of ...

In React, when utilizing the grid system, is there a way to easily align items to the center within a 5 by

I need to center align items within the material-UI grid, with the alignment depending on the number of items. For instance, if there are 5 items, 3 items should be aligned side by side in the center and the remaining 2 items should also be centered. Pleas ...