DevExtreme v23.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

Scrolling

This demo shows two implementations of scrolling in the Popup component.

When you click the first Show Popup button, a Popup with a native scrollbar appears. The component always displays a native scrollbar when the height of the Popup's content is greater than that of the Popup.

A click on the second Show Popup button also displays a Popup with a scrollbar, but this scrollbar belongs to the ScrollView component. This implementation is more flexible. For example, you can enable right-to-left representation or scroll the content to a specific position. For more information about the available options, refer to the ScrollView API section.

To implement the second solution, follow the steps below:

  1. Wrap the content in the ScrollView component and place it in the Popup container.

  2. Set the height and width of the ScrollView to 100% of the popup content area.

Backend API
$(() => { $('#show-popup-button').dxButton({ text: 'Show Popup', width: 300, type: 'default', onClick() { popup.show(); }, }); $('#show-popup-with-scrollview-button').dxButton({ text: 'Show Popup', width: 300, onClick() { popupWithScrollView.show(); }, }); const popup = $('#popup') .dxPopup({ width: 360, height: 320, visible: false, title: 'Downtown Inn', hideOnOutsideClick: true, showCloseButton: true, toolbarItems: [ { widget: 'dxButton', toolbar: 'bottom', location: 'center', options: { width: 300, text: 'Book', type: 'default', stylingMode: 'contained', onClick() { popup.hide(); }, }, }, ], }) .dxPopup('instance'); const popupWithScrollView = $('#popup-with-scrollview') .dxPopup({ width: 360, height: 320, visible: false, title: 'Downtown Inn', hideOnOutsideClick: true, showCloseButton: true, toolbarItems: [ { widget: 'dxButton', toolbar: 'bottom', location: 'center', options: { width: 300, text: 'Book', type: 'default', stylingMode: 'contained', onClick() { popupWithScrollView.hide(); }, }, }, ], contentTemplate() { const $scrollView = $('<div/>'); $scrollView.append($('<div/>').html(htmlContent)); $scrollView.dxScrollView({ width: '100%', height: '100%', }); return $scrollView; }, }) .dxPopup('instance'); });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.2.5/css/dx.light.css" /> <script src="js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div class="button-container"> <div id="show-popup-button"></div> <div class="label"> A native scrollable container </div> </div> <div class="button-container"> <div id="show-popup-with-scrollview-button"></div> <div class="label"> The ScrollView </div> </div> </div> <div id="popup"> <div class="popup-content"> <div class="caption">Description</div> In the heart of LA's business district, the Downtown Inn has a welcoming staff and award winning restaurants that remain open 24 hours a day. Use our conference room facilities to conduct meetings and have a drink at our beautiful rooftop bar. <br /><br /> <div class="content"> <div> <div class="caption">Features</div> <div>Concierge</div> <div>Restaurant</div> <div>Valet Parking</div> <div>Fitness Center</div> <div>Sauna</div> <div>Airport Shuttle</div> </div> <div> <div class="caption">Rooms</div> <div>Climate control</div> <div>Air conditioning</div> <div>Coffee/tea maker</div> <div>Iron/ironing</div> </div> </div> </div> </div> <div id="popup-with-scrollview"></div> </body> </html>
.label { font-size: 12px; } .demo-container { height: 450px; display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 40px; } .button-container { display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 15px; } .dx-popup-content { font-size: 12px; } .caption { padding-bottom: 8px; font-weight: 500; } .content { display: flex; justify-content: space-between; } .popup-content { height: 100%; width: 100%; }
const htmlContent = "<div class='caption'>Description</div>In the heart of LA's business district, the Downtown Inn has a welcoming staff and award winning restaurants that remain open 24 hours a day. Use our conference room facilities to conduct meetings and have a drink at our beautiful rooftop bar.<br><br><div class='content'><div><div class='caption'>Features</div><div>Concierge</div><div>Restaurant</div><div>Valet Parking</div><div>Fitness Center</div><div>Sauna</div><div>Airport Shuttle</div></div><div><div class='caption'>Rooms</div><div>Climate control</div><div>Air conditioning</div><div>Coffee/tea maker</div><div>Iron/ironing</div></div></div>";