Menu icon Foundation
grid-block in a vertical grid-block off screen

---
name: fulfillment
url: /fulfillment
---

<div class="vertical grid-block">
    <div class="grid-block">
        <div class="grid-block">
            <div class="grid-content text-center">
                <h2>Fulfillment</h2>
            </div>
        </div>
    </div>
    <div class="grid-block">
        <div id="thisBlockGridMarginLeftMinus1Rem" class="grid-block">
            <div class="grid-content">
                <h4>Search</h4>
            </div>
        </div>
        <div class="grid-block">
            <div class="grid-content">
                <h4>Functional</h4>
            </div>
        </div>
    </div>
</div>


            

         

The grid block with id thisBlockGridMarginLeftMinus1Rem gets a left and right margin of -1rem when the top block is vertical resulting in the Search header being cut off. I was expecting two rows. One with the Fulfillment header, the other with the two grid contents...properly contained within the screen.

Capture

---
name: fulfillment
url: /fulfillment
---

<div class="vertical grid-block">
    <div class="grid-block">
        <div class="grid-block">
            <div class="grid-content text-center">
                <h2>Fulfillment</h2>
            </div>
        </div>
    </div>
    <div class="grid-block">
        <div id="thisBlockGridMarginLeftMinus1Rem" class="grid-block">
            <div class="grid-content">
                <h4>Search</h4>
            </div>
        </div>
        <div class="grid-block">
            <div class="grid-content">
                <h4>Functional</h4>
            </div>
        </div>
    </div>
</div>


            

         

The grid block with id thisBlockGridMarginLeftMinus1Rem gets a left and right margin of -1rem when the top block is vertical resulting in the Search header being cut off. I was expecting two rows. One with the Fulfillment header, the other with the two grid contents...properly contained within the screen.

Capture
FranzZemen over 4 years ago

Seems like the class="grid-content" in the ui-view div is the issue. When I remove that, the problems solves itself. But that class came with the install template...

Which brings a lot of big holes on documentation on how to next different kinds of blocks inside of each other.

Brandon Arnold over 4 years ago

Hey Franz,
I'd love to see a sketch or mockup of what you''re trying to accomplish and see if we can help figure it out a little better.