NO BUG: Posts List: Content on the left, Image on the right have no effect

[jayguntor]

I have a page with a Posts List, and the item list has the content set on the left side while the image is set on the right side. After updating to V 1.11.1.1 everything was reversed ignoring the settings. Only rolling back to V 1.11 solves the problem.

[timmse]

Hi,
Thanks so much for your report!

Unfortunately, I cannot reproduce the issue. Would you be so kind as to provide a live link and a screencast using https://jam.dev showing and explaining what’s happening?

Best regards,
timmse

[jayguntor]

Here is the link to the video:

posts-bug.mp4

[timmse]

This looks like a classic “outdated styles in cache” problem.

Please clear your cache if you are using a caching plugin and regenerate the styles if you are using external styles (Bricks “ Settings ” Performance).

[jayguntor]

Of course, I have tried that already before reporting; hence, the only solution is to revert versions to solve it. And no, there is no cache plugin since we are still in development.

[timmse]

@jayguntor

And no, there is no cache plugin since we are still in development.

Well, I can’t know that because I don’t have a live link, so I can only speculate. But that’s good! Caching during the development phase generally causes more problems than it offers any advantages

Back to the problem: Please send temporary login credentials and a link to this thread to help@bricksbuilder.io using the email address you used during the purchase.

[jayguntor]

@timmse I made a new bricks playground with the same bug. Sent the credentials as you requested.

[timmse]

Thanks so much for the login data! I identified the culprit: It’s an important statement introduced in 1.11.1 that overrides the “image on the right” rule.

You can temporarily fix it by adding this to the posts elements custom CSS:

%root% .bricks-layout-wrapper[data-layout=list].image-position-right .bricks-layout-inner {
  flex-direction: row-reverse !important;
}

[jayguntor]

Thank you so much. That resolved the problem!

[Matej]

Hello @jayguntor,

I overview this task and yep, @timmse is right - it happens because of the !important statement that overrides the “image of the right” rule.

But, this !important statement is only present if you change Layout → Direction (Item) control, so with that in mind, you have two options:

1. Don’t set “Direction (Item)”, and keep it as default, and only change “Image Position” to “Right”. And the “Right” control will set the needed CSS styles so that the images will show on the correct side.

2. Second option is to not set “Image Postion”, and only choose “Direction (Item)” as “Horizontal (row)” and also select “Reverse”. This will create same effect, images will be on the right.

Basically, you have to keep in mind that if you set anything as a “Direction (Item)”, it will overrule all other CSS rules/styles.

Because of this, I’ll mark the topic as no-bug, as that’s how it works, but let me know if you need anything else.

Ps. Feel free to use the solution provided by @timmse, as it’s working for you and it’s a valid one I just wanted to add additional information and options for possible feature readers.

Best regards,
Matej

[jayguntor]

I would suggest removing the image position. Any user who would see the direction tool and the image position option would think both of them can work together. That’s what I did with v1-11 and it worked fine. Comes v1-11-1-1, and site is broken.

[Matej]

What we maybe should add, is a notification/description that “Direction” will take a priority. That would make it clearer.

Matej