Реакция разделенной панели показывает над другими компонентами при использовании `display: flex` - PullRequest
Новая
       34

Реакция разделенной панели показывает над другими компонентами при использовании `display: flex`

0 голосов
/ 30 июня 2019

Для моего нового реактивного проекта мне нужна разделенная панель.
Я использую https://github.com/tomkp/react-split-pane для этого.
После того, как я все реализовал, я захотел, чтобы мой заголовок выше выглядел так:

How the design should look like

Итак, я добавил заголовок к своему корневому компоненту. 

render() {
        return (
            <div className='App'>
                <h1>This is my heading</h1>
                <SplitPane split='vertical' minSize={50} defaultSize={100}>
                    <div>split 1</div>
                    <div>split 2</div>
                </SplitPane>
            </div>
        );
    }
}

Точно так же, как и без всяких CSS, это дало мне почти правильный результат. И единственная проблема здесь в том, что разделенная панель, кажется, принимает 100vh в качестве своей высоты, и, следовательно, общее приложение больше. Что дает мне красивую полосу прокрутки, которую я не хочу.

Wihtout any css

Моя следующая идея состояла в том, чтобы просто поместить все в сетку CSS (я знаю, что это, вероятно, не лучший вариант использования, но, по крайней мере, я бы знал, как решить проблему с размером), а затем изменить его размер, используя относительные единицы.

CSS, который я добавил к своему основному компоненту: 

.App {
    display: grid;
    grid-template-rows: auto 1fr;
}

Это изменение не дало мне того эффекта, которого я хотел. Вместо того, чтобы аккуратно сложить все, он как-то поместил разделенную панель над заголовком.

image with css applied

Я думал, что что-то не так с сеткой CSS, поэтому я применил display: flex;, который дал мне ту же проблему.

Я действительно не знаю, в чем здесь проблема, поэтому мне любопытно, сталкивался ли кто-нибудь с такой проблемой раньше.

1 Ответ

1 голос
/ 30 июня 2019

Исходное решение

Исходный код SplitPane

Добавьте это к вашему .App селектору: 

.App {
    position: relative;
}

Кроме того, если вы хотите, чтобы ширина обеих панелей составляла ровно половину, замените компонент SplitPane следующим образом: 

<SplitPane split="vertical" minSize={"50%"} defaultSize={"50%"}>

К сожалению, существует проблема, когда размеры панелей перестают изменяться, и приложение выходит из приложения.границ очень малой ширины.

В ответ на:

SplitPane сжимается до размера, когда он не может быть использован, даже если высотаустановлено на 100%.

Содержимое внутри SplitPane не отображается / не используется, потому что:

  1. SplitPane имеет свойство height: 100%.Это означает, что высота SplitPane составляет 100% от высоты его родителя.

  2. SplitPane имеет свойство overflow: hidden.Это позволит скрыть любой контент, который превышает размеры SplitPane.

    Поскольку SplitPane's height = .App's height = h1's height и высота для h1 составляли около 30-40 пикселей, высота SplitPane также была около 30-40 пикселей.Это означало, что любой дочерний элемент SplitPane с высотой более 30-40 пикселей был обрезан.

  3. SplitPane, скорее всего, вычисляет, сколько смещаться от вершины, вычисляя общую высоту его предыдущих братьев и сестер.

Я создал тестовый пример для маркеров.

Итак, теперь мы знаем, что CSS-свойства SplitPane выглядят так: 

{
    position: absolute;
    top: 0 | /* auto-calculated by SplitPane */;
    left: 0 | /* auto-calculated by SplitPane */;
    overflow: hidden;
    height: 100%; /* total height of preceding siblings */
    ...
}

Следующими вашими шагами будет принятие решения о том, как вы хотели бы, чтобы ваше приложение выглядело и функционировало, и принятие решений на основе вашего решения.Для начала:

  • Хотите ли вы, чтобы ваша панель навигации была прикреплена к верхней части области просмотра?

  • Как вы хотите обрабатывать лишний контент внутрипанелей, если вам не нужна полоса прокрутки?

  • Ваш веб-сайт удобен для мобильных устройств?Если да, то как бы вы хотели отображать разделенные панели на маленьких экранах?

В ответ на:

Как изменить значение на position: relative при назначении всего пространства под заголовком разделенному представлению?

Некоторые возможные решения заключаются в использовании Javascript или, возможно, Sass / SCSS / Less для установки общей высотыSplitPane равняется высоте области просмотра за вычетом смещения SplitPane от вершины.

Трудно дать однозначный ответ, потому что я не знаю, как вы хотите обрабатывать просмотр контента, который превышает 100vh без полосы прокрутки.

В ответ на:

[I] не может использовать display: grid или flex, так каквсе равно перезапишет заголовок.

Flexbox / Grid не работает, потому что SplitPane не находится в том же пространстве, что и его братья и сестры.Вам придется переписать свойство position в SplitPane на static.

CodePen 

.App {
  display: flex; /* Introduce Flexbox*/

  /* This is added to change the orientation of elements from 
     left-right (row) to top-bottom (column). */
  flex-direction: column;
}

<SplitPane ... style={ {position: "static"} }>

Следующие шаги

Единственное, что я могу порекомендовать на этом этапе, это добавить height: 100vh и width: 100vw к .App.

...