Wonderbear Posts - Answer Overflow

Wonderbear

•Created by Wonderbear on 4/12/2024 in #front-end

Prevent vertical flex grow?

Hello, I made an example of my problem: https://svelte.dev/repl/410dd49777c94e6d872bfa23fffb3272?version=4.2.13 Here you can see that the image grows larger than the .info element. I want to adjust the height of the image to the height of the .info element. Is this possible?

8 replies

KPCKevin Powell - Community

•Created by Wonderbear on 4/3/2024 in #front-end

Element for <slot>?

Is it possible to not pass a wrapper element to a <slot />? It looks like I have to use a wrapper element, otherwise I couldnt define the slot attribute for my child.

<my-custom-element>
  <fragment slot="title">Hello</fragment>
</my-custom-element>

<my-custom-element>
  <fragment slot="title">Hello</fragment>
</my-custom-element>

Is there something like a fragment element?

9 replies

KPCKevin Powell - Community

•Created by Wonderbear on 3/27/2024 in #front-end

Restrict element to dimensions of page

7 replies

KPCKevin Powell - Community

•Created by Wonderbear on 3/22/2024 in #front-end

technique where background expands box dimensions to spare wrapper element?

I remember vaguely that there was a trick that I've seen in a video from kevin where he shows how to expand a background without relying on a wrapper element. For example, when your text is supposed to have inline padding/margin to the parent borders, but the background should then expand to the parents width. Do I remember correctly that there was a trick or do I need a wrapper element?

3 replies

KPCKevin Powell - Community

•Created by Wonderbear on 3/5/2024 in #front-end

simulating support for missing web apis?

Is there a way to simulate the lack of support for web apis in Firefox or Chrome? Like for example, deactivating the push api so I can test if my fallback properly triggers. I was hoping for a setting in about:config or something similar. For example, I have this line of code:

export const isSupported = ('pushManager' in registration) && ('getSubscription' in registration.pushManager);

export const isSupported = ('pushManager' in registration) && ('getSubscription' in registration.pushManager);

In my browser, isSupported is always true because my browser supports the push api. But I want to test if this variable is actually really false when support is missing.

24 replies

KPCKevin Powell - Community

•Created by Wonderbear on 2/23/2024 in #front-end

Grid fill empty cells

I am trying to create a pattern like this:https://media.discordapp.net/attachments/1210495508909391912/1210495509165252658/email1708617448176.png?ex=65eac4cb&is=65d84fcb&hm=1ad3ae9230a783518eada731df9ebe8889e5eb9fcb3de117dcfb07814072f0d3&=&format=webp&quality=lossless And I have come so far: https://svelte.dev/repl/96d54cb322ef42f68b85cd52e6795dac?version=4.2.12 But you may notice the empty cell between 2 and 5, and 6 and 9. I want the boxes to move up to fill the empty cells. Is this possible?

22 replies

KPCKevin Powell - Community

•Created by Wonderbear on 2/20/2024 in #front-end

grow image to size of sibling

See: https://svelte.dev/repl/a8f8ff1c7384448d96e36d4a9b30cfea?version=4.2.11 Is it possible to make the icon grow to the height of its sibling?

9 replies

KPCKevin Powell - Community

•Created by Wonderbear on 2/9/2024 in #ui-ux

How to make a Webdesign?

I am an amateur in webdesign, meaning I have never really learned and don't have much experience, but I certainly try to learn every day more about webdesign. I think I know which steps are required and necessary to create a complete design, so my question is if I am going the right direction with my considerations or am I overthinking webdesign?

37 replies

KPCKevin Powell - Community

•Created by Wonderbear on 1/16/2024 in #front-end

having a scrollbar without setting height

On mobile, when the menu opens, it overflows the screen size. Setting overflow-y: scroll doesnt work unless I set height: 100vh, which I cant do because it still takes effect when the menu is closed (the element is still visible, but not expanded). Is there a solution that doesnt require js?

6 replies

KPCKevin Powell - Community

•Created by Wonderbear on 10/4/2023 in #front-end

formData in web-components

Hello, I made a web component:

class Toggle extends HTMLElement {
    #toggle = /*html*/`
    <input type="checkbox" ${this.checked ? 'checked' : ''} />
    `

    constructor() {
        super()

        const shadow = this.attachShadow({mode: 'open'})
        shadow.innerHTML = this.#toggle
        this.internals = this.attachInternals()

        shadow.querySelector('input').addEventListener('input', ({currentTarget}) => {
            this.checked = currentTarget.checked
        })
    }

    static formAssociated = true;

    get checked() {
        return this.hasAttribute('checked');
    }

    set checked(isChecked) {
        this.internals.setFormValue(this.getAttribute('value'))
        isChecked ? this.setAttribute('checked', '') : this.removeAttribute('checked')
    }
}
customElements.define('my-toggle', GfToggle)

class Toggle extends HTMLElement {
    #toggle = /*html*/`
    <input type="checkbox" ${this.checked ? 'checked' : ''} />
    `

    constructor() {
        super()

        const shadow = this.attachShadow({mode: 'open'})
        shadow.innerHTML = this.#toggle
        this.internals = this.attachInternals()

        shadow.querySelector('input').addEventListener('input', ({currentTarget}) => {
            this.checked = currentTarget.checked
        })
    }

    static formAssociated = true;

    get checked() {
        return this.hasAttribute('checked');
    }

    set checked(isChecked) {
        this.internals.setFormValue(this.getAttribute('value'))
        isChecked ? this.setAttribute('checked', '') : this.removeAttribute('checked')
    }
}
customElements.define('my-toggle', GfToggle)

This is the html:

<form>
  <my-toggle name="bla" value="foo"></my-toggle>
</form>

<form>
  <my-toggle name="bla" value="foo"></my-toggle>
</form>

And it works, the form element recognizes my-toggle as a member of the form. But console.log(new FormData(form)) gives me an empty FormData object. Why?

31 replies

KPCKevin Powell - Community

•Created by Wonderbear on 9/29/2023 in #front-end

dynamic size with only clamp, min and max

I have a div, I want its width to be 50% as long as 95vw is not possible. If 95vw is possible, I want 95vw to be the width. Can I express this logic with clamp, min and max?

33 replies

KPCKevin Powell - Community

•Created by Wonderbear on 9/20/2023 in #front-end

Why is a TextNode in the dom 20 px high when its set to 1rem/16px?

60 replies

Gaming

Programming