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

XF 1.2 Forum Rollover Thread Popup Box Not Displaying Large Thread Forums

Wesker

Well-known member
#1
We're having issues loading the rollover thread popup box seen in the image below for forums that consist of thousands of threads. Smaller forums experience no issues. Is there a way to fix this?

 

Mike

XenForo developer
Staff member
#2
There's no known issue (and no reason this should really vary based on forum size). There are forums here with thousands of threads and it works fine.

Can you send a link so we can see the problem?

(Obviously, also check with the default style and all add-ons disabled.)
 

Wesker

Well-known member
#3
Mike if it's okay I will PM you the information. Let me do what you said first though and switch to default and disable add ons.
 

Wesker

Well-known member
#4
Disabled all mods, wasn't able to fix this. It seems to specifically be an issue when the forums has several hundred or more posts. Being that we're importing multiple forums into one, some forums contain tens of thousands of threads.

I then switched to the default theme and it works. It now appears their is a conflict with the specific theme.

Is there anyway I can get around this, something specific I can enter into extra.css or any recommendations on what I can do to fix this?
 

Mike

XenForo developer
Staff member
#5
You'd need to identify the issue. I honestly don't know what might cause it so I couldn't give any recommendations.
 

Wesker

Well-known member
#6
You'd need to identify the issue. I honestly don't know what might cause it so I couldn't give any recommendations.
Well what we know here is that:

1). It's specifically our theme.
2). It's working in smaller forums with less threads but in bigger forums with many threads, it doesn't work.

Can you at least point us in the right direction on how we should go about resolving this?
 

Autonamus

Active member
#7
It looks like you're using Flexile Dark which isn't updated for 1.2 as far as I know so the issue will likely be one of the many out of date templates.

Now that I have actually read the thread correctly I see you were using that image as an example and didn't actually specify it was the forum you were talking about.
 

Wesker

Well-known member
#8
It looks like you're using Flexile Dark which isn't updated for 1.2 as far as I know so the issue will likely be one of the many out of date templates.

Now that I have actually read the thread correctly I see you were using that image as an example and didn't actually specify it was the forum you were talking about.
I'm using flexile theme, however I made the changes to make it dark manually.

The issue only happens when you have a forum with at least 20 or more threads. Any thread with less than 20 threads doesn't have an issue. I have confirmed with Andy who also uses the Flexile Theme that his forum isn't experiencing any issues even with tens of thousands of threads so it's specifically something involving my theme that needs to be adjusted.
 

Wesker

Well-known member
#10
Still don't know the issue from the image above. What is wrong
The image above is fine. That's how we want to make it work.

With us though, seems when we get 5 to 15 threads in one forum, we run into issues.

Check your PM. I think I found the issue. Do you know where I can specifically edit this to try to test to get this working?
 

Wesker

Well-known member
#11
Okay I found the issue. The rollover menu is displaying but it's displaying to the bottom of the page. Where specifically can I change this to make adjustments.

Basically when you rollover one thread, it's displaying 8 threads down.
 

Wesker

Well-known member
#13
The problem is the popup box, which contains the first few lines inside the thread, that should show up when rolled over on the thread title. It doesn't show near the thread title when rolled over it, rather it shows up at the very bottom of the screen. More often it doesn't shows up. I still need to zoom out the view in order for me to see it at the very bottom.
 

Wesker

Well-known member
#15
I now know what it is. It's the PreviewTooltip. I just don't know which one in xenforo.css to adjust. I need to bring it up because when the preview box shows, its at the very bottom of the screen. I need to bring it up so that when I rollover a thread title, the preview box should show up near it. Is it .xenPreviewTooltip ?
 

Wesker

Well-known member
#18
Here is what preview_tooltip code is set at but it doesn't fully resolve the issue.
Code:
<div id="PreviewTooltip">
    <span class="arrow"><span></span></span>
 
    <div class="section">
        <div class="primaryContent previewContent">
            <span class="PreviewContents">{xen:phrase loading}...</span>
        </div>
    </div>
</div>
 
Last edited:

Wesker

Well-known member
#19
Here is the xenforo.css file

Code:
/* ***************************** */

#PreviewTooltip
{
 
    display: none;
 
}

.xenPreviewTooltip
{
    @property "previewTooltip";
    border: 10px solid @primaryDarker;
    border-radius: 10px;
    position: relative;
    box-shadow: 0px 12px 25px rgba(0,0,0, 0.5);
    width: 400px;
    @property "/previewTooltip";
 
    display: none; 
    z-index: 15000;
    cursor: default;
 
    border-color: {xen:helper rgba, @previewTooltip.border-color, 0.5};
}

    .xenPreviewTooltip .arrow
    {
        @property "previewTooltipArrowOuter";
        border-top: 15px solid rgba(3,42,70, 0.25);
        border-right: 15px solid transparent;
        border-bottom: 1px none black;
        border-left: 15px solid transparent;
        position: absolute;
        bottom: -15px;
        left: 22px;
        @property "/previewTooltipArrowOuter";
     
        _display: none;
    }
 
        .xenPreviewTooltip .arrow span
        {
            @property "previewTooltipArrowInner";
            border-top: 15px solid @primaryContent.background-color;
            border-right: 15px solid transparent;
            border-bottom: 1px none black;
            border-left: 15px solid transparent;
            position: absolute;
            top: -17px;
            left: -15px;
            @property "/previewTooltipArrowInner";
        }

    .xenPreviewTooltip .section,
    .xenPreviewTooltip .sectionMain,
    .xenPreviewTooltip .primaryContent,
    .xenPreviewTooltip .secondaryContent
    {
        margin: 0;
    }
 
        .xenPreviewTooltip .previewContent
        {
            overflow: hidden; zoom: 1;
            min-height: 1em;
        }

/* ***************************** */
 
Last edited:

Tracy Perry

Well-known member
#20
Here is what preview_tooltip code is set at but it doesn't fully resolve the issue.

<div id="PreviewTooltip">
<span class="arrow"><span></span></span>

<div class="section">
<div class="primaryContent previewContent">
<span class="PreviewContents">{xen:phrase loading}...</span>
</div>
</div>
</div>
Wesker... I would suggest instead of just pasting code in like you did above to start either prefixing your code segment with the pertinent BBCode for the code or even easier using the Code button on the toolbar.
This looks much nicer and easier to read than what you posted and is easier to make out without having to figure out what the smiley should be. As you can see, the : P (which will be displayed as a tongue sticking out smiley if adjacent to each other) is not displayed below. The other benefit is you do not get the line wrap in the code box as it is scrollable left/right.
Code:
<div id="PreviewTooltip">
<span class="arrow"><span></span></span>

<div class="section">
<div class="primaryContent previewContent">
<span class="PreviewContents">{xen:phrase loading}...</span>
</div>
</div>
</div>