ISSUE: Threaded Layout Forum Page as viewed on Internet Explorer
LOCATION /FORUM LAYOUT: Main Forum Page, Threaded Layout
DESCRIPTION: We were testing the Threaded Layout yesterday for the first time (since we've been using only the Extended Layout) and per advise, waited for the update and release of wpForo 1.6.1. Upon testing our Forum Page on different browsers, we noticed that on Internet Explorer, the Threaded Layout Users column, showed the Avatars with bigger sizes that covers the other rows and columns. I thought it was just our website, but when I checked the wpForo site, it shows the same issue.
BROWSER VERSION: Internet Explorer 11 (we use the latest one - new version updates automatically)
WPFORO VERSION: wpForo 1.6.1 released 3/11/2019
SCREENSHOT of ISSUE is below: I was really wanting to also use the Threaded Layout, it came out so nicely in Chrome and Firefox, but the Avatars just appeared like so, ONLY in Internet Explorer. Surely it will be a quick fix for the wpForo Team. 🙂 In the mean time, maybe we can put something like a Forum Announcement: "Best viewed in Chrome, or Firefox". So if in case some website visitors use the browser, Internet Explorer, and see these Avatars, they can maybe use the Chrome or Firefox browsers instead. I'm sorry to be the one to report this.
Attaching image
Thank you @crisw,
This CSS code should solve the issue. Please add it in Dashboard > Forums > Settings > Styles > "Custom CSS code" textarea.
#wpforo #wpforo-wrap .wpfl-4 .wpf-thread-users .wpf-circle a{
max-width: 100%
}
Hi @sofy,
Thanks for your code. It helped me to know which wpForo file to tweak. (I was already getting cross-eyed trying to study the wpForo codes 🙂). I really appreciate your help!
Since this particular issue just involves Internet Explorer browser, I got reacquainted with IE's known bugs. Some IE versions ignore the max-width property and just fetches the value of the width from the declared maximum width.
So I'm sharing here what I did on my forum.
I added this code on the Customized CSS:
#wpforo #wpforo-wrap .wpfl-4 .wpf-thread-users .wpf-circle a{
max-width: 100%;
width: auto !important;
width: 100%;
}
And I also added this code to my WP Theme file header, for good measure 🙂 :
<!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" lang="en-US">
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" lang="en-US">
<![endif]-->
<!--[if !(IE 7) & !(IE 8)]><!-->
<html lang="en-US">
<!--[if lt IE 9]>
<html class="ie ie9" lang="en-US">
<![endif]-->
<!--[if lt IE 10]>
<html class="ie ie10" lang="en-US">
<![endif]-->
<!--[if lt IE 11]>
<html class="ie ie11" lang="en-US">
<![endif]-->
I am attaching the "before and after" results screenshot of my above code. I have noticed that wpForo still shows the same on Internet Explorer 11 (screenshot on this other post), the code tweaks above might also help, and also for others to test their site using Internet Explorer 11 or lower, and those who might have a similar issue. Unfortunately, there are still a lot of people who use IE / Edge, because it comes loaded with their Windows Devices.
The wpForo Threaded Layout works fabulously in Chrome and Firefox. It's just with Internet Explorer latest version 11 and some lower versions of IE that this issue appeared. But it's fixed now, YAY! Thanks! 🙂
Hi @sofy. So I guess we can mark this Topic or Issue as "solved". But only you can "close" the topic. 🙂 Thanks!