Custom List Component - More than 6 Columns

[SafetyUniversity]

Hey Tada Community-

Does anyone have any suggestions on how to create functionality similar to the List Component but with more flexibility for the number of columns? I have a data that uses 7 columns but the List Component only allows for a maximum of 6.

Any guidance would be greatly appreciated!
Adma

@moe @Chem @Lee @tim.young

[moe]

@SafetyUniversity

Have you looked into custom component?

Do you have an example of a design you wish to use? The hard part here is that 7 columns aren’t divislbe in bootstrap themes. Bootstrap uses 12 column grid layout and if it isn’t divislbe by 12 it would need to be set with static pixels which won’t work

1 Column = 12
2 Column = 6 + 6
3 Columns = 4 + 4 + 4
4 Columns = 3 + 3 + 3 + 3
5 Columns = Not divisble by 12
6 Columns = 2 + 2 + 2 + 2 + 2
7 Columns = Not divisble by 12

[moe]

Another note, just came across this, perhaps its easier than I thought:

7 equal columns in bootstrap

[SafetyUniversity]

Howdy @moe-

Thank you for replying on a weekend…I do not have the Custom Component option available. I’ve attached a screenshot of what I am encountering with the 7 columns. I could probably make it work with 8 columns if need be.

I welcome any thoughts/guidance.

Adam

[SafetyUniversity]

@moe-

Are we able to make the modifications you posted (bootstrap mods for 7 columns) with ourselves or does that have be done on the Tada side?

Adam

[SafetyUniversity]

Hi @moe-

Any updates on this?

Thank you,
Adam

[tim.young]

Hey Adam,

I think it would be best to enable the Custom Component for your account. I’ll get that taken care of for you.

Can you send me an email and we’ll set up a quick chat to go over it together?

[SafetyUniversity]

Tada Community-

Many thanks to @tim.young and @Lee for helping me with super CSS magic to get the odd number of columns to work. The custom component worked perfectly, so I would highly recommend that for anyone that has access to that functionality.

However, I chose to a different path since the custom component is not available for PDFs at this time. Thus the following code worked for 7 columns in the 10 column (bootstrap) space (see picture above). This was for the HTML page (not the PDF)

#x_element_page_XX_XX .list-layout-size-2 > .col-md-2 {
    width: 14.285714285714285714285714285714%;
}

.list-layout-size-2>div:nth-child(6n+1),.list-layout-size-3>div:nth-child(4n+1),.list-layout-size-4>div:nth-child(3n+1),.list-layout-size-6>div:nth-child(2n+1) {
    clear:none;
} 

The following CSS worked to get the PDF list component to show 7 columns in a 10 column space (I know this can be confusing but once you dig into the columns it will make sense).

.pdf-list > .list-layout-size-2 > .col-md-2 {
    width: 14.28571428571428%;
}
.pdf-list > .list-layout-size-2 *{
  display:inline-block;
}
.list-val{
    display: block !important;
}

Instead of using fields in the list component, we used an HTML field and added the variables in the rich text field of the HTML editor and then added the list-val CSS class.

Then in the list component of the Page Builder we assigned is a custom CSS class of pdf-list.

We finalized it all with some massaging of margins and padding but it works 100% in the HTML and PDF pages.

Again, many thanks to the Tada Team for all of your help.

Adam