Boxed display displaying weird?

  • Resolved sarahclose

    (@sarahclose)


    2 years, 12 months ago

    Hi, I am having the strangest problem. I have defined a custom author box and am using it on a variety of pages/posts with the exact same shortcode.

    However, it was displaying weird in 2 50% width columns, apparently because of a CSS flex setting. The author avatar was way over on the left, and the name/description was way over on the right, separated by a large white space. If I used custom CSS to eliminate the flex: 1 style (setting it either to flex: none or flex: 0.2), it displayed fine – though I had to use !important to make it work. BUT only on certain posts. On others, it’s separating again and it’s deferring to that CSS code that stipulates flex: 1 because it also has !important tag on it. So basically, on SOME posts, one !important tag is overriding the other… but not on ALL posts.

    The thing is, I cannot for the life of me find this other !important CSS code anywhere. The developer console makes it look like it’s part of the inline CSS somewhere, but I didn’t put it in. I’ve scoured every author box setting and custom CSS, and I’ve combed through & searched the default plugin CSS files and cannot find it anywhere.

    So my questions are:

    1. Why does the same shortcode display one way on some posts and another way on other posts?
    2. Where is this mystery CSS that is overriding my custom CSS? Specifically I am looking for this: .pp-multiple-authors-layout-boxed ul li > div:nth-child(1) { flex: 1 !important; }
    3. If the flex: 1 is needed, how else can I get the box to stop giving 50% of the space to the tiny avatar, and put the name/description next to the avatar instead?

    For reference, I tried using the default Boxed layout as well and am having the same problem, with the avatar sitting left and the description way over on the right. It does not look like the examples on your website. It seems like this can’t be a plugin conflict if the CSS code causing it display that way has your plugin name in it.

    Any ideas? Thank you!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter sarahclose

    (@sarahclose)

    2 years, 12 months ago

    Just wanted to say that after 6 hours sleuthing this, I figured it out. Basically, I was using 2 author shortcodes on a page. The first one was set to list just the author’s name under the post title, with no avatar. The author box at the bottom of the page was set to show the avatar and the bio of the author.

    There is a $custom_style in the PHP file for author boxes that stipulates that if there is no avatar used, the CSS rule for flex: 1 goes into effect, basically making sure that it bumps the name / bio over all the way to fill up where the avatar would go. What happened is that the FIRST shortcode in use on the page was set to no avatar, which deployed the flex: 1 rule… except when the second shortcode was read, which DID have an avatar, it was too late – the CSS rule was already read inline, turning my author box with the avatar into a 2 column flex: 1 situation.

    I solved this by simply adding an avatar to the first display use, and then using display: none to hide it – thereby fooling the PHP back into thinking that the avatar argument was set to false.

    A long 6 hours of trying to figure this out, but there ya go. I would like to suggest that maybe you figure out a way for this not to happen. It seems logical to me that someone might want to use both types of shortcodes on a single post or page – the name only, no avatar, at the top with the title, and the full bio & avatar after the post content.

    If I have completely missed something about how this should have worked, please let me know!

    Plugin Support Riza Maulana Ardiyanto

    (@rizaardiyanto)

    2 years, 12 months ago

    @sarahclose Could you confirm if your issue is related to this one: https://github.com/publishpress/PublishPress-Authors/issues/1304 ?

    Thread Starter sarahclose

    (@sarahclose)

    2 years, 11 months ago

    Hi – related in a sense, but not really. It’s true that only one box’s CSS would be listened to (as in, I could not !important my custom CSS rule above the one that was written into the PHP file that was taking effect). The larger problem was that the author-boxes.php file would only read the first instance’s avatar status, and if the first instance had no avatar, it went ahead and treated every instance as though it had no avatar from a custom-style perspective (the else parameter was to deploy a flex: 1 style), even when the second instance DID have an avatar. I wonder if simply removing the !important part of that else custom-style parameter calling the flex: 1 would allow the user’s own custom CSS to then take effect. But again… seems like the larger problem is that the PHP file shouldn’t really ignore the second instance’s avatar status and replace it with the first instance’s. If that makes sense.

    Plugin Support Riza Maulana Ardiyanto

    (@rizaardiyanto)

    2 years, 11 months ago

    Yes, that makes sense. However, I suspect the solution to the above GitHub issue will solve your issue as well. We will soon release the 4.1.3 version which will include the above patch. Please wait for the release and you can check later if the issue persists on 4.1.3

    Thread Starter sarahclose

    (@sarahclose)

    2 years, 11 months ago

    Excellent. I’ll test it out when the new release comes. Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Boxed display displaying weird?’ is closed to new replies.