Top: 50px not working inside react component SplitPane

1

My Code
When i put top: 50px inside inline style component it does not work,

const SplitView = () => {
  return (
    <Wrapper>
      <SplitPane
        style={{ top: "50px" }}
        pane1Style={{ backgroundColor: color }}
        pane2Style={{ backgroundColor: color2 }}
        split="horizontal"
        defaultSize="50%"
        maxSize={-100}
      >
        <div />
        <div />
      </SplitPane>
    </Wrapper>
  );
};

But when i change the value inside the dev tools it works properly see the image below.
Why it does not work inside inline styled components ?

image
image1440×900 134 KB

2

Top only works with position: abosute | relative | fixed

try adding position: relative in the inline-style

3

It does not work that way. <SplitPane/> is position: absolute by default

4

Is the parent of <SplitPane /> relative?
position: absolute only works if the parent is in position: relative

The parent of <SplitPane /> is <Wrapper>, <Wrapper> must be in position: relative

5

No still it does not work !!! :smiley: :smiley:

6

I assume you just want to push it down so you can see the nav. If so give it a top margin, no need to mess with position if you don’t have to. Especially when the component is using positioning for the layout already.

style={{ marginTop: "56px" }}

7

Thank you again Mr. lasjorg you make everything easy. :sparkling_heart: :heartbeat: