topstats recent topics scroll hide works on chrome but not on FF or edge.

Say hello, ask a question or make a comment.
Post Reply
User avatar
clight77
Moderator
Posts: 24
Joined: Wed Apr 04, 2018 7:39 pm

topstats recent topics scroll hide works on chrome but not on FF or edge.

Post by clight77 » Wed Sep 19, 2018 4:57 pm

Hey ED, thx for the look.
I altered topstas.css and recent_active_body.html

I will post my changes.

css

Code: Select all

/**
*
* @package phpBB Extension - Top Stats
* @copyright (c) 2015 dmzx - http://www.dmzx-web.net
* @license http://opensource.org/licenses/gpl-2.0.php GNU General Public License v2
* @Author Stoker - http://www.phpbb3bbcodes.com
*
*/
[color=#00BF00]
/* scrollbar from codepen */
.scrollbar
{
	height: 250px;	
    overflow-y: scroll;

}

/*
 *  STYLE 1
 */

#style-1::-webkit-scrollbar-track
{
	display:none;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

#style-1::-webkit-scrollbar {
     width: 0px;

}

#style-1::-webkit-scrollbar-thumb
{
	
	display:none;
	border-radius: 6px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
}
[/color]


#vertical-ticker{
   position:relative;   
   height: 132px;
   overflow: hidden;
}

#vertical-ticker li{
   display: block;
}


HTML

Code: Select all

{% if RESENTSTATS_IS_COLLAPSIBLE %}
			<a href="{{ U_RESENTSTATS_COLLAPSE_URL }}" class="collapse-btn collapse-{% if S_RESENTSTATS_HIDDEN %}show{% else %}hide{% endif %}"
				data-hidden="{{ S_RESENTSTATS_HIDDEN }}"
				data-ajax="phpbb_collapse"
				data-overlay="true"
				title="{{ lang('COLLAPSIBLE_CATEGORIES_TITLE') }}">
			</a>
			{% endif %}		
			
			<ul {% if S_TS_JSSCROLL and not S_TS_TICKER %}id="vertical-ticker" {% elseif S_TS_TICKER and not S_TS_JSSCROLL %}id="news" {% endif %}class="topiclist forums">
			
			[color=#00BF00]<ul class="scrollbar"  id="style-1">[/color]
			
			{% if S_TS_JSSCROLL or not S_TS_TICKER %}
			 {% for recent_active in loops.recent_active %}
			 			 
			<li class="row">
				<dl class="starimg row-item">

User avatar
clight77
Moderator
Posts: 24
Joined: Wed Apr 04, 2018 7:39 pm

Re: topstats recent topics scroll hide works on chrome but not on FF or edge.

Post by clight77 » Wed Sep 19, 2018 5:00 pm

Hmmm [color] tag not working inside

Code: Select all

 tags.

User avatar
Sniper_E
Site Founder
Posts: 139
Joined: Sat Mar 24, 2018 10:52 pm
Location: Shreveport Louisiana

Re: topstats recent topics scroll hide works on chrome but not on FF or edge.

Post by Sniper_E » Wed Sep 19, 2018 6:12 pm

When the scroll bar shows in recent topics the column alignments get off from the forum alignment.

Ok I enabled topstats ext then added this margin line in topstats.css

Code: Select all

dl.starimg {
	margin-right: -16px !important;
}
See index page for results.

You only have to compensate for the extra space the scrollbar is taking up. No need for scrollbar css or html edits.
But this can't be there if there is no scroll bar. Like when Jscroll is enabled.
Image
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!™

User avatar
Sniper_E
Site Founder
Posts: 139
Joined: Sat Mar 24, 2018 10:52 pm
Location: Shreveport Louisiana

Re: topstats recent topics scroll hide works on chrome but not on FF or edge.

Post by Sniper_E » Fri Sep 21, 2018 2:22 pm

There is a line in recent_active_body.html you could add a .recent class in it like this.

Code: Select all

			<ul <!-- IF S_TS_JSSCROLL and not S_TS_TICKER -->id="vertical-ticker" <!-- ELSEIF S_TS_TICKER and not S_TS_JSSCROLL -->id="news" <!-- ENDIF -->class="topiclist forums<!-- IF not S_TS_JSSCROLL and not S_TS_TICKER --> recent<!-- ENDIF -->">
Then in the topstats.css add this new class.

Code: Select all

ul.recent {
	max-height: 260px;
	overflow-x: hidden;
	overflow-y: scroll
}

ul.recent dl.starimg {
   margin-right: -16px !important;
}
That can make your visible height more. And I changed the margin class to ul.recent dl.starimg
Image
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!™

Post Reply