Topic: Table hover collor not change
allancmello
premium
asked 3 weeks 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;
Arkadiusz Idzikowski
staff
answered 2 weeks ago
Here is an example of mdbScrollbar colors customization:
$scrollbar-rail-bg: yellow;
$scrollbar-thumb-bg: red;
allancmello premium commented 2 weeks 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 week 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 week 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.
Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Closed
- 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
Arkadiusz Idzikowski staff commented 3 weeks 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 3 weeks 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:
Arkadiusz Idzikowski staff commented 2 weeks 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 2 weeks ago
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;
}
.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 2 weeks 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 2 weeks ago
I identified the problems.
The table behavior (hover, scroll, page, etc.) and its SCSS classes do not work correctly when:
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.
Arkadiusz Idzikowski staff commented 2 weeks 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.