CSS Utilities
Some css utilities used in the WireUI components that should be useful for all developers.
You can hide the scrollbar by adding the .hide-scrollbar CSS class.
You can scroll the content pressing shift + mouse wheel.
You can scroll the content pressing shift + mouse wheel.
1<div class="grid grid-cols-1 gap-5 sm:grid-cols-2"> 2 <div class="h-52 w-full overflow-x-auto p-2"> 3 <div class="relative flex items-center h-44 shadow-lg border rounded-lg bg-negative-500" style="width: 900px"> 4 <div class="absolute border-y-8 border-dashed border-white w-full h-8"></div> 5 </div> 6 </div> 7 8 <div class="h-52 w-full hide-scrollbar overflow-x-auto p-2"> 9 <div class="relative flex items-center h-44 shadow-lg border rounded-lg bg-positive-500" style="width: 900px">10 <div class="absolute border-y-8 border-dotted border-white w-full h-8"></div>11 </div>12 </div>13</div>
You can change the scrollbar by adding the .soft-scrollbar CSS class.
1<div class="grid grid-cols-1 gap-5 sm:grid-cols-2"> 2 <div class="h-52 w-full overflow-x-auto p-2"> 3 <div class="relative flex items-center h-44 shadow-lg border rounded-lg bg-negative-500" style="width: 900px"> 4 <div class="absolute border-y-8 border-dashed border-white w-full h-8"></div> 5 </div> 6 </div> 7 8 <div class="h-52 w-full soft-scrollbar overflow-x-auto p-2"> 9 <div class="relative flex items-center h-44 shadow-lg border rounded-lg bg-positive-500" style="width: 900px">10 <div class="absolute border-y-8 border-dotted border-white w-full h-8"></div>11 </div>12 </div>13</div>