Size dynamic table column width based on column content

OL Connect Professional Designer
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

examplePreviewView
examplePreviewView790×177 2.6 KB

exampleCSS-Collapse exampleCSS3

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

exampleInputField
exampleInputField926×283 10.5 KB

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