OTPublisher/OTSubscriber does not adopt parent height when at 100%

[gty3]

When the OTPublisher/Subscriber component have a width and height property of '100%' to adopt the width/height of the parent, only the width is adopted, and the height remains at 48px. The following would produce a publisher 500x48px :

<div style={{width: '500px',height: '500px'}}>
  <OTPublisher
     properties={{ insertMode: "append", width: '100%', height: '100%' }}
   />
</div>

Looking at the html elements, if I change the OTPublisherContainer styling which is blank to include a height property, it will update the publisher's height successfully :

<div class="OTPublisherContainer" id="OT_f55f...">
  <div id="OT_0865..." style="width: 100%; height: 100%; overflow: hidden;" 
    class="OT_root OT_publisher OT_fit-mode-contain OT_micro OT_mini">
  ...
  </div>
</div>

This is in the React-Basic-Video-Chat example in opentok-web-samples, with no changes to dependencies. I also tried replicating the code shown here https://tokbox.com/developer/guides/customize-ui/js/#video_resize_reposition with the same results.

Thanks

[achrefBoukhili]

I had the same issue but you can resolve it by selecting the first div child of the parrent component and make the height as 100%

<div className='subscriberContainer'>
  <OTPublisher
     properties={{ insertMode: "append", width: '100%', height: '100%' }}
   />
</div>

.subscriberContainer { width: 500px; height: 500px; }
.subscriberContainer div:first-child { height: 100%; }

[Nziranziza]

The main reason is this wrapper https://github.com/opentok/opentok-react/blob/a3dbf35cb085f06d30ddebd988d7a451931e5f89/src/OTSubscriberContext.js#L16 A good idea would be to use a react fragment, apparently, if you want to use a customized OTSubscriber it will end up getting wrapped with that div, which sometimes broke the CSS.