Change the CSS attributes of outer div > canvas

[mohito12]

Hi all, new to the react-three-fiber library.

I was wondering how can I change the CSS attributes of the outer div that created before ?

<div style="position:relative;width:100%;height:100%;overflow:hidden">

<canvas style="display: block; width: 1903px; height: 1100px;" width="1903" height="1100"></canvas>

</div>

Thank you

[drcmda]

you are not supposed to change size, although you can of course give it styles and classes <Canvas style={{ ... }} class="..." /> but better size the div that wraps it. canvas will automatically take up the space of its relative/absolute parent with a resize observer.

[shahnihal01]

In my case, the wrapper div has touch-action: none which makes it impossible to scroll on mobile screens, and the inlining style in canvas isn't working how can I solve this?

[shahnihal01]

this is the vite generated div <div style="position: relative; width: 100%; height: 100%; overflow: hidden; touch-action: none;"><div style="width: 100%; height: 100%;"><canvas style="display: block; width: 375.333px; height: 667.333px;" data-engine="three.js r141" width="750" height="1334"></canvas></div></div>

[xr-dev-saurabh]

Hi, did you got the solution, how to change touch-action. I'm running into the same issue.

[drcmda]

touch action isn't set by fiber, you can just set it, it's a simple css rule

canvas {
  touch-action: ...
}

[xr-dev-saurabh]

Thanks. It helped.

[shahnihal01]

Nah bro, I did not... I instead wrapped the canvas div into another div and then proceeded with overlaying two divs on each side so that the user can scroll using those divs and the middle div can be used for interaction of canvas... https://nihal-shah.vercel.app/ You can inspect this and understand what I mean to say... Anyways if you do get the solution to it please let me know as it'd be immensely helpful further in some projects. Thank You, Nihal

…

On Thu, Feb 16, 2023 at 6:16 PM usaurabh02 ***@***.***> wrote: Hi, did you got the solution, how to change touch-action. I'm runninginto the same issue. — Reply to this email directly, view it on GitHub <#1222 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ATSVWBDXSUHD46LEQER3EDTWXYORJANCNFSM42YVOO3A> . You are receiving this because you commented.Message ID: ***@***.*** com>

[shahnihal01]

OOOOOWWWW yeaahhhhh damnnnn. Thanks, a lot buddy! Will surely implement it in the future!

…

On Thu, Feb 16, 2023 at 8:27 PM — ***@***.***> wrote: touch action isn't set by fiber, you can just set it, it's a simple css rule canvas { touch-action: ... } — Reply to this email directly, view it on GitHub <#1222 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ATSVWBADPRS3YABF6VY42ILWXY56LANCNFSM42YVOO3A> . You are receiving this because you commented.Message ID: ***@***.*** com>