Select uses hard-coded color values

Topic: Select uses hard-coded color values

UNNdev priority asked 2 years ago

Expected behavior

The Select component always uses theme colors, no matter if blurred or focused, with or without its options expanded.

Actual behavior

The Select component uses hard-coded color values defined in mdb-ui-kit/src/scss/pro/_select.scss. Label, border, arrow, they use colors like #1266f1 or #4285f4 which collide with custom theme colors.The behavior is also somewhat faulty: if the Select component is focused, the label and the border have the right theme colors. If the Select component loses focus while its options are visible, the color turns to blue. The arrow is always blue while opened, though.

Resources (screenshots, code snippets etc.)

https://imgur.com/a/0GXcyYK

Add comment

VDLP priority answered 2 years ago

0 0 Best answer

Hello!

We also have this issue with latest MDB 5 Vue Pro version.

Would be nice to remove all hard-coded colors and other values (like borders) and use sass-variabelen instead. Preferably the option for component vars with fallback on default vars like some other components and how Bootstrap does it.

$form-select-border-width: $input-border-width !default;

$input-border-width: $input-btn-border-width !default;

$input-btn-border-width: $border-width !default;

$border-width: 1px !default;

If you set $border-with: 2px and $primary: red; it changes the default state for inputs/select the correct way. But if you focus the input its border with 1px and #1266f1. Modifying vars for this (like $form-select-focus-width) do not work because of hard-coded valus.

This should work like you would expect. Now you can only fix it by nasty overrides.

Can you give an estimate when this can be fixed or what the focus is on issues like this?

Cheers!

Please insert min. 20 characters.

Hello!

We also have this issue with latest MDB 5 Vue Pro version.

Would be nice to remove all hard-coded colors and other values (like borders) and use sass-variabelen instead. Preferably the option for component vars with fallback on default vars like some other components and how Bootstrap does it.

$form-select-border-width: $input-border-width !default;

$input-border-width: $input-btn-border-width !default;

$input-btn-border-width: $border-width !default;

$border-width: 1px !default;

If you set $border-with: 2px and $primary: red; it changes the default state for inputs/select the correct way. But if you focus the input its border with 1px and #1266f1. Modifying vars for this (like $form-select-focus-width) do not work because of hard-coded valus.

This should work like you would expect. Now you can only fix it by nasty overrides.

Can you give an estimate when this can be fixed or what the focus is on issues like this?

Cheers!

Mikołaj Smoleński staff commented 2 years ago

Thanks for posting the issue. We're going to discuss your proposal and we'll let you know about the decision soon

Keep coding, Mikołaj from MDB

Add comment

Michał Duszak staff answered 2 years ago

0 0 Best answer

By the time we make it more convenient, here's a quick CSS to customize those colors: https://mdbootstrap.com/snippets/standard/m-duszak/3124032#css-tab-view

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Priority
Premium support: Yes
Technology: MDB Standard
MDB Version: MDB5 3.7.1
Device: All devices
Browser: All browsers
OS: All operating systems
Provided sample code: Yes
Provided link: Yes

UNNdev

605Support score
52Questions 26Answers 21Snippets