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

Slider ticks overflow the wrapper element #4698

Open
dimodi opened this issue Sep 15, 2023 · 0 comments
Open

Slider ticks overflow the wrapper element #4698

dimodi opened this issue Sep 15, 2023 · 0 comments
Labels
Bug Something isn't working C:Slider SEV:Normal

Comments

@dimodi
Copy link
Contributor

dimodi commented Sep 15, 2023

Describe the bug

The Slider ticks overflow the wrapper element due to absolute positioning. This creates overlapping problems with adjacent content and forces developers to add margins or paddings.

To reproduce

https://dojo.telerik.com/eseQaqEp

<!DOCTYPE html>
<html>
  <head>
    <title>Slider Ticks bug</title>
    <link href="https://kendo.cdn.telerik.com/themes/6.7.0/default/default-main.css" rel="stylesheet" />
    <script src="https://kendo.cdn.telerik.com/2023.2.829/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2023.2.829/js/kendo.all.min.js"></script>
  </head>
  <body>
    <div id="example">
      <input id="slider" value="0" />
      <br />
      some text here
    </div>

    <script>
      $(document).ready(function() {
        var slider = $("#slider").kendoSlider({
          increaseButtonTitle: "Right",
          decreaseButtonTitle: "Left",
          min: -10,
          max: 10,
          smallStep: 1,
          largeStep: 5
        }).data("kendoSlider");

      });
    </script>

  </body>
</html>

Expected behavior

All Slider elements should be within its boundaries.

Affected package (please remove the unneeded items)

  • theme-default
  • theme-bootstrap
  • theme-material

Affected suites (please remove the unneeded items)

  • Kendo UI for jQuery
  • Kendo UI for Angular
  • Kendo UI for React
  • Kendo UI for Vue
  • Telerik UI for Blazor

Affected browsers (please remove the unneeded items)

  • All

Build system information (please remove the unneeded items)

  • Not Applicable
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Bug Something isn't working C:Slider SEV:Normal
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@dimodi