-
Data Grids / Data Management
-
Data Grid
- Overview
-
Data Binding
-
Filtering
- Sorting
-
Editing
-
Grouping
-
Selection
- Focused Row
- Paging
-
Scrolling
-
Columns
-
Master-Detail
-
Data Summaries
-
Drag & Drop
-
Export to PDF
-
Export to Excel
- Appearance
-
Customization
- State Persistence
-
Adaptability
-
Keyboard Navigation
- Right-To-Left Support
-
Tree List
- Overview
-
Data Binding
-
Filtering
- Sorting
-
Editing
-
Selection
- Focused Row
- Paging
-
Columns
- Drag & Drop
- State Persistence
- Adaptability
-
Keyboard Navigation
-
Card View
-
Pivot Grid
- Overview
-
Data Binding
-
Field Management
-
Data Summaries
- Drill Down
- Filtering
-
Scrolling
-
Export to Excel
- Chart Integration
- Customization
- State Persistence
-
Filter Builder
-
-
Data Visualization
-
Charts
- Overview
-
Data Binding
-
Common Concepts
-
Axis
-
Aggregation
-
Tooltips
-
Selection
-
Customization
-
Zooming
-
Export
-
-
Area Charts
-
Bar Charts
- Bullet Charts
-
Doughnut Charts
-
Financial Charts
-
Funnel and Pyramid Charts
-
Line Charts
- Pareto Chart
-
Pie Charts
-
Point Charts
-
Polar and Radar Charts
-
Range Charts
- Sankey Chart
-
Sparkline Charts
-
Tree Map
-
Gauges
- Overview
-
Runtime update
-
Bar Gauge
-
Circular Gauge
-
Linear Gauge
-
Diagram
- Overview
-
Data Binding
-
Featured Shapes
-
Custom Shapes
-
Document Capabilities
-
User Interaction
- UI Customization
- Adaptability
-
-
Scheduling / Planning
-
Scheduler
- Overview
-
Data Binding
-
Views
-
Appointments
-
Timetable
- Editing
-
Grouping
- Virtual Scrolling
- Drag & Drop
-
Customization
- Adaptability
-
Gantt
- Overview
- Data Binding
-
Filtering
- Sorting
- Strip Lines
- Export to PDF
- Validation
-
Customization
-
-
Reporting
-
AI-powered Extensions
-
Interaction
-
Report Types
-
Data binding
-
Real-life Reports
-
Layout Features
-
Report Controls
-
Web-specific Features
-
-
Rich Text Editor
- Overview
- Load/Save
- Document Protection
-
Templates
- Autocorrect
-
Customization
- Simple View
-
Spreadsheet
- Overview
-
Open a Document
- Export And Printing
-
Features
-
UI Customization
-
Messaging
-
WYSIWYG Editor
-
Forms
-
Data Editors
- Overview
-
Common Concepts
-
Calendar
- Check Box
- Color Box
- Date Box
-
Date Range Box
-
Number Box
- Radio Group
-
Range Selector
- Range Slider
- Slider
- Switch
- Text Area
- Text Box
-
Drop-Downs
- Autocomplete
-
Drop Down Box
-
Select Box
-
Tag Box
-
Lookup
-
Buttons
-
File Upload / File Management
-
File Manager
- Overview
-
File System Types
-
Customization
-
File Uploader
-
-
Popup and Notifications
-
Navigation
- Overview
- Accordion
-
Context Menu
-
Menu
- Multi View
-
Drawer
-
Tab Panel
-
Tabs
-
Toolbar
-
Stepper
- Pagination
-
List
-
Tree View
- Right-to-Left Support
-
Layout
-
Tile View
- Splitter
-
Gallery
- Scroll View
-
-
Interactive Wrappers
-
Sortable
- Resizable
-
-
Progress Indicators
-
Maps
- Overview
-
Map
-
Vector Map
-
Data Binding
- Multiple Layers
-
Markers
- Legend
-
Zooming and Panning
-
Customization
-
-
Localization
Related Demos:
Your search did not match any results.
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.
Was this demo helpful?
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
<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'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'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.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();
}
}
}
.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: