• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
Side By Side Nodes

Side By Side Nodes

#41
@Audentio, I also found out that if you enable the feature "Show Forum Descriptions on Node List" and keep "Enable Forum Descriptions Tooltips" disabled, from Style Properties: Forum / Node List, the alignment will fail if the the number of lines of the tooltip on one of the nodes does not match the number of lines of the one beside it.

For instance:

[Node One]...........[Node 2]
Line 1....................Line1
Line2​
 
#42
Hi again @Audentio,

When I'm using this code:

HTML:
/* METHOD 2: SIDE BY SIDE FORUM, PAGE, LINK NODES */

@media (min-width: @maxResponsiveMediumWidth) {

    {xen:helper clearfix, '.nodeList'}

    .nodeList .node.level_2 {float: left; width: 50%;}

    .nodeList .node.level_2:nth-child(odd) {
        clear: left;
    }

/* Uncomment/comment to hide/display last post */
.nodeList .node.category .node .nodeText {margin-right: 10px;}
    .nodeList .node.category .node .nodeLastPost, .nodeList .node.category .node .nodeControls {display: none;}
/* End Hide/Display Last Post */

    .nodeList .node.level_2 .nodeLastPost {
        position: static;
        width: auto;
        padding-right: 20px;
        margin-top: 0;
    }

    .nodeList .node.level_2 .nodeText {margin-right: 26px;}
    .nodeList .node.level_2 .nodeControls {right: 8px;}

}

    .nodeList .node.level_2:last-child:nth-child(odd) {width: 100%;}
    .nodeList .node.level_2:last-child:nth-child(odd) .nodeText {
        margin-right: 270px;
    }

/* END METHOD 2: SIDE BY SIDE FORUM, PAGE, LINK NODES */
There are some glitches when viewing the site from mobile devices, at least from iPhones. For one, the view looks like one of the pictures you posted before, but in this case, in my case, for forums with no other forums by its side:



Also, it is displaying "Last Post" (date and time only, not the URL nor the poster), whilst on a desktop view that info is hidden. :)

Feel free to visit the site (link on my signature) if you would like to have a look.

Thank you.
 
#43
@Audentio, sorry to bother you, but one more thing:

I'm hiding the "Last Post" bit, but I would love to display just two specific items:

+ The tiny RSS button.
+ The date & time of the last post.

I'd appreciate any suggestions to modify your code to achieve this. :)

Thank you!
 
#47
Thanks @DEZero.

I can see you have no descriptions for each forum and no subforums (or not enabled to be displayed), and I guess that's the reason why you are not affected by the issues I described above.

:)
 

DEZero

Well-known member
#49
Thanks @DEZero.

I can see you have no descriptions for each forum and no subforums (or not enabled to be displayed), and I guess that's the reason why you are not affected by the issues I described above.

:)
I have enabled them and other than changing the height of some of the nodes to compensate for the subforums, I do not get the errors that you do.
 

DEZero

Well-known member
#50
This is what I have in my Extra.css

Code:
/* SIDE BY SIDE NODES */

@media (min-width: @maxResponsiveMediumWidth) {

    {xen:helper clearfix, '.nodeList'}

    .nodeList .node.level_2 {float: left; width: 50%;}

    .nodeList .node.level_2:nth-child(odd) {
        clear: left;
    }

    .nodeList .node.level_2 .nodeLastPost {
        position: static;
        width: auto;
        padding-right: 20px;
        margin-top: 0;
    }

    .nodeList .node.level_2 .nodeText {margin-right: 26px;}
    .nodeList .node.level_2 .nodeControls {right: 8px;}
  .nodeList .node.level_2:last-child:nth-child(odd) {width: 100%;}
    .nodeList .node.level_2:last-child:nth-child(odd) .nodeText {
        margin-right: 270px;
    }

}
 

DEZero

Well-known member
#52
The uneven nodes, yeah, I just got that when I enabled the subforums instead of the popup, sorry haven't had much sleep misunderstood your problem :eek: I guess we may have to wait on a reply from @Audentio .
 

Mike Creuzer

Well-known member
#56
Well the reason is simple because of 'dynamic content'. Node descriptions that go to 1, 2, or 3 lines or node titles can cause this. If you have a sub-forum list instead of a dropdown this can happen too. Perhaps you made some other modifications.

You can do a couple things to fix this:

1. Limit the content in characters
2. Limit the content in height
3. Hide the content in such a way where it doesn't hinder the height of the node list item
4. Simply remove the bottom border, not a fix all but makes it look a bit better
5. Fix the height of everything, do a min/max-height, etc.
6. Just make the design 'work' with the height differences, the staggered look could look decent with the right style

But the best solution in my opinion is what I did with UI.X and that was have it display in a table format. I'm not sure if I'll post all the code here as there is quite a bit and it is heavily integrated with my framework, UI.X. Essentially it just adds borders in all the right places to make it look as if it were a <table>.

I've attached a screen.
 

Attachments

Slind

Active member
#59
Yes, prefix every selector with .forum_list
Ahh thanks :)

I would like to show all sub categorys and sub forums under the node, like this:

Node Title
Discussions: 211 Messages: 1,812

Sub Category 1:
Sub Forum 1
Sub Forum2​
Sub Category 2:
Sub Forum 1
Sub Forum 2​

Is this possible?
 

Mike Creuzer

Well-known member
#60
Ahh thanks :)

I would like to show all sub categorys and sub forums under the node, like this:

Node Title
Discussions: 211 Messages: 1,812

Sub Category 1:
Sub Forum 1
Sub Forum2​
Sub Category 2:
Sub Forum 1
Sub Forum 2​

Is this possible?
What are subcategories?