Popup - 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.

Backend API

​x
 
<div class='button-container'>    @(Html.DevExtreme().Button()        .Text("Show Popup")        .Type(ButtonType.Default)        .Width(300)        .OnClick("showPopup")    )    <div class="label"> A native scrollable container </div></div>​<div class='button-container'>        @(Html.DevExtreme().Button()        .Text("Show Popup")        .Width(300)        .OnClick("showPopupWithScrollView")    )    <div class="label"> The ScrollView </div></div>​@(Html.DevExtreme().Popup()    .ID("popup")    .Width(360)    .Height(320)    .Visible(false)    .Title("Downtown Inn")    .HideOnOutsideClick(true)    .ShowCloseButton(true)    .ContentTemplate(new TemplateName("popup-template"))    .ToolbarItems(barItems => {        barItems.Add()            .Toolbar(Toolbar.Bottom)            .Location(ToolbarItemLocation.Center)            .Widget(widget => widget.Button()                .Text("Print")                .Type(ButtonType.Default)                .StylingMode(ButtonStylingMode.Contained)                .Width(300)                .OnClick("hidePopup")            );    }))​@using (Html.DevExtreme().NamedTemplate("popup-template")) {    <div>        <div class="caption">Description</div>        In the heart of LA&apos;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>}​@(Html.DevExtreme().Popup()    .ID("popup-with-scrollview")    .Width(360)    .Height(320)    .Visible(false)    .Title("Downtown Inn")    .HideOnOutsideClick(true)    .ShowCloseButton(true)    .ContentTemplate(new TemplateName("popup-with-scrollview-template"))    .ToolbarItems(barItems => {        barItems.Add()            .Toolbar(Toolbar.Bottom)            .Location(ToolbarItemLocation.Center)            .Widget(widget => widget.Button()                .Text("Print")                .Type(ButtonType.Default)                .StylingMode(ButtonStylingMode.Contained)                .Width(300)                .OnClick("hidePopupWithScrollView")            );    }))​@using (Html.DevExtreme().NamedTemplate("popup-with-scrollview-template")) {    @(Html.DevExtreme().ScrollView()        .Width("100%")        .Height("100%")        .Content(@<text>            <div class="caption">Description</div>            In the heart of LA&apos;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>        </text>)    )}​<script>    function showPopup() {        $("#popup").dxPopup("show");    }​    function showPopupWithScrollView() {        $("#popup-with-scrollview").dxPopup("show");    }​    function hidePopup() {        $("#popup").dxPopup("hide");    }​    function hidePopupWithScrollView() {        $("#popup-with-scrollview").dxPopup("hide");    }</script>​

xxxxxxxxxx
 
using DevExtreme.NETCore.Demos.Models.SampleData;using Microsoft.AspNetCore.Mvc;using System;using System.Collections.Generic;using System.Linq;​namespace DevExtreme.NETCore.Demos.Controllers {    public class PopupController : Controller {        public ActionResult Scrolling() {            return View();        }    }}

xxxxxxxxxx
 
.label {    font-size: 12px;}​.demo-container {    height: 450px;    display: flex;    align-items: center;    flex-direction: column;    justify-content: center;}​.button-container {    display: flex;    align-items: center;    flex-direction: column;    justify-content: center;    padding: 20px 0px;    gap: 15px;}​.dx-popup-content {    font-size: 12px;}​.caption {    padding-bottom: 8px;    font-weight: 500;}​.content {    display: flex;    justify-content: space-between;}

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:

Wrap the content in the ScrollView component and place it in the Popup container.
Set the height and width of the ScrollView to 100% of the popup content area.