CODEWITHSUNDEEP
cssgridtailwind-css
Fred Hors
Fred Hors

Reputation: 4116

Tailwind grid dynamic sidebar/navbar width with main 100% width

I need a simple main div column 100% full.

Sometimes a sidebar can appear, with dynamic width.

REPL: https://codesandbox.io/s/tailwind-dynamic-sidebar-kw1ku

In this example you can see I'm not able to change sidebar width (which has every time a new width value) and I'm not able to "stretch" main div to 100% width.

How to do?

<div class="min-h-screen grid grid-cols-12">

  <div class="bg-green-500">
    <div style={`width: ${randomWidth}px !important;`}>
      Sidebar. This has dynamic width.
    </div>
  </div>

  <div class="bg-red-500">
    Main. This has full width.
  </div>

</div>

Upvotes: 0

Views: 7104

Answers (1)

Digvijay
Digvijay

Reputation: 8927

I would recommend a simple use of relative and absolute. Here's the codesandbox

<div class="min-h-screen w-full relative">

  {#if sidebarVisible}
    <div class="bg-green-500 h-full absolute left-0">
      <div style={`width: ${randomWidth}px !important;`}>
        Sidebar. This has dynamic width.
      </div>
    </div>
  {/if}

  <div class="bg-red-500 h-screen">
    Main. This has full width.
  </div>

</div>

For 100% width, you can use w-full and for full screen height h-screen

Upvotes: 1

Related Questions