I created a chatbox using Tailwindcss as my CSS framework and Laravel as my back end. Currently, I am in the design phase. I want my chatbox to display active users in a row and I use overflow-x so users can scroll horizontally, but the result is like on the link my output for overflow-x with display flex
<div class="w-[340.8px] flex items-center justify-start h-14 border relative overflow-x-auto overflow-y-hidden">
<div class="user-profile mx-2"></div>
<div class="user-profile mx-2"></div>
<div class="user-profile mx-2"></div>
<div class="user-profile mx-2"></div>
<div class="user-profile mx-2"></div>
<div class="user-profile mx-2"></div>
<div class="user-profile mx-2"></div>
<div class="user-profile mx-2"></div>
<div class="user-profile mx-2"></div>
<div class="user-profile mx-2"></div>
<div class="user-profile mx-2"></div>
<div class="user-profile mx-2"></div>
<div class="user-profile mx-2"></div>
</div>
can anyone help me how to scroll in x-axis?
Related
I have the following code:
<div class="grid grid-cols-5 divide-x divide-gray-700 text-center">
<div>Col</div>
<div>Col</div>
<div>Col</div>
<div>Col</div>
<div>Col</div>
</div>
<div class="grid grid-cols-5 gap-4">
<div class="h-20 border bg-gray-300"></div>
<div class="h-20 border bg-gray-300"></div>
<div class="h-20 border bg-gray-300"></div>
<div class="h-20 border bg-gray-300"></div>
<div class="h-20 border bg-gray-300"></div>
</div>
https://play.tailwindcss.com/TLsKEicCOa
That generates this:
How can I make the vertical borders and the boxes align?
Note: I need two grids, I can't just use one.
Since I couldn't solve the issue, I decided to research it for you. Actually, this issue was a problem and it needed to make a few changes. You can find solutions for this issue here. But still I have a short solution for you as follows. If we give a margin to all child elements, there seems to be no problem. As you wish...
<div class="grid grid-cols-5 divide-x divide-gray-700 text-center">
<div>Col</div>
<div>Col</div>
<div>Col</div>
<div>Col</div>
<div>Col</div>
</div>
<div class="grid grid-cols-5 [&>*]:mx-2">
<div class="h-20 border bg-gray-300"></div>
<div class="h-20 border bg-gray-300"></div>
<div class="h-20 border bg-gray-300"></div>
<div class="h-20 border bg-gray-300"></div>
<div class="h-20 border bg-gray-300"></div>
</div>
<script src="https://cdn.tailwindcss.com"></script>
i created a page layout with tailwind css with help of the flex utilities. Now i struggle with one issue.
On the right side there is a header section with title and description.
I want now that the description is never taking more than 100% of the width and automatically truncates the text if it has more.
I prepared a working example to demonstrate my problem:
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="flex bg-blue-100 h-screen">
<div class="bg-green-100 w-16 flex-none">A</div>
<div class="bg-blue-100 w-96 flex-none">SB</div>
<div class="bg-red-100 flex-auto">
<div class="flex flex-col">
<div class="flex flex-col space-y-2 bg-pink-100 p-3">
<h1 class="bg-yellow-100">Title</h1>
<h2 class="bg-yellow-200 truncate">Description: the text of this title should automatically truncate but it should never use more than 100% of the parent element</h2>
</div>
<div class="bg-pink-200 p-3">...</div>
</div>
</div>
</div>
It would be super nice if someone could help my by solving this problem.
Many thanks in advance
Kai
Just add 'overflow-hidden' to your third column.
<div class="flex bg-blue-100 h-screen">
<div class="bg-green-100 w-16 flex-none">A</div>
<div class="bg-blue-100 w-96 flex-none">SB</div>
<div class="bg-red-100 flex-auto overflow-hidden">
<div class="flex flex-col">
<div class="flex flex-col space-y-2 bg-pink-100 p-3">
<h1 class="bg-yellow-100">Title</h1>
<h2 class="bg-yellow-200 truncate">Description: the text of this title should automatically truncate but it should never use more than 100% of the parent element</h2>
</div>
<div class="bg-pink-200 p-3">...</div>
</div>
</div>
</div>
I suggest you
use overflow-ellipsis together overflow-hidden, that will help you description is never taking more than 100% of the width, even help for responsive design on the tablet mode(768px) easily
<div class="flex flex-col space-y-2 bg-pink-100 p-3 ">
<h1 class="bg-yellow-100">Title</h1>
<h2 class="bg-yellow-200 overflow-clip overflow-hidden">Description: the text of this title should automatically truncate but it should never use more than 100% of the parent element</h2>
</div>
I hope helped you
I have an overflow div in y axis and want it to be exactly the 80% of the height of the screen. Now I have this <div class="overflow-y-auto h-96"> which works but the height must be bigger than 96, exactly 80% of the whole screen (to leave space for header and footer).
Using h-4/5 seems not to work.
<div class="h-4/5 bg-yellow-200 overflow-hidden">
<div class="overflow-y-auto bg-yellow-500 space-y-3">
<div class="bg-blue-300 h-48">
</div>
<div class="bg-blue-300 h-48">
</div>
<div class="bg-blue-300 h-48">
</div>
<div class="bg-blue-300 h-48">
</div>
<div class="bg-blue-300 h-48">
</div>
<div class="bg-blue-300 h-48">
</div>
<div class="bg-blue-300 h-48">
</div>
<div class="bg-blue-300 h-48">
</div>
</div>
</div>
</div>
Update:
I got this (also available here https://play.tailwindcss.com/NlZdzWfkyD) but if I uncomment the topbar it fails, please, any idea?
<div class="h-screen">
<div class="h-full">
<!--<div class="bg-blue-400 py-3">topbar</div>-->
<div class="pl-6 pr-16 pt-12 h-full">
<div class="h-full border border-gray-200 rounded-t-xl px-20 pt-3 flex flex-col">
<div class="h-1/2 bg-red-100"></div>
<div class="h-1/2">
<div class="flex flex-col h-full">
<div class="bg-yellow-200 overflow-hidden">
<div class="overflow-y-auto bg-blue-500 space-y-3 h-full">
<div class="bg-blue-300 h-48"></div>
<div class="bg-blue-300 h-48"></div>
<div class="bg-blue-300 h-48"></div>
<div class="bg-blue-300 h-48"></div>
<div class="bg-blue-300 h-48"></div>
<div class="bg-blue-300 h-48"></div>
<div class="bg-blue-300 h-48"></div>
<div class="bg-blue-300 h-48"></div>
</div>
</div>
<div class="h-20"></div>
</div>
</div>
</div>
</div>
</div>
</div>
You can do h-[80vh], which would set the height to 80% of the screen height.
Basically, I have a bootstrap container and 2 rows in it, one being the header and the other the content. I would like to have the container to have the height of the viewport so that the content is scrollable.
<div class="container-fluid overflow-hidden h-100">
<div class="row">
<div class="col">
<h1>Header</h1>
</div>
</div>
<div class="row content-area">
<div class="col">
<div>Content blah...</div>
</div>
</div>
</div>
.content-area {
max-height: 100%;
overflow-y: auto;
}
The max-height renders the content full height of the parent which is the container so a part of the content is chopped off the view. I would like the content to fill the rest of the container's height.
I tried flex-grow-1 from bootstrap instead of the css height but no luck.
Make the container vh-100 d-flex flex-column and then add flex-grow-1 to the row.
<div class="container-fluid overflow-hidden vh-100 d-flex flex-column">
<div class="row">
<div class="col">
<h1>Header</h1>
</div>
</div>
<div class="row content-area bg-info flex-grow-1">
<div class="col">
<h1>Content blah... </h1>
...
</div>
</div>
</div>
Demo: https://codeply.com/p/7u2lXo0jyG
Related: Bootstrap 4 row fill remaining height
Add vh-100 class on the first row. It will make the viewport height, 100%.
<div class="container-fluid overflow-hidden h-100">
<div class="row vh-100">
<div class="col">
<h1>Header</h1>
</div>
</div>
<div class="row content-area">
<div class="col">
<div>Content blah...</div>
</div>
</div>
Source: https://getbootstrap.com/docs/4.4/utilities/sizing/
How can I change the order of columns for Bootstrap 4's flexbox grid system?
Code I have:
<div class="contents">
<div class="row row-1">
<div class="col-sm-6">Content Left</div>
<div class="col-sm-6">Content Right</div>
</div>
<div class="row row-2">
<div class="col-sm-6">Content Right</div>
<div class="col-sm-6">Content Left</div>
</div>
<div class="row row-3">
<div class="col-sm-6">Content Left</div>
<div class="col-sm-6">Content Right</div>
</div>
<div class="row row-4">
<div class="col-sm-6">Content Right</div>
<div class="col-sm-6">Content Left</div>
</div>
</div>
I want to set it so that every even row would have its columns orders reversed.
CSS I have so far:
.row:nth-child(2n) .col-sm-6:first-child{
float:right;
}
JSFiddle: https://jsfiddle.net/bq1L3gax/
Bootstrap 5 (update 2021)
Since flexbox is still used in Bootstrap 5, changing the order of columns works in the same way. However the order-6 to order-12 have been dropped. These classes are now available for re-ordering in Bootstrap 5..
order-{breakpoint}-first
order-{breakpoint}-last
order-{breakpoint}-0
order-{breakpoint}-1
order-{breakpoint}-2
order-{breakpoint}-3
order-{breakpoint}-4
order-{breakpoint}-5
The possible {breakpoint} values are none(for xs), sm, md, lg, xl or xxl
Bootstrap 5 order examples
Bootstrap 4 (update 2018)
There's no need for extra CSS. Use the flexbox ordering utils...
Demo: https://codeply.com/go/nEpPysXuNe
<div class="contents">
<div class="row row-1">
<div class="col-sm-6">Content Left</div>
<div class="col-sm-6">Content Right</div>
</div>
<div class="row row-2">
<div class="col-sm-6">Content Right</div>
<div class="col-sm-6 order-first">Content Left</div>
</div>
<div class="row row-3">
<div class="col-sm-6">Content Left</div>
<div class="col-sm-6">Content Right</div>
</div>
<div class="row row-4">
<div class="col-sm-6">Content Right</div>
<div class="col-sm-6 order-first">Content Left</div>
</div>
</div>
The ordering class are now order-first, order-1, order-2, etc...
https://codeply.com/go/DYHIdw8TXH
Another method is using the flexbox direction utils...
<div class="row flex-row-reverse flex-md-row">
<div class="col-6">A</div>
<div class="col-6">B</div>
</div>
https://codeply.com/go/bi01mV3n0n
Check out this updated JSFiddle. https://jsfiddle.net/bq1L3gax/5/
All you need to do is use the CSS order property.
.row:nth-child(2n) .col-sm-6:first-child {
order: 2;
}