CODEWITHSUNDEEP
cssreactjsflexbox
DJ2
DJ2

Reputation: 1751

Styling sidebar with main content + sticky header/footer using flexbox

I have a sidebar and main content as well as a navbar built with SUIR . I want to make sure that the main content is always in view and not cut off when the sidebar is visible.

Here's my dashboard component that's rendering the sidebar/content components

const Dashboard = props => {
  return (
    <div
      style={{ height: "100vh", display: "flex", flexFlow: "column nowrap" }}
    >
      <div>
        <PageHeader />
      </div>
      <div style={{ flex: 1 }}>
        <SidebarExample>
          <DashboardContent />
        </SidebarExample>
      </div>
    </div>
  );
};

I also have a codesandbox here with the example

Upvotes: 1

Views: 592

Answers (2)

isherwood
isherwood

Reputation: 61114

The problem is that there's an element in between your flex row element and the two inner elements (sidebar and content). Here's what I see in the browser:

<div style="flex: 1 1 0%;">
  <div class="ui segment pushable"> <!-- this element needs flex -->
    <div class="ui inverted vertical ..."> ... </div>
    <div class="pusher"> ... </div>
  </div>
</div>

Restructure a bit to fix that and it works fine.

Upvotes: 1

Joel
Joel

Reputation: 6211

I feel like you can solve this problem by just showing your menu over your main content using position:absolute; and z-index.

But from what I think you want, you could try a CSS approach like this:

-----------------------------
|    |                      |
|    |                      |
|    |                      |
|    |                      |
|    |                      |
 menu      content
 10%        90%

then apply it like this:

.menu[style*="hidden"] .content {
   width: 90vw;
}

.menu:not([style*="hidden"]) .content {
   width: 100vw;
}

Assuming you're applying visibility: hidden; to your menu when you're hiding it. Otherwise, you can change "hidden" to whichever property you're applying.

Upvotes: 1

Related Questions