Issue with mosaic.less style causing Mosaic component to not render by default

[David Promisel]

Bug report

• Package version(s): 4.1.1
• Browser and OS versions: macOS 10.15 and Chrome 85

Steps to reproduce

1. yarn create react-app my-app --template typescript
2. yarn add react-mosaic-component
3. Import 'react-mosaic-component/react-mosaic-component.css' in index.tsx
4. Use example application:
   

Actual behavior

By default, this is how the application renders:

Expected behavior

I was able to get Mosaic to render by removing position: relative in chrome dev tools.

It appears this can be resolved by removing this line:

react-mosaic/styles/mosaic.less

Line 95 in a80ebd4

 position: relative; 

[Kevin Verdieck]

Can you paste your App.css? Did you include the part making all the parents of #root take 100% of the available space?

[David Promisel]

Here is my app.css #app { height: 100%; width: 100%; margin: 0; }

I also updated the above comment to show me setting the id of the parent div.

[David Promisel]

Just updated the github issue with more information. Still having the same issue.

…

On Wed, Nov 4, 2020 at 2:09 PM Kevin Verdieck ***@***.***> wrote: Can you paste your App.css? Did you include the part making all the parents of #root take 100% of the available space? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#154 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AH2MWC2O63RSU424MU6IVMLSOGRG7ANCNFSM4TKJCCOQ> .

[Kevin Verdieck]

That isn't enough, you also need to style its parents. Also in your screenshot nothing has an ID of app?

Try:

#app, #root, html, body { height: 100%; width: 100%; margin: 0; }

[David Promisel]

That did it, thanks for the help, sorry for the trouble.