I've been trying for hours to center the image in this table, but I cannot make it work. The image is in the middle of this code. I hope this is a workable example.
<table class="container mx-auto mt-2">
<thead>
#foreach($posts as $post)
<tr>
<th class="p-3 font-bold uppercase bg-gray-200 text-gray-600 border border-gray-300 hidden lg:table-cell">Title</th>
<th class="p-3 font-bold uppercase bg-gray-200 text-gray-600 border border-gray-300 hidden lg:table-cell">Image</th>
<th class="p-3 font-bold uppercase bg-gray-200 text-gray-600 border border-gray-300 hidden lg:table-cell">Status</th>
<th class="p-3 font-bold uppercase bg-gray-200 text-gray-600 border border-gray-300 hidden lg:table-cell">Action</th>
</tr>
</thead>
<tbody>
<tr class="bg-white lg:hover:bg-gray-100 flex lg:table-row flex-row lg:flex-row flex-wrap lg:flex-no-wrap mb-10 lg:mb-0">
<td class="w-full lg:w-auto p-3 text-gray-800 text-center border border-b block lg:table-cell relative lg:static">
<span class="lg:hidden absolute top-0 left-0 bg-blue-200 px-2 py-1 text-xs font-bold uppercase">title</span>
{{ $post->title }}
</td>
<td class="w-full lg:w-auto p-3 text-gray-800 border border-b text-center block lg:table-cell relative lg:static">
<span class="lg:hidden absolute top-0 left-0 bg-blue-200 px-2 py-1 text-xs font-bold uppercase">Image</span>
<img class=" text-center block w-8 h-8 rounded-full " src="{{ asset('storage/photos/'. $post->image ) }}" />
</td>
<td class="w-full lg:w-auto p-3 text-gray-800 text-center border border-b text-center block lg:table-cell relative lg:static">
<span class="lg:hidden absolute top-0 left-0 bg-blue-200 px-2 py-1 text-xs font-bold uppercase">Status</span>
#if($post->active )
active
#else
Not active
#endif
</td>
<td class="w-full lg:w-auto p-3 text-gray-800 text-center border border-b text-center block lg:table-cell relative lg:static">
<span class="lg:hidden absolute top-0 left-0 bg-blue-200 px-2 py-1 text-xs font-bold uppercase">Actions</span>
<x-jet-button wire:click="showEditPostModal({{ $post->id }})" class="bg-green-500">Edit</x-jet-button>
<x-jet-button wire:click="deletePost({{ $post->id}})" class="bg-red-700">Delete</x-jet-button>
</td>
</tr>
#endforeach
</tbody>
</table>
Images in Tailwind are set to block-level by default so they can be centered with CSS properties like margin: 0 auto or with the mx-auto class. Basically element require to be block (has its width) to be centered this way.
In general this guide is very useful to know every possible way of centering elements
you can add the "flex-auto" class.
if you want any things show
Related
I have a problem. I use react and tailwind css. Th modal is relative and the overlay is flex positioned, because I want the main modal to be positioned in the middle of the screen on X axis. Here it comes the problem. The wrapper that contains the options tag renders in a different place than the parent select. I tried fixing it with absolute position and also with relative one. But nothing works...
Because there is not programming logic, I will paste the code.
<div className="modal flex fade fixed top-0 left-0 w-full h-full outline-none overflow-x-hidden overflow-y-auto" id="exampleModalCenteredScrollable" tabIndex="-1" aria-labelledby="exampleModalCenteredScrollable" aria-modal="true" role="dialog">
<div className=" modal-dialog modal-dialog-centered modal-dialog-scrollable relative w-auto pointer-events-none flex-1 p-2 bg-slate-200">
<div className="modal-content border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding max-w-2xl mx-auto mt-5 rounded-md outline-none text-current">
<div className="modal-header flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md ">
<h5 className="text-2xl font-bold leading-normal text-gray-700 underline " id="exampleModalCenteredScrollableLabel">
Add new exercice
</h5>
<button type="button" onClick={() => setOpen(!open)}
className="btn-close box-content p-1 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline"
data-bs-dismiss="modal" aria-label="Close"><AiOutlineCloseCircle color='black' size={30}/></button>
</div>
<div className="modal-body relative p-4">
<p>Look for the exercice you wish to add, and click import. You may add as many exercices you want, however please make sure you will complete them by the end of the day.</p>
<form >
<div className='flex mt-3 flex-col'>
<input required placeholder='Search by word...' className='border border-slate-400 p-1 rounded-md flex-1 max-w-sm my-2'/>
{/* Problem is here!!!! */}
<select className='border border-slate-400 p-1 rounded-md max-w-sm my-2 [&>option]:bg-black'>
<option defaultValue>Slobozel</option>
<option>Slobozel</option>
<option>Slobozel</option>
<option>Slobozel</option>
</select>
</div>
So, I am using tailwind and I am trying to darken the background image that loads for this header. The purpose of this is I want to make sure the text is readable regardless of what someone picks for a background image.
<div :style="{ backgroundImage: `url(${profile.cover_photo_path})` }" class="bg-center bg-cover h-48 w-full grid grid-cols-9 text-white shadow-2xl rounded-xl p-2">
<div class="col-span-2 mx-auto my-auto">
<img :src="profile.profile_photo_path" class="rounded-full h-36 w-36 border-4 border-red-700" />
</div>
<div class="pl-4 md:pl-0 col-span-2 grid content-center">
<div class="text-lg font-logo uppercase">
{{profile.name}}
</div>
<div class="text-sm font-light">
{{profile.user_city}}, {{profile.user_region}}, {{profile.user_country}}
</div>
<div class="text-sm font-light">
{{calculateAge}} years old
</div>
</div>
<div class="col-span-3 grid content-end">
</div>
<div class="text-lg uppercase col-span-1 grid content-end justify-end">
<div class="mx-auto">
<button type="button" class="inline-flex items-center px-3 py-2 border border-transparent shadow-sm text-sm leading-4 font-medium rounded-md text-white bg-red-700 hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-600">
<PlusIcon class="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
Follow
</button>
</div>
</div>
<div class="text-lg uppercase col-span-1 grid content-end justify-center">
<div class="mx-auto">
<button type="button" class="inline-flex items-center px-3 py-2 border border-transparent shadow-sm text-sm leading-4 font-medium rounded-md text-white bg-red-700 hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-600">
<MailIcon class="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
Message
</button>
</div>
</div>
</div>
```
I am open to other ideas but in my head it would be an opacity that would fix this. If you have another idea that would be more effective for this header/cover please let me know.
The best way to do this is to take an absolute image and control it as you want.
Like this: Tailwind Play Link
I had masked a div of the same dimensions but of black color behind your header and made the opacity of the header to 0.7.
I had added div by this
<div class="h-48 w-full bg-black absolute"></div>
And added class absolute z-10 opacity-70 to put the header div in front of black div.
Also instead of using :style="{ backgroundImage: url(path-name) }" you can use bg-[url(path-name)] like I had used.
You can see the complete code here
<script src="https://cdn.tailwindcss.com"></script>
<div class="absolute z-10 grid h-48 w-full grid-cols-9 rounded-xl bg-[url(http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back05.jpg)] bg-cover bg-center p-2 text-white opacity-60 shadow-2xl">
<div class="col-span-2 mx-auto my-auto">
<img src="http://codeskulptor-demos.commondatastorage.googleapis.com/pang/IHXoEES.png" class="h-36 w-36 rounded-full border-4 border-pink-200" />
</div>
<div class="col-span-2 grid content-center pl-4 md:pl-0">
<div class="font-logo text-lg uppercase">{{profile.name}}</div>
<div class="text-sm font-light">{{profile.user_city}}, {{profile.user_region}}, {{profile.user_country}}</div>
<div class="text-sm font-light">{{calculateAge}} years old</div>
</div>
<div class="col-span-3 grid content-end"></div>
<div class="col-span-1 grid content-end justify-end text-lg uppercase">
<div class="mx-auto">
<button type="button" class="inline-flex items-center rounded-md border border-transparent bg-red-700 px-3 py-2 text-sm font-medium leading-4 text-white shadow-sm hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-offset-2">
<PlusIcon class="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
Follow
</button>
</div>
</div>
<div class="col-span-1 grid content-end justify-center text-lg uppercase">
<div class="mx-auto">
<button type="button" class="inline-flex items-center rounded-md border border-transparent bg-red-700 px-3 py-2 text-sm font-medium leading-4 text-white shadow-sm hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-offset-2">
<MailIcon class="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
Message
</button>
</div>
</div>
</div>
<div class="absolute h-48 w-full bg-black"></div>
Ignore the warning and see in full view
The search results are displayed in a table. I want the table to overflow on the next row component instead it expands pushing down the next row.
What css changes should I do? Following code is an extract. The table with search list pushes the next row of components down. Instead I want the table to on top of next row components
<div className="flex flex-wrap self-start justify-end z-2">
<form className="md:flex flex-row flex-wrap self-start lg:ml-auto mr-8">
<div className="relative flex flex-wrap self-start mt-4 mr-8">
<select
className="px-2 py-1 placeholder-blueGray-300 text-gray-300 relative bg-gray-900 rounded text-sm border border-blueGray-300 outline-none focus:outline-none focus:shadow-outline w-full pr-10"
value={tz}
onChange={(e) => {
settz(e.target.value);
}}
>
{getTZOptions()}
</select>
</div>
<div className="relative flex flex-wrap mt-4 mr-8">
<input
type="text"
placeholder="Search Project"
className="px-2 py-1 placeholder-blueGray-300 text-gray-300 relative bg-gray-900 rounded text-sm border border-blueGray-300 outline-none focus:outline-none focus:shadow-outline w-full pr-10"
value={srchTerm}
onChange={(e) => {
setsrchTerm(e.target.value);
var list = exampleSrchConsts.filter((item) => {
return item
.toLowerCase()
.indexOf(e.target.value.toLowerCase() > -1);
});
setsrchList(list);
}}
/>
{srchTerm.length > 0 && (
<span
className="h-full leading-snug font-normal absolute text-center text-blueGray-300 absolute bg-transparent rounded text-base items-center justify-center w-8 right-0 pr-2 py-1"
onClick={() => {
//console.log(oldDisplayList);
setsrchTerm("");
setsrchList();
}}
>
<i className="fas fa-times text-red-500"></i>
</span>
)}
<table className="w:full table table-bordered bg-white ml-2">
<tbody>{srchList}</tbody>
</table>
</div>
<div className="relative flex justify-center flex-wrap self-start mt-4 mr-8 border rounded">
<i
className={
"fas fa-th text-gray-700 px-2 py-2 border-r cursor-pointer"
}
></i>
<i
className={"fas fa-table text-gray-700 px-2 py-2 cursor-pointer"}
></i>
</div>
</form>
</div>
I have this input with languages tabs:
I need to make it like this:
My problem with the border when any languages active tab!
my code in English:
<div>
<div class="flex justify-between items-center">
<label class="block font-medium text-sm text-gray-700">
Categroy Name
</label>
<div class="inline-flex items-center text-gray-700 list-none space-x-1">
<li class="px-4 rounded border-r border-t border-l cursor-pointer">
Arabic
</li>
<li class="px-4 rounded border bg-gray-200 cursor-pointer">
English
</li>
</div>
</div>
<input type="text" name="category_title" class="focus:ring-indigo-500 rounded focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300">
</div>
You could make it work by changing the radius to top only (rounded-t), moving your div and tab each -1px down (-mb-px) and adding a white background (bg-white).
This is also the solution of the official tabs component.
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<div>
<div class="flex justify-between items-center">
<label class="block font-medium text-sm text-gray-700">
Category Name
</label>
<div class="-mb-px inline-flex items-center text-gray-700 list-none space-x-1">
<li class="-mb-px px-4 rounded-t border-r border-t border-l cursor-pointer bg-white">
Arabic
</li>
<li class="px-4 rounded-t border bg-gray-200 cursor-pointer">
English
</li>
</div>
</div>
<input type="text" name="category_title" class="focus:ring-indigo-500 rounded focus:border-indigo-500 block w-full border border-grey-300">
</div>
I have a dropdown menu inside one of the columns in a table. When it is exposed, it is either cut off (overflow-hidden) or created a scroll bar (overflow-visible).
How would I get this to just appear over top of the table (or "extend" a parent div so it's all visible) so that the only scroll bar is the usual one in the browser, not this table-specific scroll bar. Code provided below.
<div class="flex flex-col">
<div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
<div class="shadow border-b border-gray-200 sm:rounded-lg overflow-auto">
<div class="flex flex-wrap m-4 justify-between">
<div class="flex items-center">
<div class="beep-label">
#lang('livewire.per_page'):
</div>
<select wire:model="perPage" class="beep-input align-middle w-auto inline-block">
<option>10</option>
<option>15</option>
<option>25</option>
</select>
</div>
<div class="flex">
<div class="beep-label pr-2 flex justify-center items-center h-full text-center">
#lang('one-word.filter'):
</div>
<input wire:model="search" class="beep-input" type="text" placeholder="#lang('livewire.search_users')...">
</div>
</div>
<table class="divide-y divide-gray-200 w-full">
<thead>
<tr>
<th class="beep-table-header h-full align-middle flex">
<div class="align-middle justify-items-auto">
<a wire:click.prevent="sortBy('name')" role="button" href="#" class="">
#include('livewire.includes._sort-icon', ['field' => 'name'])
<div class="inline-block">#lang('one-word.name')</div>
</a>
</div>
</th>
<th class="beep-table-header">
<a wire:click.prevent="sortBy('users.email')" role="button" href="#" class="">
#include('livewire.includes._sort-icon', ['field' => 'users.email'])
#lang('users.beep_email')
</a>
</th>
<th class="beep-table-header">
<a wire:click.prevent="sortBy('beep_extension')" role="button" href="#" class="">
#include('livewire.includes._sort-icon', ['field' => 'beep_extension'])
#lang('livewire.beep_ext')
</a>
</th>
<th class="beep-table-header text-center">
#lang('one-word.action')
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
#foreach ($contacts as $contact)
<tr #if ($contact->is_active !== true) class="table-danger" #endif>
<td class="px-6 py-4 whitespace-no-wrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
#if ($contact->contactable->thumbnail)
<img class="h-10 w-10 rounded-full"
src="{{ $contact->contactable->thumbnail }}"
alt="">
#else
<x-nav.svg-icons icon="user-circle" class="w-3 h-3" />
#endif
</div>
<div class="ml-4">
<div class="text-sm leading-5 font-medium text-gray-900">
{{ $contact->name }}
</div>
<div class="text-sm leading-5 text-gray-500">{{ $contact->contactable->email }}</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-no-wrap">
<div class="text-sm leading-5 text-gray-900">{{ $contact->beep_mail }}</div>
</td>
<td class="px-6 py-4 whitespace-no-wrap">
<div class="text-sm leading-5 text-gray-900">{{ $contact->beep_extension }}</div>
</td>
<td class="px-6 py-4 whitespace-no-wrap text-center text-sm leading-5 font-medium">
<div x-data="{ open: false }" #keydown.window.escape="open = false" #click.away="open = false" class="relative inline-block text-left">
<div>
<span class="rounded-md shadow-sm">
<button #click="open = !open" type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150" id="options-menu" aria-haspopup="true" aria-expanded="true">
#lang('one-word.action')
<!-- Heroicon name: chevron-down -->
<svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</span>
</div>
<div x-show="open" x-description="Dropdown panel, show/hide based on dropdown state." x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg z-10">
<div class="rounded-md bg-white shadow-xs">
<div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
#can ('view', $contact->contactable)
#lang('users.view_profile')
#endcan
#can ('update', $contact->contactable)
#lang('one-word.edit')
#lang('livewire.edit_contact_methods')
{{ $contact->is_active ? __('one-word.deactivate') : __('one-word.activate') }}
#endcan
</div>
</div>
</div>
</div>
</td>
</tr>
#endforeach
</tbody>
</table>
<div class="p-2 uppercase text-sm bg-gray-200">
{{ $contacts->links() }}
</div>
</div>
</div>
</div>
</div>
And the extracted css components in case they are helpful:
.beep-label {
#apply block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2;
}
.beep-input {
#apply appearance-none block w-full text-gray-700 border border-gray-500 rounded py-1 px-2 mb-3;
}
.beep-table-header {
#apply px-6 py-3 bg-gray-100 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider;
}