Table hover collor not change

Topic: Table hover collor not change

allancmello premium asked 1 month ago

How do I change the hover color on the table? I can only darken it by changing the "$table-hover-bg-factor".

And how do I increase the space between paginate arrows? There's no spacing between them, see image.

Code:

$table-hover-color: #f7ca28;

$table-hover-bg-factor: 0.9;

Table hover dark and no space between arrows navigate

Arkadiusz Idzikowski staff commented 1 month 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 premium commented 1 month 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>

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:

Please insert min. 15 characters.

Arkadiusz Idzikowski staff commented 1 month 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 premium commented 1 month 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; }

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

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

<pre class="prettyprint"><code>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;
}
</code></pre>

}

.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;
}

Please insert min. 15 characters.

Arkadiusz Idzikowski staff commented 1 month 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.

allancmello premium commented 1 month ago

I identified the problems.

The table behavior (hover, scroll, page, etc.) and its SCSS classes do not work correctly when:

Using the "table-editor" class plugin (affects scss variables by ignoring them)
Within cards
Within cards, when using the "mdbScrollbar," the card and the main container are also affected, with both scrolling.

Now the question is, how do I customize the appearance of the mdb Scrollbar? Is it possible? Below is an image of the "mdbScrollbar" customization I want.

Please insert min. 15 characters.

Arkadiusz Idzikowski staff commented 1 month ago

If there are still any problems with the table styles, could you please create a very simple HTML/SCSS code on which we will be able to reproduce the bugs?

You should be able to modify some colors (rail and thumb) in mdbScrollbar. I included an example in my answer.

Add comment

Arkadiusz Idzikowski staff answered 1 month ago

0 0 Best answer

Here is an example of mdbScrollbar colors customization:

$scrollbar-rail-bg: yellow;
$scrollbar-thumb-bg: red;

allancmello premium commented 1 month ago

Ok, in the module version, everything is fine. But the standalone version doesn't work. I'll prepare a simple app and send it to you. Could you give me an email address where I can send it to you?

Where can I find the link with the mdbScrollbar SCSS variables? There's no link in the Angular docs.

Arkadiusz Idzikowski staff commented 1 month ago

This is very strange because using the standalone version shouldn't affect the styles in any way. Are you sure your configuration is identical in both projects?

For security reasons, we don't accept projects sent via email. Could you try to reproduce this problem with a simple example in a new project and share the code here or share a link to a GitHub repo so we can take a look?

A list of mdbScrollbar variables is not available yet in the documentation. I added this to our to-do list.

allancmello premium commented 1 month ago

Hi Arkadiusz,

You're absolutely right. What happened was a huge mix-up on my part. I'm migrating from version 7.1 to 8, and the issues I encountered were in version 7.1 standalone. In version 8, everything is fine! My apologies for the confusion. Topic closed.

Add comment

Closed

This topic is closed.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue

ForumUser: Premium
Premium support: Yes
Technology: MDB Angular
MDB Version: MDB5 7.1.0
Device: All
Browser: All
OS: All
Provided sample code: No
Provided link: No

allancmello

Premium support 140Support score
36Questions 13Answers 0Snippets