Your search did not match any results.

Scrolling

Documentation

To implement scrolling in the Popup component, do the following:

  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
@(Html.DevExtreme().Popup() .ID("popup") .Width(550) .Height(350) .Visible(true) .ShowTitle(false) .HideOnOutsideClick(false) .ContentTemplate(new TemplateName("popup-template")) ) @using (Html.DevExtreme().NamedTemplate("popup-template")) { @(Html.DevExtreme().ScrollView() .Width("100%") .Height("100%") .Content(@<text> <img src="../../images/Popup-Scrolling-Image.jpg" class="center" /> <div id="textBlock"> The <b>ScrollView</b> allows users to scroll its content vertically. To enable horizontal and vertical scrolling, set the <b>direction</b> option to <i>&quot;both&quot;</i>. Horizontal scrolling is available only if the content is wider than the <b>ScrollView</b>. Otherwise, the content adapts to the widget&apos;s width.<br /><br />The <b>ScrollView</b> uses native scrolling on most platforms, except desktops. To use it on all platforms, assign <b>true</b> to the <b>useNative</b> option. If you assign <b>false</b>, scrolling is simulated on all platforms. </div> </text>) ) }
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(); } } }
#textBlock { padding-left: 20px; padding-right: 20px; line-height: 1.6em; } .center { display: block; margin-left: auto; margin-right: auto; padding-top: 20px; width: 300px; }