How can I make the card component work with react-split-pane component?

Question

Here is my code.

My problem is, how can I use the card component to fill the first pane of the SplitPane without using h-100 class?

It is because when I use h-100 class for the Card component, it spoils the layout when the users click on the input box on the mobile platform.

I tried to use the "flex-grow-1" class to solve the problem, however, it does not work.

Besides that, I am not sure whether the react-split-pane its own handling method for the orientation change event. If so, please let me know.

Answer 1

Implementation using flex-grow-1 will not work because if you inspect the elements, the parent of the Card component is an additional div element generated by the SplitPane and is not a flex container.

You can still use h-100 but in order to solve the layout issues on "small window.innerHeight" devices (such as the scenario you described like opening the virtual keyboard on a mobile devices), you simply need to make tweaks in your condition statements to assess whether the SplitPane should switch split prop of horizontal or vertical

In my example below you can see that I factor in a "minimum width" for the left pane to consider the width of the input field on your StackBlitz example code which is set to 182px as I reviewed.

this.setOrientation = () => {

  let leftPanelMinWidth = 182;

  if (window.innerHeight > window.innerWidth - leftPanelMinWidth) {
    this.setState({ splitDirection: "horizontal" });
  } else {
    this.setState({ splitDirection: "vertical" });
  }
}

I imagine you can implement the same in logic when the component mounts.