dropdownlist behaves like button

[AndersMad]

The dropdownlist styles "behaves" like button ($dropdownlist-bg: $button-bg) but the standard html select does not.

1) I would like to request an option for this e.g. $kendo-style-dropdown-as-select: 1; and then dropdown _variables.scss could conditionally @if that.

I can override the variables, but it's a bit tricky as it has to happen between variables and usage. E.g. $dropdownlist-bg: $input-bg;. But even when doing so:

2) The .k-select is missing styles - like the combobox has.

[joneff]

Just to make sure, you would like to have styles for the following selecttor select.k-dropdown?

[AndersMad]

In combobox it goes: $combobox-bg: $input-bg !default;

But in kendo-theme-default\scss\dropdownlist_variables.scss the styles goes: $dropdownlist-bg: $button-bg !default;

It would be really nice if it whet e.g. like:

@if ($style-dropdown-as-a-normal-select-or-same-as-combox-not-as-a-button) {
    $dropdownlist-bg: $input-bg !default;
    ...
} else {
    $dropdownlist-bg: $button-bg !default;
    ...
}

If that feature is done - the dropdownlist will need styling on the select button just as in combobox _theme.scss:

@include exports("dropdown/theme") {
    .k-dropdown {
        .k-select {
            @include fill(
                $dropdown-select-text,
                $dropdown-select-bg,
                $dropdown-select-border,
                $dropdown-select-gradient
            );
        }

With new variables and for hover etc.

[joneff]

The main difference between a combobox and dropdown is that the latter does not allow custom values (which explains the the different appearance).

However, due to customer request, combobox can in fact behave like dropdown in the sense that it may prohibit custom values:

• Kendo UI for Angular -- https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/custom-values/
• Kendo UI for React -- https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/custom-values/
• Kendo UI for Jquery -- https://docs.telerik.com/kendo-ui/controls/editors/combobox/how-to/customize/readonly-visible-input (that's more of an example, not built in)

I think this would be more suitable for your case.

[AndersMad]

The dropdownlist and native select is pretty much 1 to 1 in behaviour - one could say that the dropdownlist is an extended select. However in native html or bs (https://getbootstrap.com/docs/5.1/forms/select/), the entire select control is never styles as "a button" - but it is in Kendo UI.

So I was just asking for a way to get the CSS (via SCSS variable option) as a more standard styled way. I have my SCSS hacks that makes it so - I will just continue using that then (I do not wanna use combobox where dropdownlist applies). If rejected just close this :)

[DaleyKD]

I'm so thankful I stumbled across this. I've been using the DDL and was not pleased with the way it styled compared to the rest of Bootstrap. It truly looks like it sticks out like a sore thumb.

But looking at the ComboBox, that may work much more for my needs. Thank you!

[AndersMad]

but the CB has no e.g. valueTemplate - also its a lot of code to re-write just for styling. @DaleyKD if you agree on, that the DDL should (be able to) look like a "normal select" and not a "button stick" - please upvote :)

[DaleyKD]

This is what I did to try and get my DDL to look more like a select. Not 100% perfect, but I like it:

$list-item-padding-y: 6px;
$list-item-hovered-bg: $dropdown-link-active-bg;
$list-item-hovered-text: $dropdown-link-active-color;
$list-item-selected-bg: $dropdown-link-hover-bg;
$list-item-selected-text: $dropdown-link-hover-color;
$list-item-focused-shadow: none;

$dropdownlist-bg: $input-bg;
$dropdownlist-text: $input-color;
$dropdownlist-border: $input-border-color;
$dropdownlist-hovered-bg: $input-bg;
$dropdownlist-hovered-text: $input-color;
$dropdownlist-hovered-border: $input-border-color;
$dropdownlist-focused-bg: $input-focus-bg;
$dropdownlist-focused-text: $input-focus-color;
$dropdownlist-focused-border: $input-focus-border-color;
$dropdownlist-focused-shadow: $input-focus-box-shadow;

/* https://github.com/telerik/kendo-themes/issues/2888 */
.k-list .k-item:focus,
.k-list .k-item.k-state-focused,
.k-list-optionlabel:focus,
.k-list-optionlabel.k-state-focused {
    box-shadow: none;

    &:hover,
    &.k-state-hover {
        box-shadow: none;
    }

    &.k-state-selected {
        box-shadow: none;
    }
}