Dr.Random Comments - Answer Overflow

Dr.Random

•Created by Zenon on 6/18/2023 in #front-end

Localization: multilingual website

Yeah, it is better to do it at server side. Languages can still be in database and not in a file from memory. And you can ofc do this exact same thing at the backend with server side rendering.

19 replies

KPCKevin Powell - Community

•Created by Zenon on 6/18/2023 in #front-end

Localization: multilingual website

That is a simplified example. You can fetch the language json from your backend or from a CDN. It's up to you

19 replies

KPCKevin Powell - Community

•Created by Zenon on 6/18/2023 in #front-end

Localization: multilingual website

https://codepen.io/drrandom/pen/PoxNypJ?editors=1011

19 replies

KPCKevin Powell - Community

•Created by Zenon on 6/18/2023 in #front-end

Localization: multilingual website

Here is an example in codepen

19 replies

KPCKevin Powell - Community

•Created by Zenon on 6/18/2023 in #front-end

Localization: multilingual website

What I have done is that I have three language json files with the same key for a given word. On my page I have an attribute called lang with the word key in there. If the user clicks on the desired language I fetch the corresponding json file, iterate over it and replace every word on the html which has a lang attribute with the key specified. I will write you an example soon.

19 replies

KPCKevin Powell - Community

•Created by Dr.Random on 6/2/2023 in #front-end

Mobile virtual-keyboard pushes up content

3 replies

KPCKevin Powell - Community

•Created by Dr.Random on 6/2/2023 in #front-end

Mobile virtual-keyboard pushes up content

Here is how it looks like on mobile when the virtual keyboard is visible: https://i.stack.imgur.com/RNLmu.png The weird thing is that i can scroll the body or at least the document, even if i specified the following css for the body:

    body{
        display: flex;
        flex-direction: column;
        padding: 0px;
        margin: 0px;
        overflow: hidden;
        position: fixed;
        top: 0px;
        left: 0px;
        height: 100svh;
    }

    body{
        display: flex;
        flex-direction: column;
        padding: 0px;
        margin: 0px;
        overflow: hidden;
        position: fixed;
        top: 0px;
        left: 0px;
        height: 100svh;
    }

I have tried without flex box, with different positions and different javascript alternatives. Tried to make my header and footer fixed/absolute but it did not help either. When my footer is fixed, it works in a way, but the header does not. This javascript snippet is helping somewhat.

    var body = document.querySelector("body");
    if (window && window.visualViewport){
        visualViewport.addEventListener('resize', function(){
            let viewHeight = visualViewport.height;
            body.style.height = `${viewHeight}px`;
        });
    }

    var body = document.querySelector("body");
    if (window && window.visualViewport){
        visualViewport.addEventListener('resize', function(){
            let viewHeight = visualViewport.height;
            body.style.height = `${viewHeight}px`;
        });
    }

It does resize my body to the correct height when the virtual keyboard is visible but i can still scroll the entire document?? The javascript "fix" is what i want, but without the ability to scroll the document meanwhile. I want the same chat behaviour which is on discord or any other message platform. When the virtual keyboard pops up, i want to squeeze my chat message body into the available space along with my header and footer. Here is a gif demonstrating the javascript fix problem:

3 replies

KPCKevin Powell - Community

•Created by Dr.Random on 5/14/2023 in #front-end

Web app pushes entire content up when virtual keyboard is up

Well it does not work on codpen but I will test it locally

36 replies

KPCKevin Powell - Community

•Created by Dr.Random on 5/14/2023 in #front-end

Web app pushes entire content up when virtual keyboard is up

Thank you very much. I'm sitting on this two days straight

36 replies

KPCKevin Powell - Community