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.

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.

A native scrollable container

The ScrollView

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

using DevExtreme.MVC.Demos.Models;
using DevExtreme.MVC.Demos.Models.SampleData;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace DevExtreme.MVC.Demos.Controllers {
    public class PopupController : Controller {

        public ActionResult Scrolling() {
            return View();
        }

    }
}

.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;
}