• Issue

  • Problem with RTL format when "Best Answer" extension is enabled

Hello all :
I hope you are well
My forum URL is https://foro.arsoporte.com

When I first learned about Flarum, I wanted to benefit from it, and since my forum is in the Arabic language, I contributed to translating a large part of it into this language. Although the RTL extention is very nice, there are still some problems that it would be good to fix in the version of Right to left. Here is one of them:
This is a screenshot of the page’s normal state:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifp-ytpJhAhb-p0-W5iD8FEurf1n55IsjTgV1EQRbWkdl5r4hZ8STjoKMWqkwuT_T8ygd1fKbRmZznvog9FaxMmTTq-kb-GVu5Vb3Ec_1pNG6jHKy-gi5y7Uq6IDWejh_YaJihOIjbgdvhvxMX4e2a1oO_i2Q6OXw9IvIkUH-O-t5HZzrnA4VLTXQlag/s16000/Captura%20de%20pantalla%202024-05-22%20192714.png

See what happens once you activate the “Best Answer” extension:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9UJNL_kngHAd6LX70pn8RDXym4oj3xyy2G_q7R_mAV1-j5MB_NdzaKeull4Jbt4Lxrho7-O99Y9NUl9lNAiK0PBam2z12PidnLwUQoLJ-LirS6-6KoKF-ip2Nd-7aHStYnyOS00Xdm6uGubwDTt61UeEeVgd-utZWWfnmju-ED85q4QLCz_pHUH3Nxw/s16000/%D8%AA%D8%B5%D9%85%D9%8A%D9%85%20%D8%A8%D8%AF%D9%88%D9%86%20%D8%B9%D9%86%D9%88%D8%A7%D9%86%20(1).png
Notice that the profile picture overlaps the main content.
Once I disable the extension things go back to normal, but unfortunately, I need this extension.

With Regards

    medelinor hi, could you please confirm whether this happens only at FreeFlarum or is also reproducible on another Flarum instance that is independent from FreeFlarum?

    If the latter, please report the issue here: https://discuss.flarum.org/d/21894, as FreeFlarum cannot fix issues in extensions directly. In this case, I assume that it’s a CSS issue in FoF Best Answer - I would be able to tell you more if you share URL to the discussion where this issue is clearly visible and reproducible (when FoF Best Answer is enabled)

        Hello SKevo
        I hope you are fine

        I didn’t understand exactly what was meant by the first paragraph, but in general, this error occurs when I activate the “Best Answer” extension on my forum hosted on Freeflarum that uses the “RTL” extension.

        I’ve only set the “Best Answer” extension to one tag, and you can access a test post here, and you can start any discussion in this tag to get a closer look at the topic.
        I hope this is useful, Thank You

            medelinor thanks, I can reproduce it now. It seems to happen only for wider viewports. I’ll have a more detailed look at the CSS and let you know if I find anything

                SKevo Thank you very much for following
                May I know if I can turn off the “Best Answer” extension now, or leave it enabled until you tell me to turn it off?
                Unfortunately, the effect reaches other forum tags as well

                    SKevo Good. The extension will remain activated until you tell me to stop it or the problem is fixed
                    As a follow-up to the topic, the extension will also reach the Profile page for members who have already started or participated in a discussion.
                    Good luck

                        medelinor please, try adding this CSS code under Administration > Appearance > Custom CSS and see if it helps:

                        .Post-header > ul > li {
    margin-right: 10px !important;
}

                        Unfortunately, I am not sure which extension modifies this CSS. I haven’t found any reference to it in FoF Best Answer’s source code.

                            SKevo Thank You.
                            I tried the code, but unfortunately, the code did not cause any fix.
                            I cleared the cache and used an incognito browser to try, but it’s still the same.

                                medelinor ah, apologies. It seems that the !important directive is required. Try this one, please:

                                .Post-header > ul > li {
    margin-right: 10px !important;
}

                                    SKevo This code is useful, and works well. The problem was successfully fixed.
                                    As I browse the forum, I’ll see if it’s completely fixed, and I’m likely to say the problem is completely fixed.
                                    Thank you very much for your help ❤️

                                      SKevo locked the discussion .