Skip to main content
N
nmilleson17-Peridot
17-Peridot
April 15, 2021
Solved

Collection Widget Row Spacing (table view)

  • April 15, 2021
  • 2 replies
  • 6627 views

I'm trying to put some vertical space between rows in a collection widget when it is in Table view.  There is a RowSpacing property but it only seems to apply to the Flow view. I've been playing around with the CSS but I can't seem to get anything to work.  Any thoughts?

 

I have a workaround that almost gets me there (making the row a bit taller and put in a container that is the same color as the background of the main mashup), but then the border radius doesn't look right.

Best answer by GabrielB

Hi @nmilleson ,

 

There is a very simple way of overcoming this. Set your Collection on Flow layout. Set the FlowLayoutGravity to Expand, FlowLayoutAlignment to Top and FlowLayoutContentGravity to Top. And set the MashupWidth to 9999 or something crazy like that. It will basically occupy the whole with of the collection container no matter what. Then you can set the spacing between the rows.

 

Good luck,

Gabriel

2 replies

S
slangleyCommunity Manager
Support
April 22, 2021

Hi @nmilleson.

 

Here is a guide that may help in using CSS.  For your specific scenario, we will have to test it.

 

Regards.

 

--Sharon

N
nmilleson17-PeridotAuthor
17-Peridot
April 23, 2021

@slangley ,

 

Thanks for the reply.  I am pretty familiar with using CSS on the widgets, I just can't find where I'd be able to change that vertical spacing on a table view collection widget.  There are a few places where I can change margins and padding in the browser console, but they don't seem to affect how the rows are spaced. 

 

Thanks!

Nick

S
slangleyCommunity Manager
Support
May 6, 2021

Hi @nmilleson.

 

We've been looking at this, but need clarification of your intent.  You mentioned vertical spacing on a table, which would mean between the columns, but later mention row spacing.  Just need clarification.

 

There are properties for MinimumSpacing between the cells in the Row.  There is also RowSpacing that affects vertical spacing between the rows. 

 

Have you tried the above and it's not working for you?  We did not find an issue under 9.1.  Which version of ThingWorx are you running?

 

Regards.

 

--Sharon

G
GabrielB12-AmethystAnswer
12-Amethyst
August 20, 2021

Hi @nmilleson ,

 

There is a very simple way of overcoming this. Set your Collection on Flow layout. Set the FlowLayoutGravity to Expand, FlowLayoutAlignment to Top and FlowLayoutContentGravity to Top. And set the MashupWidth to 9999 or something crazy like that. It will basically occupy the whole with of the collection container no matter what. Then you can set the spacing between the rows.

 

Good luck,

Gabriel

N
nmilleson17-PeridotAuthor
17-Peridot
August 21, 2021

@GabrielB ,

 

Thanks for the solution!  We also have a requirement that the corners of each collection tile need to be rounded.  It appears that your workaround still shows the rounded corners on the right-hand side of the screen! 

nmilleson_0-1629516861765.png

 

 

G
GabrielB12-Amethyst
12-Amethyst
August 23, 2021

@nmilleson glad it helped!

    Terms & ConditionsAccessibility statement