Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Kendo combobox and Dropdown conflict with kendo panel bar #3819

Closed
Tracked by #4176
olehvayda opened this issue Aug 11, 2022 · 1 comment
Closed
Tracked by #4176

Kendo combobox and Dropdown conflict with kendo panel bar #3819

olehvayda opened this issue Aug 11, 2022 · 1 comment
Labels
Invalid This doesn't seem right

Comments

@olehvayda
Copy link

olehvayda commented Aug 11, 2022 •
edited by joneff

Describe the bug
Kendo ComboBox and DropDownList controls are conflicting with kendo PanelBar.
If ComboBox or DropDownList control is included inside a kendo PanelBar, the the dropdown elements of both controls are detached from the combobox or dropdownlist inputs respectively.

To reproduce
In order to reproduce the behaviour:

  1. Create a kendo PanelBar with one item
  2. In the previously created panel's bar item create a list
  3. Add input value in one of the list items
  4. Add ComboBox or DropDownList kendo control to the input
  5. Both controls will have detached the dropdown elements
  6. You can run the piece of code (additional context section) in dojo to reproduce the issue

Expected behavior
ComboBox or DropDownList controls should work correctly and the dropdown elements of controls should not be detached.

Screenshots
image

Affected package (please remove the unneeded items)

  • theme-bootstrap

Affected suites (please remove the unneeded items)

  • Kendo UI for jQuery

Affected browsers (please remove the unneeded items)

  • All

Build system information (please remove the unneeded items)

  • Not Applicable

Additional context

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/panelbar/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.802/styles/kendo.default-ocean-blue.min.css" />

    <script src="https://kendo.cdn.telerik.com/2022.2.802/js/jquery.min.js"></script>
    
    
    <script src="https://kendo.cdn.telerik.com/2022.2.802/js/kendo.all.min.js"></script>
    
    

</head>
<body>
    
<div id="example">
    <ul id="panelbar">
        <li>
            Days
            <ul>
                <li><input id="daysInput" placeholder="Select day..." /></li>
            </ul>
        </li>
    </ul>
    <style>
        #panelbar {
            max-width: 400px;
            margin: 0 auto;
        }
        .teamMate h2 {
            font-size: 1.4em;
            font-weight: normal;
            margin-bottom: 0px;
        }
        .teamMate p {
            margin: 0;
        }
        .teamMate img {
            display: inline-block;
            margin: 5px 15px 5px 5px;
            border: 1px solid #ccc;
            border-radius: 50%;
        }
        .details {
            display: inline-block;
            vertical-align: top;
        }
    </style>
    <script>
        $(document).ready(function() {
            $("#panelbar").kendoPanelBar({
                expandMode: "single"
            });
          
          	$("#daysInput").kendoComboBox({
                        dataTextField: "text",
                        dataValueField: "value",
                        dataSource: [
                            { text: "Monday", value: "1" },
                            { text: "Tuesday", value: "2" },
                            { text: "Wednesday", value: "3" },
                            { text: "Thursday", value: "4" },
                          	{ text: "Friday", value: "4" },
                          	{ text: "Saturday", value: "4" },
                          	{ text: "Sunday", value: "4" }
                        ],
                        filter: "contains",
                        suggest: true,
                        index: 3
                    });
        });
    </script>
</div>



</body>
</html>
@olehvayda olehvayda added the Bug Something isn't working label Aug 11, 2022
@joneff joneff mentioned this issue Dec 16, 2022
Open
@joneff joneff added Invalid This doesn't seem right and removed Bug Something isn't working labels Jan 21, 2023
@joneff
Copy link
Member

joneff commented Jan 21, 2023

That's not an issue of the themes, but rather an option of the kendo-jquery components: by default the popup is appended inside the container of the combobox, but it can be placed elsewhere, by using options.popup.appendTo. Here is a and example: https://dojo.telerik.com/@joneff/aCInUHeT.

Since the issue has nothing to do with the themes, I am closing it.

@joneff joneff closed this as completed Jan 21, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Invalid This doesn't seem right
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@joneff @olehvayda