bibamann Posts - Answer Overflow

bibamann

•Created by bibamann on 4/10/2024 in #front-end

Vue / JavaScript in general: prevent blur / focusout if you clicked something special

So I'm doing an autocomplete search. Which goes by a input type=text and an absolute positioned div which shows the suggestions below it. The search string there is highlighted and looks for several parts (name of a person you search for or his company). The suggestions are parted: They highlight the name and the company. And if you click on either the name or the company the search string will be filled up with it. Or on pressing "enter" the search submits your current term.
And I'm not having fun on "@blur / @focusout" with this. I want to hide the "suggestions div" if you click outside of the input text (basically cancel it) but NOT if you click on a suggestion. And the suggestions themself are layered - like : <div class="name" ... <div class="company" ... so checking the blur event's target- if it is something you can actually click is kinda exhausting. Unfortunately the blur event hits before the click event on a name / company. So you can't say "@click="getThatClick" - but the click-event isn't triggered as blur came first. Adding @click.stop or so didn't help. Any thoughts on this? 😕

2 replies

KPCKevin Powell - Community

•Created by bibamann on 3/15/2024 in #front-end

Make just an child-element sticky

I want just to have the time on the left side sticky, not the whole element (like in the second video). Is there an easy solution without "doubling" the list and make the left / right element hidden? the list elements are currently written in flex like

<div class="entry">
  <div>Starting Time</div>
  <div>Sessions</div>
</div>

.entry {
 display: flex;
}

<div class="entry">
  <div>Starting Time</div>
  <div>Sessions</div>
</div>

.entry {
 display: flex;
}

22 replies

KPCKevin Powell - Community

•Created by bibamann on 12/18/2023 in #front-end

Is there a way to prevent these border-radius shine-through's?

32 replies

KPCKevin Powell - Community

•Created by bibamann on 11/28/2023 in #front-end

Short question: How does CSS zoom work?

I need to figure out the new width & height of an element. And as getBoundingClientRect() doesn't compute the zoom (or well - it does, in a very buggy way: 1000px width with 50% zoom results in 999.34565px or so...) so I need to calc it by hand. So does zoom take the diagonal of an element and I need to go with Pythagoras (never expected to really use it in my life :D) to get the new width and height? Because this:

const zoom = this.zoom / 100;
// On zoom table.height makes some weird stuff in 0.*** pixels less
const maxHeight = (Math.ceil(table.height) - container.offsetHeight) * -zoom;

const zoom = this.zoom / 100;
// On zoom table.height makes some weird stuff in 0.*** pixels less
const maxHeight = (Math.ceil(table.height) - container.offsetHeight) * -zoom;

doesn't work (just for 100%). PS. I need it for getting the move height and width for not running out of the content)

1 replies

KPCKevin Powell - Community

•Created by bibamann on 10/25/2023 in #front-end

Scrolling of 2 lists with one "somehow" fixed

16 replies

KPCKevin Powell - Community

•Created by bibamann on 10/10/2023 in #ui-ux

Need ideas for a collection of person profiles

So I'm on a cms driven site for b2b events like: https://preview.events.weka-fachmedien.de/medical-design-solution-day And if you scroll down you can already see some cards (latest version will also be responsive and the name won't overlap the image anymore and hide some teeth). However: I also somehow need to include a biography and thinking about a an alternative layout the content creators can choose from.
For these kind of cards a simple dialog / modal triggered by an "i" icon in a corner of a photo will probably do it (or any better suggestions?). But I'm also thinking of something more fancy. Like having just one big card shown at a time and people thumnails below it to choose from or so. The lists can go from only one person to like 20+ Maybe you have got some ideas or know a website for some inspirations ( thefwa did'nt help me 😦 ) Thx!

13 replies

KPCKevin Powell - Community

•Created by bibamann on 6/27/2023 in #front-end

Very weird bug

Go to https://events.weka-fachmedien.de/medical-design-solution-day/partner (I'm using chrome) Scroll down to the "HY-LINE" logo and hover it. Look at the sticky header. It jumps for some milliseconds (I think the transition time). If it doesn't: scroll some pixels up / down. It doesn't happen always - but in like 1 out of 5 times / scroll positions. Any ideas? 😄

2 replies

KPCKevin Powell - Community

•Created by bibamann on 5/22/2023 in #front-end

flex or grid columns based on (modulo) number of Items

So, I'm on a CMS / frontend where the content team can add a collection of cards (like: this is our contact team, these are our sponsors, ...). These cards are listed by default with max 4 cards in a row. Then the next ones in the next row. Now, here comes the problem: It looks WAY better when if you've got 5 items you don't show 4 in the first row and just 1 in the last. But display 3 in the first one and 2 in the last. Same for 13 items (4,4,3,2) - that's why modulo in the topic . Is there a way to solve this CSS only (at least 2 items in a row) or if not (what I guess) - how would you create the JS and CSS setup (I'm using Vue, I know the numbers of items and can dynamically assign classes based on the modulo). Currently the content team create different collections (a 3 items one and a 2 one) to archive this - but this is not a nice solution. I'm currently thinking of: const rest = items.length % 4 if rest !== 1 -> everything is fine if rest === 1 -> create a second list, where 2 items spliced from the original one and display them in a new flexed <div>

9 replies

Gaming

Programming