Table hover collor not change

Arkadiusz Idzikowski staff commented 5 days ago

The styles you provided change the table hover color correctly. You just need to make sure to add them before the mdb.scss styles import.

As for the problem with pagination arrows, we could not reproduce such a bug on our end. Do you use any custom styles that can change the buttons padding?

allancmello pro premium commented 5 days ago

Hi Arkkadiusz,

My style.scss:

// Importação de variáveis padrão MDB

$accordion-button-color: #ffaa18; $accordion-button-bg: #0f0f0f;

$tooltip-bg: #000; $tooltip-border-radius: .50rem;

$sidenav-background-color: #1C2331;

$progress-bar-bg: #1C2331;

$nav-tabs-link-active-color: #03cb21f7; $nav-tabs-link-active-bg: #0f0f0f; $nav-tabs-link-active-border-color: #0cf22ff7;

$table-hover-color: #f7ca28; $table-hover-bg-factor: 0.9;

@import 'mdb-angular-ui-kit/assets/scss/mdb.scss';

// TABLE

table { table-layout: auto !important; width: 100% !important;

th { position: -webkit-sticky; // this is for all Safari (Desktop & iOS), not for Chrome position: sticky; overflow-y: auto; top: 0; z-index: 1; // any positive value, layer order is global //background: #fff; // any bg-color to overlap }

td { vertical-align: middle !important; }

}

.table-wrapper { display: block !important; max-height: 300px !important; overflow-y: auto !important; -ms-overflow-style: -ms-autohiding-scrollbar !important; }

.table-ui { border: 1px solid #e0e0e9 !important;}

About "custom styles buttons padding". - I don't use any customization for button padding.

My Paginate:

            <div class="col-6 col-md-6">
                <div class="d-flex justify-content-end">
                        <mdb-table-pagination #pagination [entries]="5"
                            [entriesOptions]="[5,10,15,20,25]"
                            rowsPerPageText="Reg. por Página"
                            ofText="de"
                            [disabled]="addRow || editElementIndex !== -1 || loading"
                            class="light-blue text-dark"
                            style="font-weight: bold !important;"></mdb-table-pagination>
                </div>    
            </div>

Arkadiusz Idzikowski staff commented 2 days ago

We used your styles but we still could not reproduce these problems. Could you please try to check the styles in browser dev tools to check which rules exactly override the styling of these elements?

What classes did you include in the HTML to activate hover?

allancmello pro premium commented 24 hours ago

The table has a detail table, the striped class does not work in the master table. Theses classes:

    <div style="max-height: 500px !important;" 
        class="datatable table-editor table-wrapper border scrollbar-cols scrollbar-custom bordered-custom"
        [ngClass]="{'edited-table': addRow || editElementIndex !== -1}">
        <div class="datatable-inner border">
            <!-- TABLE MAIN -->
            <table
                class="table datatable-table table-striped"
                mdbTable
                mdbTableSort
                #table="mdbTable"
                #sort="mdbTableSort"
                [bordered]="true"
                [hover]="true"
                [striped]="true"
                [fixedHeader]="true"
                [dataSource]="dataSource"
                [sort]="sort"
                [pagination]="pagination">

//-------------------------Custom Classes -------------------------------// // TABLES table { table-layout: auto !important; width: 100% !important;

th {
    position: -webkit-sticky; // this is for all Safari (Desktop & iOS), not for Chrome
    position: sticky;
    overflow-y: auto;
    top: 0;
    z-index: 1; // any positive value, layer order is global
    //background: #fff; // any bg-color to overlap
}

td {
    vertical-align: middle !important;
}

}

.table-wrapper { display: block !important; max-height: 300px !important; overflow-y: auto !important; -ms-overflow-style: -ms-autohiding-scrollbar !important; }

.table-ui { border: 1px solid #e0e0e9 !important; }

// SCROOLBARS .scrollbar-cols::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); background-color: #F5F5F5; border-radius: 10px; }

.scrollbar-cols::-webkit-scrollbar { width: 8px; background-color: #F5F5F5; }

.scrollbar-cols::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); background-color: #8f8e8e; }

.scrollbar-custom::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); background-color: #F5F5F5; border-radius: 10px; }

.scrollbar-custom::-webkit-scrollbar { width: 12px; background-color: #F5F5F5; }

.scrollbar-custom::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); background-color: #B71C1C; //#c41b05; }

.bordered-custom::-webkit-scrollbar-track { -webkit-box-shadow: none; border: 1px solid #f8a710; }

.bordered-custom::-webkit-scrollbar-thumb { -webkit-box-shadow: none; }

Arkadiusz Idzikowski staff commented 3 hours ago

Unfortunately we still could not reproduce those problems on our end. Like I mentioned in my previous comment, the best way to find out why those styles are not working correctly would be to use browser devtools. Please try to inspect those elements and check if the MDB styles are overridden by some other rules.