I am currently working on setting up a data table for an application using Vue.js, and I am facing a challenge in relation to the arrangement of input elements. The specific requirement is that certain columns within the table should contain values that are editable through input boxes and dropdown menus. However, I seem to be encountering difficulty in achieving the correct positioning. While I can align the component in the row when it is unaltered without any issues, as soon as modifications are made to the value within the component, it tends to shift downward and expand the entire row. To address this, I had to adjust the line-height of the row and eliminate padding on all items within the row. For example:
Initial state:
https://i.sstatic.net/2f9GJ.png
After entering text into the left text field, clicking away, and returning to modify the value:
https://i.sstatic.net/HHfE9.png
If the value is cleared and you click away from the text input, it reverts back to its original state. A similar issue occurs with the dropdown menu, where it gets entirely obstructed by the row boundary. Removing the "position: relative" styling makes the menu visible, but then the component is not correctly aligned, like this:
https://i.sstatic.net/NyvfC.png
Otherwise, it appears like this:
https://i.sstatic.net/pU2kG.png
Also worth noting is how the box shifts to the top of the row.
I have managed to achieve the current layout by eliminating padding on all row elements and utilizing top: 8px to center each component. Yet, upon inspecting the CSS via Chrome Dev Tools, it indicates that there is still some padding despite my efforts to reset it to zero in all directions (except for padding-right, which remains at 8px).
https://i.sstatic.net/jgkSU.png
The underlying reasons behind these peculiar behavior patterns remain unclear to me. Ideally, I would like both the text field and dropdown menu to remain stable, with the dropdown items staying visible without unnecessary movement. How can I go about resolving these issues?