Bug in container block

  • Resolved Walter Lopez

    (@lopwalj)


    5 years, 1 month ago

    Hello there.
    I ran into an edge case bug with the container block.

    I have a design that is full width but the inner content needs to have a max-width set AND said content needs to be left aligned completely (it needs a background) so I can’t just set the inner content to contained because it automatically adds auto margin to both sides to center the content… so I added a new container and set the parent width to the desired max-width and set the margin-left value to 0 but it still keep adding margin-left auto.

    Steps to reproduce:
    1. Add a container block and set it full width.
    2. Add a container inside and set the container width for example at 800px and set the margin left to 0.
    3. As you can see, the margin keeps getting a value of auto even tough it’s supposed to be applied to the inner div, not the parent.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support David

    (@diggeddy)

    5 years, 1 month ago

    Hi there,

    that is the expected behaviour, not a bug… currently if you want to left align the inner container then see this topic:

    https://ww.wp.xz.cn/support/topic/container-left-alignment/#post-14117244

    In future updates to GB and GB Pro we will be adding flex controls for the Grid Block which will allow you to do this within the editor.

    Thread Starter Walter Lopez

    (@lopwalj)

    5 years, 1 month ago

    Hi David, thanks for taking the time to review and respond to my report.
    I don’t think that’s the expected behavior although I may be wrong.

    If I add a container with both the container and the inner container full with and then add another container with a specific width (the whole container, not the inner container and then in the spacing tab set the margin left to 0, it should exactly add the CSS rule you pointed in another support thread.

    Let’s try again. Please try to reproduce yourself:
    1. Add a full-width container with the inner container full width. (https://prnt.sc/11xays7)
    2. Add a container block inside with a specific width (I mean, apply the width to the outer div, not the inner) and set the margin 0 in the spacing section. It should be left aligned. (https://prnt.sc/11xb033 As you can see, I set the outer container to a contained width instead of the inner container).

    In the generated CSS, the margin is set to 0 but there is a margin-left: auto rule that takes priority because of the order https://prnt.sc/11xb2i4.

    • This reply was modified 5 years, 1 month ago by Walter Lopez.
    Plugin Support David

    (@diggeddy)

    5 years, 1 month ago

    Sorry but that is Expected behaviour – its how we intended it to work.
    In the majority of uses cases a centred inner container is required.

    You and only one other user has so far raised it as an issue – which we will be addressing in a later update to make it so you can align the inner container.

    In the meantime the CSS method i provided in that link is the way to change it.

    Thread Starter Walter Lopez

    (@lopwalj)

    5 years, 1 month ago

    It does make sense what you say about the “Expected behavior” for the inner container but it doesn’t make sense for the outer container knowing that a block setting is already offered.

    Anyway, thanks David. Looks like this will not be considered a bug.

    Plugin Support David

    (@diggeddy)

    5 years, 1 month ago

    Anyway, thanks David. Looks like this will not be considered a bug.

    Thats correct – but as i mentioned we will be adding some options to control the alignment – so out of the box, inner containers will be centred but we will provide some other options to change that.

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

The topic ‘Bug in container block’ is closed to new replies.