Блог

Содержимое отображается таким образом в браузере вместе с прокруткой

Вот как выглядит модальная прокрутка

 const [visiblee, setVisiblee] = useState(false);

const showModall = () => {
           setVisiblee(true)
                           };

const handleOKK = e => {
            console.log(e);
            setVisiblee(false);
                         }

const handleCancell = e => {
                console.log(e);
                setVisiblee(false);
                             };

<Button style={{float: 'right'}} type="primary" onClick={showModall}>
                SQLQuery
              </Button>
              <Modal class="adjust"
                visible={visiblee}
                onOk={handleOKK}
                onCancel={handleCancell}
                width={1000}
                bodyStyle={{height:1000}}
              >
              <p>
                  <p><JSONPretty id="json-pretty" data={response}></JSONPretty></p>
              </p>
              </Modal>
              <StyledDividerr type="vertical"/><JSONPretty id="json-pretty" data={response}></JSONPretty>{renderChart(component)({ ...renderProps, pivotConfig })} 
  

Я хочу отобразить sql таким образом —
этот модал из antd.

Наверное, мне нужно отформатировать SQL, может быть? Есть ли способ вертикальной прокрутки этого?

Вы должны стилизовать div так, чтобы он имел фиксированный размер, фиксированную высоту и свойство прокрутки переполнения.

 .test {
    border: 1px solid black;
    width: 150px;
    height: 150px;
    overflow-y: scroll; //vertical scorlling
    overflow-x: scroll; //horizontal scroll  
}
  

Это пример скрипки: https://jsfiddle.net/Lmecutg3/2 /