How to implement responsive width in Editable input widget

Hi and hello everyone, I hope you are always happy wherever you are :)


I have a little problem creating a table that has responsive features, that is, when zooming in and zooming out, the width of the input will change and adjust.

The main problem is that when I zoom in, what I want is that the width of the input doesn't change, however, in fact the width of the input changes getting smaller

https://www.outsystems.com/forums/discussion/53919/editable-table-with-multiple-columns/

I have followed the tutorial from this post as well as implemented in my program, but the result still doesn't change,

Then, I also tried the tutorial from this post

https://www.outsystems.com/forums/discussion/64511/editable-table-styling/

However, the appearance has not changed either, I suspect that there is a css that needs to be added or something is wrong with my CSS

Here I attach a screenshot

CSS container


Width Table 120% And Width Column (Column 7% x 17cell = 120%)

When zoom out

When zoom in


Due to project privacy issues, I cannot provide my OML, but I hope that my friends and compatriots at Outsystems can help me, because the deadline is getting closer and my project is still not over due to this problem

Thank you very much

Thank you for your answer, I have tried it but it hasn't been successful, then I tried the method by changing the value of the input widget to a fixed value, finally it is more responsive when zooming in, the width does not decrease

Hi Syamsu, did you try to use position? set parent as relative and child as absolute passing the exactly place you want the element to be

Eg:.

#parentDiv { position:relative; }

#childDiv { position:absolute; left:50px; top:20px; }


Here you can find some explanation about position:

https://dzone.com/articles/css-position-relative-vs-position-absolute 

https://css-tricks.com/almanac/properties/p/position/


Hope I could help you

Cheers,

Carlos Lessa

Thank you for your answer, I have tried it but it hasn't been successful, then I tried the method by changing the value of the input widget to a fixed value, finally it is more responsive when zooming in, the width does not decrease

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.