empty Comments - Answer Overflow

https://jsbin.com/gakacuxiki/edit?html,css,output you can take a look at my code here. As I try, the bug does not happen on browers or andoirds devices. But still happens on ios when I focus on input or sometimes zoom in the screen If you want to test please use this link https://output.jsbin.com/gakacuxiki

55 replies

KPCKevin Powell - Community

•Created by empty on 12/6/2024 in #front-end

how to prevent scroll on ios device

class="flex-1 z-10 relative xl:max-h-[1050px] overflow-hidden 2xl:max-w-[60%] lg:block hidden" I use tailwind. So basically, it contains some classes like this

55 replies

KPCKevin Powell - Community

•Created by empty on 12/6/2024 in #front-end

how to prevent scroll on ios device

.open-map{
    position: fixed;
    inset:0;
    z-index: 15;
}

.open-map{
    position: fixed;
    inset:0;
    z-index: 15;
}

55 replies

KPCKevin Powell - Community

•Created by empty on 12/6/2024 in #front-end

how to prevent scroll on ios device

yes. I add a class to change the position to fixed

55 replies

KPCKevin Powell - Community

•Created by empty on 12/6/2024 in #front-end

how to prevent scroll on ios device

yeah

55 replies

KPCKevin Powell - Community

•Created by empty on 12/6/2024 in #front-end

how to prevent scroll on ios device

I use a div for a modal. So you mean I should use you a dialog element?

55 replies

KPCKevin Powell - Community

•Created by empty on 12/6/2024 in #front-end

how to prevent scroll on ios device

I click on a button and add class to change the style to fixed

55 replies

KPCKevin Powell - Community

•Created by empty on 12/6/2024 in #front-end

how to prevent scroll on ios device

Here is the bug. You can see when I focus on the input, I can scroll even if I set overflow:hidden

55 replies

KPCKevin Powell - Community

•Created by empty on 12/6/2024 in #front-end

how to prevent scroll on ios device

Ok, I will try. But the problem is the body is still scrollable when I focus on the input. So I think it can not fix the problem. I'm trying to make a video about the bug

55 replies

KPCKevin Powell - Community

•Created by empty on 12/6/2024 in #front-end

how to prevent scroll on ios device

It's hard for me to move the modal outside. It's used to display google map. On desktop, It will be displayed on screen by default but on mobile devices, it will be a modal so users can toggle to open or close it

55 replies

KPCKevin Powell - Community

•Created by empty on 12/6/2024 in #front-end

how to prevent scroll on ios device

yes, it is in the body. But it's nested inside a lot of div

55 replies

KPCKevin Powell - Community

•Created by empty on 12/6/2024 in #front-end

how to prevent scroll on ios device

let me try to make a video

55 replies

KPCKevin Powell - Community

•Created by empty on 12/6/2024 in #front-end

how to prevent scroll on ios device

Sorry, I does not describe the problem clearly. When I open the modal, I want the header is visible. So that is the reason why when the modal open, user can focus on the input and scrolling

55 replies

KPCKevin Powell - Community

•Created by empty on 12/6/2024 in #front-end

how to prevent scroll on ios device

I tried to use overflow:hidden but it does not work on ios device. When I focus on the input of the header and it's still scrollable

55 replies

KPCKevin Powell - Community

•Created by empty on 11/25/2024 in #front-end

visibility does not work

I got it. Thanks guys

13 replies

KPCKevin Powell - Community