Question 43719 in Html Question posted in
Some basic documentation can be found here.

How to make chat input stick to bottom of page with sidebar using tailwind css? – Html

I am trying to make a chat ui using tailwind css. What i am trying to create is a sidebar annotated with a message list view and lastly, a input to send message. I am unable to get the desired view. If you run this code using tailwind css input_message div doesn’t match the width of parent div, also when I use w-full for input_message, width becomes more than parent. Following is only the dummy design to tone down the issue I am facing currently.

<div class="flex h-screen">
  <div class="sidebar m-0 h-full w-1/5 border border-gray-500">Side Bar for chat list</div>
  <div class="m-0 h-full w-4/5 border border-gray-500">
    <div class="messages border border-gray-900">messages list</div>
    <div class="input_message absolute bottom-0 border border-gray-900">input message</div>
  </div>
</div>

Link to try the same: https://play.tailwindcss.com/aERqae8v1B

Can anyone please tell me solution for the same? What i want is to make input_message width to be same as that of parent. I am new to html and css and I have tried a lot of things but nothing seems to be working

Thanks in advance!

Tags:

2

Answers


  1. 0

    I will work with grid and flex in this case.
    Something like that:

    <div class="grid grid-cols-5 grid-rows-1 ">
  <div class="sidebar border-gray-500 bg-slate-500">
    Side Bar for chat list
  </div>
  <div class="flex flex-col justify-between w-full h-screen col-span-4">
    <div class="messages w-full border border-gray-90">
      messages list
    </div>
    <div class="inputmessage w-full border border-gray-900">
      input message
    </div>
  </div>
</div>

    https://play.tailwindcss.com/x119T4d7JQ

    Login or Signup to reply.
  2. 0

    You can do something like this

    <div class="flex">
  <div class="w-1/5 border-2 h-screen">
      Sidebar for chat box
  </div>
  <div class="flex w-full flex-col justify-between ">
    <div class="border-2">Messages List</div>
    <div class="border-2">input chat box List</div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search