Как я могу сделать белую рамку более широкой вокруг полосы прокрутки ag-grid? - PullRequest
Новая
       20

Как я могу сделать белую рамку более широкой вокруг полосы прокрутки ag-grid?

0 голосов
/ 29 октября 2019

Я работаю с Ag-grid для реагирования на JavaScript. Мне предоставили проволочную рамку, которая меняет полосу прокрутки по умолчанию Ag-сетки. Моя цель - воспроизвести то же самое для моего пользовательского интерфейса.

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

.ag-theme-fresh .ag-root{
        
        min-height: 200px;
        border: ${props => props.showBorder === true ? "1px solid #efefef" : "0px"};
    }
.ag-theme-fresh .ag-header{
    background-image: none;    
    font-family: "Frutiger";
    border-bottom: none;
    color:#646464;
    height:50px;
    min-height:50px;
}
.ag-theme-fresh .ag-header-row,.ag-theme-fresh .ag-pivot-off{
    height: 50px !important;
    min-height: 50px !important;
}


.ag-theme-fresh .ag-header-cell, .ag-theme-fresh .ag-ltr .ag-cell{
    border:none;
}
.ag-theme-fresh .ag-header-cell{
   
    padding-top: 15px;
    padding-bottom: 15px
    height: auto;
}
.ag-theme-fresh .ag-cell{
    line-height: 50px;
}
.ag-theme-fresh .ag-row-odd{
    background-color:white;
}

.ag-theme-fresh .ag-row-even{
    background-color:#eeeeee;
}
.ag-root ::-webkit-scrollbar {
    box-shadow: -5px 3px 6px 0 rgba(100, 100, 100, 0.16);
    background-color: #ffffff;
width:50 px;
height:900px;
   

}   

.ag-root :: -webkit-scrollbar-track {
    width:7px !important;
    box-shadow: inset 0 0 px grey; 
    border-radius: 10px;
    background:#ededed;
    height:856px;
}  

.ag-root :: -webkit-scrollbar-thumb {
    background: #cccccc;
    width:7px !important;
    height:785px; 
    border-radius: 10px;
}

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

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

Заранее спасибо.

Image for the wireframe

My scrollbar

1 Ответ

0 голосов
/ 29 октября 2019

Я вообще хотел убрать панель, поэтому сделал (в SCSS): 

    .body-editor{
     height: fit-content ;
     margin-top:-5px;
     overflow: auto;
     **&::-webkit-scrollbar{width: 0px !important;}**
}

Попробуйте использовать :: - webkit-scrollbar {}?

...