KPC
Kevin Powell - Community•8mo ago
Jus Sus || 💀

Fixed position element causing issue on hover

https://www.veed.io/view/415c35b6-2139-4b4b-a0a5-3ac0852561e2?panel=share. I have attached a video above. The search element is positioned fixed 550px from top. then expanding of seachbar works fine when i dont scroll. but when i scroll and then hover it glitches. I switched to position absolute then that glitch affect goes away but i will not same fixed position relative to viewport. Here is the code: codepen: https://codepen.io/stressunfit/pen/gOZEmWp?editors=1100
VEED
VEED
VEED - Screen Recording - Oct 11, 2023
Make stunning videos with a single click. Cut, trim, crop, add subtitles and more. Online, no account needed. Try it now, free. VEED
stressunfit
CodePen
Searchbar
...
5 Replies
ZEROHEART
ZEROHEART•8mo ago
.searchIconWrapper:hover {
  width: 280px;
  /* padding-left: 20px; */
  height:68px;
  border-radius: 20px;
  justify-content: start;
}
.searchIconWrapper:hover {
  width: 280px;
  /* padding-left: 20px; */
  height:68px;
  border-radius: 20px;
  justify-content: start;
}
upated for codepen given removed position
Jus Sus || 💀
Jus Sus || 💀•8mo ago
@ZEROHEART Thanks!!, do you know how to remove the input going out of searchWrapper on right side before expanding.
ZEROHEART
ZEROHEART•8mo ago
where!?
Jus Sus || 💀
Jus Sus || 💀•8mo ago
@ZEROHEART you can check the codepen. the input jumps out on the right side for a second before it expands
ZEROHEART
ZEROHEART•8mo ago
its coming with search icon
Want results from more Discord servers?
Add your server
More Posts
:root{font-size:1vw:}.my-title{font-size:7rem}above is does the reponsive size of the font depending on the vw but the is the feasablity of this tShould I create a separate stylesheet just for responsive?Which practice is better, making it responsive within the main style sheet, or creating another stylIssue with supabase middleware.ts (auth with cookies)I created github issue here - https://github.com/supabase/supabase/issues/18089 I bring attention tFCP, LCP in web vitals.i made a website using svelte and tailwind css this div here is making my website quite not a good oi want to know how i can make this designevery thing else i think i can pull off but the curves in the middle can someone explain how i can mhow to put the text side of the imagelike thisHow to make this heart iconI have made heart icon using 2 circles and one div angled. But i cant make it just show border of heFull-stack Developer looking for feedbackHey guys, I am developing a full-stack application, and I decided to design every single page, to haAre DOM modifications synchronous?1. If I modify the DOM, can I be sure that that the next line of code has consistent access to that Any thoughts on a pure CSS solution color behind letters?A deviously simple-looking challenge. Just a block of text with a background color. That only goes b