Columns in posts/articles bbcode

[Mr Lucky]

Mr Lucky submitted a new resource:

Columns in posts bbcode - How to create fluid columns in posts or articles with custom bbcode

"Why would I want columns in posts?" I hear you ask.

Well, given that with xenForo 2.2 we have article threads, some people might like their articles to look more magazine like.

"Why can't I just use tables"

Because with columns, as you add to or edit the text it flows from one column to the next. Plus, you can very simply make the columns responsive and work well on any browser width or device.

The bbcode is very simple, and in my example I am using the tag col...

Read more about this resource...

 

[🔥Iggy🔥]

nice one thank you for this...
i only was wondering about the "col" use......as considering we have the advanced bbcode pack which has xtable which seems to use that in some regard....

i realize it is possible to assign a different title, but a little unclear if that is mandatory or not...anyone checked up on that?

 

[Mr Lucky]

Aha I didn't know that, thanks - maybe I will edit it with something that won't conflict

EDIT:

Have now edited the resource and suggested postcol both as bbcode and CSS class. But of course anyone can use whatever they want for either.

 

[CivilWarTalk]

I guess there is no "out of the box" way to protect a paragraph from being broken in half by the automatic column break.

I'm wondering if wrapping a DIV around my paragraph would keep it on one side or the other of the column break. If that's the case, it might just be a matter of adding one more BBcode to the list. I'm going to have to test that...

 

[CivilWarTalk]

I managed to figure out that since my issue was an Unordered List that was being broken, in HTML that's a UL element, so I added this to my Extra.LESS:

.bbWrapper ul {
-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}

That seems to solve my issue, hope if anyone else needs something similar, this is helpful.