Are you certain it's a bug?
Are you sure this is not an issue in noVNC?
Is there an existing issue for this?
Issue description
The VncScreen component adds an extra unstyleable wrapper <div> around the main noVNC <div>, which means setting <VncScreen style={{ height: '100%' }} ...> does nothing, since the height of the wrapper <div> will default to 0 (ie. the component will just turn invisible) due to the CSS box model.
(height: 100% is particularly useful in conjunction with scaleViewport and flexbox to eg. render an almost fullscreen VNC but with a variable-sized header/toolbar before it)
Right now, there's no good way to make this work nicely (without CSS children selector > div hacks and even more wrapper divs anyway)
Location of issue:
|
return ( |
|
<div> |
|
<div |
|
style={style} |
|
className={className} |
|
ref={screen} |
|
onMouseEnter={handleMouseEnter} |
|
onMouseLeave={handleMouseLeave} |
|
/> |
|
{loading && (loadingUI ?? <div className="text-white loading">Loading...</div>)} |
|
</div> |
I propose that the <div> should be a fragment instead to make it work nicely with all CSS layouts (ie. return <> <div>...</div> { ... } </>)
(this issue was introduced in d716043)
Are you certain it's a bug?
Are you sure this is not an issue in noVNC?
Is there an existing issue for this?
Issue description
The
VncScreencomponent adds an extra unstyleable wrapper<div>around the main noVNC<div>, which means setting<VncScreen style={{ height: '100%' }} ...>does nothing, since the height of the wrapper<div>will default to 0 (ie. the component will just turn invisible) due to the CSS box model.(
height: 100%is particularly useful in conjunction withscaleViewportand flexbox to eg. render an almost fullscreen VNC but with a variable-sized header/toolbar before it)Right now, there's no good way to make this work nicely (without CSS children selector
> divhacks and even more wrapper divs anyway)Location of issue:
react-vnc/src/lib/VncScreen.tsx
Lines 344 to 354 in 66221f0
I propose that the
<div>should be a fragment instead to make it work nicely with all CSS layouts (ie.return <> <div>...</div> { ... } </>)(this issue was introduced in d716043)