Kevin Powell - Community•2y ago

Need a CSS expert (Tailwindcss)

I am trying to figure out chatGPT manage to stick the prompt area to the bottom. I copied their code but it doesn't work as expected and I am not sure how to get the same results. any help is appreciated Simple version: https://play.tailwindcss.com/IVZVV4w0jj Original Version: https://play.tailwindcss.com/Vd53rxT94D

Tailwind Play

An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.

Tailwind Play

An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.

12 Replies

MarkBoots•2y ago

instead of absolute use sticky

AliOP•2y ago

@markboots. will not work

MarkBoots•2y ago

well i changed it on you simple version, and it does work

<div class="sticky bottom-0 w-full bg-green-100 p-2">
  <input class="block w-full bg-white p-3" />
</div>

<div class="sticky bottom-0 w-full bg-green-100 p-2">
  <input class="block w-full bg-white p-3" />
</div>

AliOP•2y ago

yes but it stacks over the sidebar!

MarkBoots•2y ago

then put it in the the one where it should be

AliOP•2y ago

it should remain in its container , that is the tricky part

MarkBoots•2y ago

AliOP•2y ago

fine, but now look at the bottom-right corner

AliOP•2y ago

the full version works perfectly on chatGPT website. but the copied code doesn't work as expected! got the idea?

MarkBoots•2y ago

i don't work with tailwind a lot (read: at all), and i don't want to dive into what chatgpt does But, with a bit of understanding of css and reading the docs of tailwind, this works

<div class="flex bg-gray-300 min-h-screen" >
  <nav class="flex-initial w-60 sticky top-0  bg-gray-700/80">
    <div class="sticky top-0">sidebar</div>
  </nav>
  <div class="flex-1 p-5">
    <div class="text-2xl">
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Porro, maiores optio doloremque magni quos amet natus eveniet nam, atque dicta sapiente aut error recusandae laborum! Error maiores doloremque veritatis similique.</p>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Porro, maiores optio doloremque magni quos amet natus eveniet nam, atque dicta sapiente aut error recusandae laborum! Error maiores doloremque veritatis similique.</p>
      <!--more paragraphs-->
    </div>
    <div class="sticky bottom-0 bg-green-100 p-2 mb-3">
        <input class="w-full bg-white p-3" />
    </div>
  </div>
</div>

<div class="flex bg-gray-300 min-h-screen" >
  <nav class="flex-initial w-60 sticky top-0  bg-gray-700/80">
    <div class="sticky top-0">sidebar</div>
  </nav>
  <div class="flex-1 p-5">
    <div class="text-2xl">
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Porro, maiores optio doloremque magni quos amet natus eveniet nam, atque dicta sapiente aut error recusandae laborum! Error maiores doloremque veritatis similique.</p>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Porro, maiores optio doloremque magni quos amet natus eveniet nam, atque dicta sapiente aut error recusandae laborum! Error maiores doloremque veritatis similique.</p>
      <!--more paragraphs-->
    </div>
    <div class="sticky bottom-0 bg-green-100 p-2 mb-3">
        <input class="w-full bg-white p-3" />
    </div>
  </div>
</div>

give yourself some time to understand what is what and what it does. don't just copy something without understanding what it does and hoping it will just work. And before using tailwind, make sure you know at least the basics of css

AliOP•2y ago

😲

AliOP•2y ago

here is your solution https://play.tailwindcss.com/flHKgDCOSH start scrolling and you will see

Tailwind Play

An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.

Gaming

Programming

Need a CSS expert (Tailwindcss)