chore(*): Make accordion containers scrollable.

MayaKirova · MayaKirova · commit f269cfcf2067 · 2026-01-06T11:16:59.000+02:00
diff --git a/samples/layouts/accordion/customization/App.razor b/samples/layouts/accordion/customization/App.razor
@@ -35,7 +35,7 @@
     }
 </style>
 
-<div class="container vertical">
+<div class="container vertical scrollable">
     <IgbAccordion>
         <IgbExpansionPanel>
             <h3 slot="title" id="categories">@CategoryTitle</h3>
diff --git a/samples/layouts/accordion/customization/wwwroot/index.css b/samples/layouts/accordion/customization/wwwroot/index.css
@@ -4,4 +4,8 @@ https://dl.infragistics.com/x/css//samples/
 */
 .size-small {
     --ig-size: var(--ig-size-small);
+}
+
+.scrollable {
+    overflow: auto;
 }
diff --git a/samples/layouts/accordion/customization/wwwroot/index.html b/samples/layouts/accordion/customization/wwwroot/index.html
@@ -13,6 +13,7 @@
     <link href="https://dl.infragistics.com/x/css/samples/shared.v6.css" rel="stylesheet" />
     <link href="https://dl.infragistics.com/x/css/samples/blazor.css" rel="stylesheet" />
     <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+    <link href="index.css" rel="stylesheet" />
 </head>
 
 <body>
diff --git a/samples/layouts/accordion/nested-scenario/App.razor b/samples/layouts/accordion/nested-scenario/App.razor
@@ -1,7 +1,7 @@
 ﻿@using IgniteUI.Blazor.Controls
 
 
-<div class="container vertical">
+<div class="container vertical scrollable">
     <IgbSwitch Change="OnSwitchChange">Single Expand</IgbSwitch>
     <IgbAccordion SingleExpand="@SingleExpand">
         <IgbExpansionPanel>
diff --git a/samples/layouts/accordion/nested-scenario/wwwroot/index.css b/samples/layouts/accordion/nested-scenario/wwwroot/index.css
@@ -0,0 +1,3 @@
+﻿.scrollable {
+    overflow: auto;
+}
diff --git a/samples/layouts/accordion/nested-scenario/wwwroot/index.html b/samples/layouts/accordion/nested-scenario/wwwroot/index.html
@@ -13,6 +13,7 @@
     <link href="https://dl.infragistics.com/x/css/samples/shared.v6.css" rel="stylesheet" />
     <link href="https://dl.infragistics.com/x/css/samples/blazor.css" rel="stylesheet" />
     <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+    <link href="index.css" rel="stylesheet" />
 </head>
 
 <body>
diff --git a/samples/layouts/accordion/overview/App.razor b/samples/layouts/accordion/overview/App.razor
@@ -1,7 +1,7 @@
 ﻿@using IgniteUI.Blazor.Controls
 
 
-<div class="container vertical">
+<div class="container vertical scrollable">
     <IgbSwitch Change="OnSwitchChange">Single Expand</IgbSwitch>
     <IgbAccordion SingleExpand="@SingleExpand">
         <IgbExpansionPanel>
diff --git a/samples/layouts/accordion/overview/wwwroot/index.css b/samples/layouts/accordion/overview/wwwroot/index.css
@@ -0,0 +1,3 @@
+﻿.scrollable {
+    overflow: auto;
+}
diff --git a/samples/layouts/accordion/overview/wwwroot/index.html b/samples/layouts/accordion/overview/wwwroot/index.html
@@ -13,6 +13,7 @@
     <link href="https://dl.infragistics.com/x/css/samples/shared.v6.css" rel="stylesheet" />
     <link href="https://dl.infragistics.com/x/css/samples/blazor.css" rel="stylesheet" />
     <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+    <link href="index.css" rel="stylesheet" />
 </head>
 
 <body>

Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,7 @@`
`35`	`35`	`}`
`36`	`36`	`</style>`
`37`	`37`
`38`		`-<div class="container vertical">`
	`38`	`+<div class="container vertical scrollable">`
`39`	`39`	`<IgbAccordion>`
`40`	`40`	`<IgbExpansionPanel>`
`41`	`41`	`<h3 slot="title" id="categories">@CategoryTitle</h3>`
Original file line number	Diff line number	Diff line change
`@@ -4,4 +4,8 @@ https://dl.infragistics.com/x/css//samples/`
`4`	`4`	`*/`
`5`	`5`	`.size-small {`
`6`	`6`	`--ig-size: var(--ig-size-small);`
	`7`	`+}`
	`8`	`+`
	`9`	`+.scrollable {`
	`10`	`+ overflow: auto;`
`7`	`11`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.scrollable {`
	`2`	`+ overflow: auto;`
	`3`	`+}`