Side By Side Nodes [Deleted]

japersonal · Dec 14, 2013

@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

japersonal · Dec 15, 2013

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.

japersonal · Dec 15, 2013

@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!

DEZero · Dec 26, 2013

This worked perfectly on my new style (method 2)

japersonal · Dec 27, 2013

DEZero said:
This worked perfectly on my new style (method 2)

Hi @DEZero,

So you are not facing any of the issues I described before? Would you mind to let us know your web site address to have a look?

Thank you.

DEZero · Dec 27, 2013

japersonal said:
Hi @DEZero,

So you are not facing any of the issues I described before? Would you mind to let us know your web site address to have a look?

Thank you.

http://thedarkenforcers.com/forums

change the style to "Defiance"

japersonal · Dec 27, 2013

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 · Dec 27, 2013

hmm, I'll have to turn them on and see if that affects anything.

DEZero · Dec 27, 2013

japersonal said:
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 · Dec 27, 2013

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;
    }

}

japersonal · Dec 27, 2013

To ilustrate my point:

captura-de-pantalla-2013-12-28-a-la-s-02-04-53-png.63739

DEZero · Dec 27, 2013

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

I guess we may have to wait on a reply from @Audentio .

Dad. · Dec 27, 2013

japersonal said:
To ilustrate my point:

So you are talking about why they are not lining up, correct?

DEZero · Dec 27, 2013

Audentio said:
So you are talking about why they are not lining up, correct?

Yes, I also have this issue, @japersonal made me aware of this

japersonal · Dec 27, 2013

Audentio said:
So you are talking about why they are not lining up, correct?

Yep, plus one or two other issues I mentioned before.

Thanks

Dad. · Dec 27, 2013

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.

Slind · Feb 7, 2014

Is it possible to use this only for the forum index?

Dad. · Feb 7, 2014

Slind said:
Is it possible to use this only for the forum index?

Yes, prefix every selector with .forum_list

Slind · Feb 8, 2014

Audentio said:
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?

Dad. · Feb 8, 2014

Slind said:
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?

Side By Side Nodes [Deleted]

Active member

Active member

Active member

Well-known member

Active member

Well-known member

Active member

Well-known member

Well-known member

Well-known member

Active member

Attachments

Well-known member

Well-known member

Well-known member

Active member

Well-known member

Attachments

Active member

Well-known member

Active member

Well-known member

Similar threads

We value your privacy