WIP: Some bug and improvements

Bricks Version: 1.4.02
Browser: Chrome 90
OS: Windows.

Hi
I have faced some issue in RTL site, i just installed WordPress and bricks no other plugin

1- guidance tips does not show completely (element and structure panel too)


br-1-1

  • the width of the element panel has some RTL issue

https://drive.google.com/file/d/1bE4UsitQv-44M1Xkyz9NTWmDfMmxjN-1/view?usp=sharing

3- margin issue, left margin does not work
https://drive.google.com/file/d/1SFB-o2r5iqef4aauUxXCwDCsBI7LQuOj/view?usp=sharing

4- some breathing area and ability to add container

5- being able to right click on the elements in structure panel will be so cool and user frendly
br-5

Hi,
Thanks so much for your report(s)!

  1. We already have a report about this and we’re working on it :slight_smile:
  2. What’s wrong with the width? As far as I see, the problem is the same as 1) - the position of the tooltips.
  3. Margin (left/right) cannot work with the current setup of the container, because the width of the container always has priority. We will simplify the container in the next version and add additional sections and divs( that will allow you to use left and right margins). What you can do now is to set the width of the container to “auto” - then the margins will work as expected :slight_smile:
  4. Yep, this has been addressed a few times on the forum.
  5. A matter of taste I think. Currently you do not have to click at all :wink:

Best regards,
timmse

Hi @timmse
About Issue Number 2:
When panel is dragged toward main designing area it should expand.
This is working as above in LTR mode but in RTL mode it has reverse result. When we drag panel in order to expand it the panel shrinks and when we want to shrink it the panel expands.
Regads,

1 Like

thank you for reply
I faced some issues, please watch the video i linked below
6- when i add a container (no wrap) and set the direction horizontal, it should place all the element inside of it equally, but when i add some images they are not placed in the container
For example when i try to put 4 images in one container (no wrap) it should divide the width to four 25% but this is not happening

Also when i activate the wrap option and set the width of elements to percentage, its a bit weird sometimes its working fine and sometimes not working

7- the another issue i faced, when i set color in gradient/ overlay part, the size of the images changed! i think it has some problem when the width of images set with percent %
I dont know if they are bug or not but it seems a bit so much weird :slight_smile:

https://drive.google.com/file/d/1YFhRiZMcBJdhxQrIsCng4TGTzO-vPNRk/view?usp=sharing

8- i face anther problem with the panel, i show in the link below @timmse

https://drive.google.com/file/d/1zYGKWJE7j8kaeq5xHTdhr_VGRLbSCygf/view?usp=sharing

9- I set a container to horizontal (wrap) and then add 4 elements (each element 25%), when I add 20px column’s gap, the forth element go to the next row! But it should count the 20px gap as the 100% of the container
The another problem is that how can i set row gap when i set the container to wrap?
Please watch the link below to understand what i mean (its a bit hard to write :sweat_smile:)

https://drive.google.com/file/d/1bEsUs3P6QO1Ux4HraISwXveghruWPawF/view?usp=drivesdk

thank you, yes i meant to show both bugs in the video, dragging the panel width has some issue
actually

Thanks for the explanation @Sharif_Payenda ! Now I understood :slight_smile: RTL is often confusing for non-RTL users…

@Mehdimoradi In general, it makes sense to create a separate report for each (possible) bug since threads of this kind with 9 problems by now quickly become confusing and, above all, difficult to follow. Besides, it doesn’t make sense to start at 1 again - that’s why I increased your list so that people can follow your reports. No offense :slight_smile:

  1. Generally, yes, but with images, it’s a different story. Images have an initial size that is always treated preferentially within the Flexbox model. It is not a Bricks bug but can easily be solved by using a wrapper for the image (div, figure, whatever you like).
  2. You’re right, the image inherits everything from the wrapper, which shouldn’t be the case. I’ve added it to our bug tracker. In the meantime, it seems you can use the following custom CSS to fix the issue:
.brxe-image.tag img {
  all: unset; 
  max-width: 100%;
  height: auto;
}
  1. I’ve added it to the bug tracker as well.
  2. Not a bug, as 4x25% equals 100% . If you then add 60px gap (3x20px), it’s more than a 100% in total :wink: You can use calc to determine the exact column width including the gaps by subtracting the column width (25%) by the number of gaps (3) multiplied by the gap value (20) divided by the number of columns (4). It sounds complicated, but it isn’t :wink:
width: calc(25% - 15px);
/* width: calc(column-width - (gapCount*gapValue)/columnCount); */

As said above, it would be great if you create a separate thread per problem in the future. Thank you!

Best regards,
timmse

1 Like

Thank you so much :heart_eyes:
I just figure it out that we can use sth like this in bricks “width: calc(25% - 15px)”

Because i was using elementor with same problem and no solution when i was using percentage % for the columns

By the way im engineer and my math is so good, LOL :joy:

1 Like