OL Learn

Size dynamic table column width based on column content


#1

I’m trying to size the dynamic table column widths based on column content. There is a difference between the Design tab and the Preview tab and the appears to be the insertion of a line break.

Design Tab
exampleDesignView

Preview Tab

exampleCSS-Collapse exampleCSS3

I’m also inserting a input field with the dynamic table scripts, but trying to make it less noticeable.


exampleCSShide

I’m not sure what I’m missing.


#2

Most likely your input field causes this. Input fields comes with a lot of overhead thickness like margin, padding, border.

In the image below (little project I worked on, I had to play a lot with my CSS in order to minimize the overall space that my input field took. (I colored my screenshot in Paint so be comprehensive when you look at the image :wink: )

inputBox

As you see, my input part is the blue. And that, is after I played with my CSS because there was a lot more “empty” space around my input field in the TD before (like the padding of my TD for instance)…

Look at yours in the Inpector of your browser…

Hope that guide you.


#3

Thanks, you are correct, I missed a border element that was being set in the default context_web_styles.

exampleDesignView2

exampleCSSinput