XF 2.0 sub-forum columns/formatting?

[tonmo]

Where in the new system can I tidy this up? (e.g. even-width columns) The forum_view template changes substantially from xf1.x (I think) and I'm not sure how to get this done.

 

[imno007]

I'd like to know this too. The default looks pretty messy with a lot of subnodes.

 

[imno007]

Actually, I just found this other thread that Mike responded to:

https://xenforo.com/community/threads/subforum-list.126470/

Looks like this is one of those things that maybe got more difficult with 2.0, rather than easier.

 

[mysimsek]

Try adding this to the template extra.less:

.node-subNodeFlatList {
    >li {
        display: inline-block;
        margin-right: 0;
        float: left;
        width: 50%;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
        white-space: nowrap;
    }
}

 

[tonmo]

Try adding this to the template extra.less:

.node-subNodeFlatList {
    >li {
        display: inline-block;
        margin-right: 0;
        float: left;
        width: 50%;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
        white-space: nowrap;
    }
}

View attachment 163987

Perfect, thanks.

 

[imno007]

Thanks, mysimek! I had tried something similar earlier in the day, but apparently did something wrong - then after reading Mike's post had assumed that maybe it just wasn't possible for some strange reason. But then again, I had been working on the upgrade for several hours by then, so it's quite possible my brain was fried and I wasn't thinking right.

 

[tourmeister]

It would be REALLY cool if as the screen size shrinks, like say for a mobile phone, the columns of subnodes would form a single column under the parent node rather than just disappearing completely.

From this,

Parent node

sub1 sub 2 etc,...​

​

to this,

Parent Node

sub 1​

sub 2​

etc,...​

​

I know nothing about how this could be done or if it is hard, just dreaming

 

[imno007]

Try adding this to the template extra.less:

.node-subNodeFlatList {
    >li {
        display: inline-block;
        margin-right: 0;
        float: left;
        width: 50%;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
        white-space: nowrap;
    }
}

View attachment 163987

This seems to no longer work for XF 2.1. Anyone have the solution? TIA

 

[LuciferGR]

Thanks for idea !
XF 2.1

Screenshot

Captured with Lightshot

prntscr.com

.node-subNodeFlatList {
    >li {
        display: inline-block;
        margin-right: 0;
        float: left;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
        white-space: nowrap;
    }
}

 

[imno007]

Thanks for idea !
XF 2.1

Screenshot

Captured with Lightshot

prntscr.com

.node-subNodeFlatList {
    >li {
        display: inline-block;
        margin-right: 0;
        float: left;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
        white-space: nowrap;
    }
}

Yeah, except that it used to display my nodes in two columns. And this didn't even get me a nice single column, so I'm glad it did at least that much for you. I'll work it out eventually, though, just got to play with it some.

 

[imno007]

Thanks for idea !
XF 2.1

Screenshot

Captured with Lightshot

prntscr.com

.node-subNodeFlatList {
    >li {
        display: inline-block;
        margin-right: 0;
        float: left;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
        white-space: nowrap;
    }
}

Doh, this is what happens when you're trying to do stuff late at night and you're more tired than you think. Just got to change the width to 50%.

 

[imno007]

Hmm, and actually that only works for me because I have some other code in my extra.less that was put there for a completely unrelated purpose:

}
.col1 {
width: 150px;
float: left;
}

So the whole thing looks like this:

//Sub-Forums Display
.node-subNodeFlatList {

li {

display: inline-block;
margin-right: 0;
float: left;
width: 50%;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
}


}
.col1 {
width: 150px;
float: left;
}

So that will work if you want a two column layout, but it seems a little janky. I'll fiddle with it more when I have the time, but I guess as long as I'm not seeing any errors it will serve just fine....

EDIT: Yeah, you actually only need this bit to make it work:

}
.col1 {
}

I'm just not sure how to work that into the other, original code, or if something altogether different would be work better. Anyway... on to other things.

 

[tonmo]

This seems to no longer work for XF 2.1. Anyone have the solution? TIA

I think this still works in 2.1...

 

[imno007]

I think this still works in 2.1...

Well, all I can say is it doesn't work for me without that column bit, for whatever reason. Even after uninstalling and deleting the addon that I was using that code in conjunction with, to parse some html, it still doesn't work. So maybe something's boinked on my end.

 

[tonmo]

Yeah, strange. I upgraded with no issues and made no changes here:

 

[imno007]

Okay, thanks for confirming. I guess at some point I'll need to try disabling all my addons to see if something else might be causing a conflict somewhere. Or maybe I need to rebuild my templates, although I actually just reinstalled all my styles, including the XF default because it was displaying wonky after the upgrade. I'm sure I'll sort it out eventually...

 

[imno007]

Alright, remember how I said that I had originally been messing with this late at night and I was tired and all that? Good, because I'm going to blame that for my stupidity, at least originally. Lol. Turns out I was just one closing bracket short when I copied and pasted the code and as many times as I checked it I failed to notice that one little detail. Do I at least get credit for manning up and admitting it?

 

[LuciferGR]

XF 2.1

.node-subNodeFlatList {
    >li {
        display: inline-block;
        margin-right: 0;
        float: left;
        width: 50%;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
        white-space: nowrap;
    }
}

 

[SavageInMe]

Try adding this to the template extra.less:

.node-subNodeFlatList {
    >li {
        display: inline-block;
        margin-right: 0;
        float: left;
        width: 50%;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
        white-space: nowrap;
    }
}

View attachment 163987

Any idea how to put them in a certain order? Generally they are listed left column then right column. If I want one group to show on left side and another group to show on right side, any idea how to do that?

here's a screenshot..



I would like to make all the Lose XX+ Club forums to show on left side and the Age XX forums to show on right column.

Thanks

 

[imno007]

Wouldn't it be easiest to just change the display order...?