Need the table to Overflow on the Next Row components - css

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>

Related

Component shrinks at fixed aspect ratio instead of just reducing width when viewport shrinks. (React, Tailwind CSS)

Whenever I use Google Chrome's responsive view to see my login form component at different screen sizes, I notice some strange behaviour. Once the viewport shrinks to a certain width, specifically 1024px, it stops shrinking horizontally and instead starts shrinking on both axis at the same fixed rate. This is despite there being ample space in the form still.
I tried setting fixed (non-percentile) values for the top-level to hopefully constrain the height to a specific scale, but this hasn't fixed the issue unfortunately. If anyone could help me to troubleshoot this behaviour I would be very appreciative!
The code is written using the React library and makes use of TailwindCSS classes for styling.
<div className='
w-3/4 xl:w-1/3 h-[26rem]
absolute
top-1/2 left-1/2 xl:left-3/4
-translate-y-1/2 -translate-x-1/2 xl:-translate-x-3/4'>
<div className='
w-full h-full
relative
bg-navWhite
py-12 px-4 sm:px-8
shadow-lg
flex flex-col'>
<h1 className='
font-navigation font-medium text-3xl tracking-tight
text-navGrey
text-center'>
Sign In
</h1>
<p className='
mt-2
font-navigation
text-navGrey text-center
font-light text-base'>
Enter your credentials below, to access your dashboard.
</p>
<form className='
flex flex-col gap-y-4 mt-4'>
<div className='
w-full flex flex-row-reverse
border-b border-b-navGrey/20
focus-within:border-b-dashboardBlue
transition-colors duration-200'>
<input
type="text"
placeholder="Email Address"
value={username}
name='Email signup'
onChange={usernameInput}
className='
p-2 w-full peer
bg-transparent
outline-none focus:ring-0
sm:text-sm'
/>
<span className='
material-symbols-outlined
text-2xl
text-navGrey/50
peer-focus:text-dashboardBlue
transition-colors duration-200
h-full
p-2
select-none'>
mail
</span>
</div>
<div className='
w-full flex flex-row-reverse
border-b border-b-navGrey/20
focus-within:border-b-dashboardBlue
transition-colors duration-200'>
<span
onClick={passwordVisibility}>
<span className='
cursor-pointer select-none
material-symbols-outlined
text-2xl
h-full
p-2'
style={showPassword === true ? styles.active : styles.inactive}>
{showPassword === true ? 'visibility' : 'visibility_off'}
</span>
</span>
<input
type='password'
id='passwordField'
placeholder="Password"
value={password}
name='Email signup'
onChange={passwordInput}
className='
p-2 w-full peer
bg-transparent
outline-none focus:ring-0
sm:text-sm'
/>
<span className='
material-symbols-outlined
text-2xl
text-navGrey/50
peer-focus:text-dashboardBlue
transition-colors duration-200
h-full
p-2
select-none'>
lock
</span>
</div>
<div className="flex justify-between p-2 -mb-2">
<label className='self-end'>
<input type="checkbox" checked={rememberPassword} onChange={() => toggleRemember(!rememberPassword)} className='relative align-middle w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600'/>
<span className="
sm:text-sm
text-navGrey/50
ml-1">
Remember me
</span>
</label>
<span className="
cursor-pointer
sm:text-sm
text-dashboardBlue
no-underline
hover:underline
transition-all duration-200">
Forgot password?
</span>
</div>
<button
className='
w-full p-6 mt-2
relative
bg-dashboardBlue
focus:outline-none focus:ring-2 focus:ring-dashboardBlue focus:ring-offset-2'
onClick={loginAction}>
<div className='relative' style={loading === true ? styles.notLoading : styles.loading}>
<span className='
absolute
top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2
text-white
font-semibold
text-lg
transition-all duration-300'>
Login
</span>
</div>
<Loader visibility={loading === true ? styles.loading : styles.notLoading} />
</button>
</form>
</div>
</div>

The options tag renders in a different place than the select parent tag using tailwind and react

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>

darken background image (Opacity?)

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

How to turn page background color dark when tailwind css modal is open in angular13

I want to turn my entire screen into the grey when my tailwind css modal open in my angular app but the screen remain white after modal open Please anyone can solve this
this is my html code
<button class="bg-pink-500 text-white active:bg-pink-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button" (click)="toggleModal()">
Open modal
</button>
<div *ngIf="showModal" class="overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex">
<div class="relative w-auto my-6 mx-auto max-w-3xl">
<!--content-->
<div class="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
<!--header-->
<div class="flex items-start justify-between p-5 border-b border-solid border-blueGray-200 rounded-t">
<h3 class="text-3xl font-semibold">
Modal Title
</h3>
<button class="p-1 ml-auto bg-transparent border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none" (click)="toggleModal()">
<span class="bg-transparent text-black opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none">
×
</span>
</button>
</div>
<!--body-->
<div class="relative p-6 flex-auto">
<p class="my-4 text-blueGray-500 text-lg leading-relaxed">
I always felt like I could do anything. That’s the main
thing people are controlled by! Thoughts- their perception
of themselves! They're slowed down by their perception of
themselves. If you're taught you can’t do anything, you
won’t do anything. I was taught I could do everything.
</p>
</div>
<!--footer-->
<div class="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b">
<button class="text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button" (click)="toggleModal()">
Close
</button>
<button class="bg-emerald-500 text-white active:bg-emerald-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button" (click)="toggleModal()">
Save Changes
</button>
</div>
</div>
</div>
</div>
This is my typescript code to open modal
showModal:boolean = false;
toggleModal(){
this.showModal = !this.showModal;
}
Here my modal is opening but the entire screen is not turning into the dark mode Please anyone can solve this Thanks in advance
Probably you need to add the specific style for your modal container as backgrop background, like custom style: style="background-color: rgba(0,0,0,0.5);"
In your code it should be look like: <div *ngIf="showModal" style="background-color: rgba(0,0,0,0.5);" class="overflow-x-hidden...
Also, you can add the specific '.backdrop' class to the root styles.css and use it as class:
.backdrop {
background-color: rgba(0,0,0,0.5);
}
in html:
<div *ngIf="showModal" class="backdrop overflow-x-hidden overflow-y-auto...
tailwind screen example with the dark background here
the component template html looks like that:
<button class="bg-pink-500 text-white active:bg-pink-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button" (click)="toggleModal()">
Open modal
</button>
<div *ngIf="showModal" class="backdrop overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex">
//.......the rest code is the same....

Styling with Tailwind CSS

I'm using Tailwindcss to style my forms but when I try to submit and catch errors for required fields, the size on input fields increases.
Form code
<Formik
initialValues={userData.signup}
onSubmit={submitData}
validationSchema={signupSchema}
>
{({ values, errors, touched, handleChange, handleSubmit }) => {
return (
<>
<Form className="grid grid-cols-2 gap-3" onSubmit={handleSubmit} id="form">
<div className="relative flex w-full flex-wrap items-stretch mb-3">
<span className="z-10 leading-snug font-normal absolute text-center text-gray-400 bg-transparent rounded text-base items-center justify-center w-8 pl-3 py-3">
<i className="fas fa-user-circle"></i>
</span>
<input
className={
`${touched.name && errors.name ?
"form-input border py-3 border-red-400 placeholder-gray-400 text-gray-700 relative rounded text-sm w-full pl-10" :
"form-input border py-3 border-gray-400 placeholder-gray-400 text-gray-700 relative rounded text-sm focus:border-green-200 w-full pl-10"}`
}
type="text"
name="name"
placeholder="Name"
value={values.name}
onChange={handleChange}
/>
<span className="text-red-400 self-center">{touched.name && errors.name}</span>
</div>
<div className="relative flex w-full flex-wrap items-stretch mb-3">
<span className="z-10 leading-snug font-normal absolute text-center text-gray-400 bg-transparent rounded text-base items-center justify-center w-8 pl-3 py-3">
<i className="fas fa-envelope"></i>
</span>
<input
className={
`${touched.email && errors.email ?
"form-input border py-3 border-red-400 placeholder-gray-400 text-gray-700 relative rounded text-sm w-full pl-10" :
"form-input border py-3 border-gray-400 placeholder-gray-400 text-gray-700 relative rounded text-sm focus:border-green-200 w-full pl-10"}`
}
type="email"
name="email"
placeholder="Email"
value={values.email}
onChange={handleChange}
/>
<span className="text-red-400 self-center">{touched.email && errors.email}</span>
</div>
<div className="relative flex w-full flex-wrap items-stretch mb-3">
<span className="z-10 leading-snug font-normal absolute text-center text-gray-400 bg-transparent rounded text-base items-center justify-center w-8 pl-3 py-3">
<i className="fas fa-phone"></i>
</span>
<input
className={
`${touched.phoneNumber && errors.phoneNumber ?
"form-input border py-3 border-red-400 placeholder-gray-400 text-gray-700 relative rounded text-sm w-full pl-10" :
"form-input border py-3 border-gray-400 placeholder-gray-400 text-gray-700 relative rounded text-sm focus:border-green-200 w-full pl-10"}`
}
type="text"
name="phoneNumber"
placeholder="Phone number"
value={values.phoneNumber}
onChange={handleChange}
/>
<span className="text-red-400 self-center">{touched.phoneNumber && errors.phoneNumber}</span>
</div>
<div className="relative flex w-full flex-wrap items-stretch mb-3">
<span className="z-10 leading-snug font-normal absolute text-center text-gray-400 bg-transparent rounded text-base items-center justify-center w-8 pl-3 py-3">
<i className="fas fa-lock"></i>
</span>
<input
className={
`${touched.password && errors.password ?
"form-input border py-3 border-red-400 placeholder-gray-400 text-gray-700 relative rounded text-sm w-full pl-10" :
"form-input border py-3 border-gray-400 placeholder-gray-400 text-gray-700 relative rounded text-sm focus:border-green-200 w-full pl-10"}`
}
type="password"
name="password"
placeholder="Password"
value={values.password}
onChange={handleChange}
/>
<span className="text-red-400 self-center">{touched.password && errors.password}</span>
</div>
{/* <div className="relative flex w-full flex-wrap items-stretch mb-3">
<span className="z-10 leading-snug font-normal absolute text-center text-gray-400 bg-transparent rounded text-base items-center justify-center w-8 pl-3 py-3">
<i className="fas fa-lock"></i>
</span>
<input
className={
`${touched.confirmPassword && errors.confirmPassword ?
"form-input border py-3 border-red-400 placeholder-gray-400 text-gray-700 relative rounded text-sm w-full pl-10" :
"form-input border py-3 border-gray-400 placeholder-gray-400 text-gray-700 relative rounded text-sm focus:border-green-200 w-full pl-10"}`
}
type="password"
name="confirmPassword"
placeholder="Confirm Password"
value={values.confirmPassword}
onChange={handleChange}
/>
<span className="text-red-400 self-center">{touched.confirmPassword && errors.confirmPassword}</span>
</div> */}
</Form>
<SignupBtn type="submit" form="form"> Sign Up </SignupBtn>
<SocialBtns />
</>
)
}}
</Formik>
Form before error highlighting using Formik
Form after error highlighting using Formik
This is the code I used to style the forms.
Am I missing anything here? Thanks
Remove flex from the button container...
<div class="relative w-full flex-wrap mb-3">
<button class="py-2 px-4 bg-green-500 text-white font-semibold rounded-lg hover:bg-green-700 w-full">
Sign Up
</button>
</div>
Codeply

Resources