Problems with news feed, specific to the "slide" animation?

[Matte]

A couple weird news feed issues that I think warrant a thread separate from my original thread where I was trying to solve a different news feed issue that I've since abandoned.



Problem 1:
The height of the news feed changes depending on whether the "flip" or "slide" animation is selected, as shown below in the default PB theme with no CSS changes. The same height difference persists regardless of the news item taking up a single line or being long enough to wrap to a second line (makes it seem like a padding or line height issue, one of the two being lesser when using the "slide" animation). Note: The Change Name of "News" plugin is active in these screenshots, but this was tested both with and without the plugin active and results were the same.

"flip" animation on left, "slide" animation on right


Problem 2:
This problem occurs only when using the Change Name of "News" plugin, and only when selecting the "slide" animation. The "flip" animation does not yield this problem. A news item that's long enough to wrap to a second line gets its first line cut off, as if the "slide" animation is ignoring the new width of the news feed title, as shown below. Note: I took this screenshot after applying some CSS changes, but this was tested both before and after doing so and results were the same.

"flip" animation on top, "slide" animation on bottom


Here is my test forum where you can see the problem for yourself: matte.boards.net/ - the "slide" animation is currently active, there is only one news item and you can see the its first line is cut off.



Both of these problems seem to be specific to the "slide" animation. I did find through a little bit of research that the two animations go by different classes, so you have to target certain aspects of them specifically in CSS, but I can't figure out how to tackle these two issues.

I'll also provide my current news bar CSS. I already started from scratch and only changed things that were necessary to give the news bar the look I wanted it to have. I'm not seeing anything that would cause the "slide" animation to have less top and bottom padding/lesser line height than the "flip" animation (problem 1), or anything that would cause the "slide" animation to extend news item text past the boundaries of its container when the "flip" animation keeps those boundaries in check at all times (problem 2).

/* News Bar */
#news { color: @nav_tree_color; font: @nav_tree_font; text-decoration: @nav_tree_decoration; z-index: 9; height: 20px; background-color: @nav_tree_background_color; overflow: hidden; margin: 0 auto 10px; border: @nav_tree_border_width @nav_tree_border_style @nav_tree_border_color; .rounded-corners(@nav_tree_border_radius); }
#news .items { height: 20px; position: relative; overflow: hidden; }
#news .items > div > div { font-size: 110%; padding: 0 10px; text-align: justify; line-height: 20px !important; }
#news .items div img { vertical-align: text-bottom; }
#news .items a { font-weight: bold; }
#news .nav { background-color: #3f3f3f; float: left; background-position: center; }
#news .nav > span { width: auto !important; border-width: 0px 0px 0px 0px; border-style: solid; border-color: transparent; cursor: default; float: left; display: inline-block; padding: 0 3px; height: 20px; }
#news .nav > span.title { font-size: 130%; color: #ffffff; text-align: center; display: inline-block; height: 20px; padding: 0px 10px; line-height: 20px !important; }
#news .nav .arrow.left { .rounded-corners(@nav_tree_border_radius, 0, 0, @nav_tree_border_radius); padding-left:15px; }
#news .nav .arrow.right { padding-right:15px; }
#news .nav .arrow.left span { border-right-color: #ffffff; }
#news .nav .arrow.right span { border-left-color: #ffffff; }
#news .nav .arrow.left:hover { border-right: 0px solid #3f3f3f; background-color: #333333; }
#news .nav .arrow.right:hover { border-right: 0px solid #3f3f3f; border-left: 1px solid #3f3f3f; margin-left: -1px; background-color: #333333; }
/* #news .nav:hover { background-color: @nav_tree_hover_background_color; }
#news .nav:hover > span { border: @nav_tree_border_width @nav_tree_border_style @nav_tree_border_color; border-width: 0px @nav_tree_border_width 0px 0px; }
#news .nav:hover .arrow { background-color: @nav_tree_hover_background_color; } */

[Kami]

1. Answered in your other thread. This is intentional by PB, the flip display will always take on the height of what is needed to accommodate the longest message because otherwise the forum would constantly be jumping up and down as the feed resizes in height for every news item.

2. As mentioned in your other thread, I really recommend appending your changes to the bottom of your stylesheet instead of making the changes directly in the corresponding default PB styles. It will be far easier to diagnose what changes were made and how they impact the rest of the CSS — this is, as the name suggests, "cascading", so changes listed at the bottom will override the default PB style and show what specifically was changed instead of requiring folks to sit and compare context-less CSS. :P 

[Matte]

Mar 31, 2023 2:33:43 GMT -8 Kami said:

1. Answered in your other thread. This is intentional by PB, the flip display will always take on the height of what is needed to accommodate the longest message because otherwise the forum would constantly be jumping up and down as the feed resizes in height for every news item.

I think I'm still not understanding why the "flip" animation bar has to be taller than the "slide" animation bar when displaying the same news item. Regardless, it's fine that it's intentional, I would then be looking for a way to add some padding specific to the "slide" animation news bar.

2. As mentioned in your other thread, I really recommend appending your changes to the bottom of your stylesheet instead of making the changes directly in the corresponding default PB styles. It will be far easier to diagnose what changes were made and how they impact the rest of the CSS — this is, as the name suggests, "cascading", so changes listed at the bottom will override the default PB style and show what specifically was changed instead of requiring folks to sit and compare context-less CSS.  

My point was more that the CSS should not be causing the issue because the issue persists whether the CSS is default or customized. I provided my CSS so someone could glance at it and suggest something to add to it.

If it helps someone solve the issue, here is the default CSS and the things I customized:

/* News Bar default CSS */
#news { color: @nav_tree_color; font: @nav_tree_font; text-decoration: @nav_tree_decoration; z-index: 9; height: 20px; background-color: @nav_tree_background_color; overflow: hidden; margin: 0 auto 10px; border: @nav_tree_border_width @nav_tree_border_style @nav_tree_border_color; .rounded-corners(@nav_tree_border_radius); }
#news .items { height: 20px; position: relative; overflow: hidden; }
#news .items > div > div { padding: 0 10px; line-height: 20px !important; }
#news .items div img { vertical-align: text-bottom; }
#news .nav { float: left; background-position: center; }
#news .nav > span { border-width: 0px 1px 0px 0px; border-style: solid; border-color: transparent; cursor: default; float: left; display: inline-block; padding: 0 3px; height: 20px; }
#news .nav > span.title { text-align: center; display: inline-block; height: 20px; padding: 0px 6px; line-height: 20px !important; }
#news .nav .arrow.left { .rounded-corners(@nav_tree_border_radius, 0, 0, @nav_tree_border_radius); }
#news .nav .arrow.left span { border-right-color: @nav_tree_border_color; }
#news .nav .arrow.right span { border-left-color: @nav_tree_border_color; }
#news .nav:hover { background-color: @nav_tree_hover_background_color; }
#news .nav:hover > span { border: @nav_tree_border_width @nav_tree_border_style @nav_tree_border_color; border-width: 0px @nav_tree_border_width 0px 0px; }
#news .nav:hover .arrow { background-color: @nav_tree_hover_background_color; }

/* News Bar CSS changes */
#news .items > div > div { font-size: 110%; text-align: justify; }
#news .items a { font-weight: bold; }
#news .nav { background-color: #3f3f3f; }
#news .nav > span { width: auto !important; border-width: 0px 0px 0px 0px; }
#news .nav > span.title { font-size: 130%; color: #ffffff; padding: 0px 10px; }
#news .nav .arrow.left { padding-left:15px; }
#news .nav .arrow.right { padding-right:15px; }
#news .nav .arrow.left span { border-right-color: #ffffff; }
#news .nav .arrow.right span { border-left-color: #ffffff; }
#news .nav .arrow.left:hover { border-right: 0px solid #3f3f3f; background-color: #333333; }
#news .nav .arrow.right:hover { border-right: 0px solid #3f3f3f; border-left: 1px solid #3f3f3f; margin-left: -1px; background-color: #333333; }
/* the follow items commented out
#news .nav:hover { background-color: @nav_tree_hover_background_color; }
#news .nav:hover > span { border: @nav_tree_border_width @nav_tree_border_style @nav_tree_border_color; border-width: 0px @nav_tree_border_width 0px 0px; }
#news .nav:hover .arrow { background-color: @nav_tree_hover_background_color; } */


[Kami]

I think I'm still not understanding why the "flip" animation bar has to be taller than the "slide" animation bar when displaying the same news item. Regardless, it's fine that it's intentional, I would then be looking for a way to add some padding specific to the "slide" animation news bar.

AH, okay my bad! I misunderstood the question ;~;

So this is just my personal hypothesis, but I believe the design intent was that if people are using the "slide" option that their content is shorter, whereas "flip" would wind up being more suitable for longer messages. Again, just a hypothesis, but it's based off of the behaviour I can see when switching between the two. So, if that was the intent, then the way the CSS is constructed for "slide" would assume shorter messages meaning the bar can be shorter with more appropriate padding for one-liners, whereas the CSS for "flip" would assume longer messages and make the assumption that all messages are long with the appropriate padding (leading to "extra" padding for shorter messages).

Adding more height to the slide version is possible! Try this at the bottom of your stylesheet:

/* Add padding to "Slide" version of News Feed */
#news { padding-top: 20px; padding-bottom: 20px; }

The reason your changes didn't work as intended is because you weren't targeting the correct element; you're targeting all of the nested elements within the news div, which wouldn't impact the height of the parent container. Change 20px to suit whatever padding you think is appropriate.

Please be aware that the above changes will appear to "break" the news feed if your font size for the element is larger than about 25px, and any changes in font size will wind up needing both a) adjustments in padding, and b) alteration of the line-height for the text within the message element.

[Matte]

Mar 31, 2023 14:41:00 GMT -8 Kami said:

Adding more height to the slide version is possible! Try this at the bottom of your stylesheet:

Your code works to increase the height of the container, but it increases the height of both animations. I'm looking for something to specifically target the slide animation. When I switch between the two animations, I don't want the news bar to change size.

I mentioned this in the other thread, but I tried adding the following to my CSS and it works, but only when there is a headline that wraps to two lines. When there is a headline that takes up only one line, the text is positioned too high in the bar. This leads me to believe that I'm looking for something like this, possibly still targeting "itemSlide", but I don't have it figured out to work how I want it to work in all situations.

#news .items .itemSlide { padding: 3px 10px; }

The reason your changes didn't work as intended is because you weren't targeting the correct element; you're targeting all of the nested elements within the news div, which wouldn't impact the height of the parent container.

The above .itemSlide code is the only change I've really added to try to alter my slide bar height. Everything else that I've added to the CSS is unrelated.

[Kami]

Mar 31, 2023 17:58:32 GMT -8 Matte said:

Mar 31, 2023 14:41:00 GMT -8 Kami said:

Adding more height to the slide version is possible! Try this at the bottom of your stylesheet:

Your code works to increase the height of the container, but it increases the height of both animations. I'm looking for something to specifically target the slide animation. When I switch between the two animations, I don't want the news bar to change size.

I mentioned this in the other thread, but I tried adding the following to my CSS and it works, but only when there is a headline that wraps to two lines. When there is a headline that takes up only one line, the text is positioned too high in the bar. This leads me to believe that I'm looking for something like this, possibly still targeting "itemSlide", but I don't have it figured out to work how I want it to work in all situations.

#news .items .itemSlide { padding: 3px 10px; }

Honestly, I've kind of hit the limit of my ability, time-wise, to assist here. This just requires a little more investigation than I have to spend due to work and other obligations. It's totally doable, but the way that the items are nested combined with your need to have it simultaneously apply to both versions is going to take time.

Sorry about that!

[Matte]

No problem, thanks for the help!

Topic still open to anyone able to pitch me ideas for either problem. Problem 2 is the more important one, as it actually makes the "slide" animation off-limits for me when I have a lengthy news headline.


EDIT: Chris solved my problem 2 in the plugins forum, which also pretty much solved my problem 1. Going to just not use the "slide" animation because I'm using the Change Name of "News" plugin.