RDT column filter styles

#1

Hello guys I have a problem, I was trying to seach in a column filter in the Raw data table and the name of the field was rendered below, like this:

image
image.png788×702 31.4 KB

I just implemented some custom styles, like this:

.ag-row-selected {
    color: black !important;
}

.cf-multifilter-text-field {
    width: 85% !important;
    height: 60% !important;
    border: 1px solid #b3e5fc !important;
    margin-top: 6px !important;
}

.cf-multifilter-container {
    width: 250px !important;
    height: 270px !important;
    grid-template-rows: 25% 75% !important;
}

.cf-multifilter-textsearch {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #b3e5fc;
}

.ag-menu,
.ag-ltr {
    background-color: white !important;
}

.cf-multilist-grid
    > .ag-root-wrapper
    > .ag-root-wrapper-body
    > .ag-root
    > .ag-header {
    height: 0px !important;
    border: none;
}

.cf-multilist-grid
    > .ag-root-wrapper
    > .ag-root-wrapper-body
    > .ag-root
    > .ag-body-viewport
    > .ag-center-cols-clipper
    > .ag-center-cols-viewport
    > .ag-center-cols-container
    > * {
    border: none !important;
    background-color: #b3e5fc;
    color: #5f6478;
}

.cf-multilist-grid
    > .ag-root-wrapper
    > .ag-root-wrapper-body
    > .ag-root
    > .ag-body-viewport
    > .ag-center-cols-clipper
    > .ag-center-cols-viewport
    > .ag-center-cols-container
    > .ag-row
    > * {
    padding-left: 18px;
}

.cf-multilist-grid > .ag-root-wrapper > .ag-root-wrapper-body > .ag-root {
    border: none !important;
    border-radius: 0px !important;
}

.centered > div.ag-cell-label-container > div.ag-header-cell-label {
    justify-content: center;
}

@media (max-width: 1300px) {
    .ag-header.ag-pivot-off,
    .ag-header-row {
        height: 12px !important;
    }
}

So my question is if the problem is my custom styles file or it is a toolkit issue?

#3

Well, let me say this, you are editing the ag-grid styles, so I’m pretty sure that the problem is there, and just copying and pasting your styles in one of my projects I can reproduce the issue, so the problem is this:

@media (max-width: 1300px) {
    .ag-header.ag-pivot-off,
    .ag-header-row {
        height: 12px !important;
    }
}

If you really need that styles, you can add this in the media query:

@media (max-width: 1300px) {
    .ag-header.ag-pivot-off,
    .ag-header-row {
        height: 12px !important;
    }

    .ag-filter . ag-header-row {
        height: unset !important;
    }
}

That style should solve the problem in the column filters, so just try it and let me know

#4

Got it, I was thinking that the problem was in the toolkit because i was seeing the name of the field but I see now, the problems are in my styles and actually i tested it is working good now, so thank you so much.