diff --git a/Demos/Blazorise.Demo/Layouts/MainLayout.razor b/Demos/Blazorise.Demo/Layouts/MainLayout.razor index 5ef2ee97c8..b6e3d9d355 100644 --- a/Demos/Blazorise.Demo/Layouts/MainLayout.razor +++ b/Demos/Blazorise.Demo/Layouts/MainLayout.razor @@ -170,7 +170,7 @@ - + @Body diff --git a/Demos/Blazorise.Demo/Pages/Tests/DataGridPage.razor b/Demos/Blazorise.Demo/Pages/Tests/DataGridPage.razor index 4e639dae43..f8f62dcba8 100644 --- a/Demos/Blazorise.Demo/Pages/Tests/DataGridPage.razor +++ b/Demos/Blazorise.Demo/Pages/Tests/DataGridPage.razor @@ -77,6 +77,7 @@ Striped="true" Bordered="true" Hoverable="true" + Responsive="true" CustomFilter="@OnCustomFilter"> diff --git a/Demos/Blazorise.Demo/Pages/Tests/TablesPage.razor b/Demos/Blazorise.Demo/Pages/Tests/TablesPage.razor index b5c181b567..8fc6c47a65 100644 --- a/Demos/Blazorise.Demo/Pages/Tests/TablesPage.razor +++ b/Demos/Blazorise.Demo/Pages/Tests/TablesPage.razor @@ -500,4 +500,96 @@ + + + + + + Responsive + + + Use Responsive for horizontally scrolling tables. + + + + + + # + Column heading + Column heading + Column heading + Column heading + Column heading + Column heading + Column heading + Column heading + Column heading + Column heading + Column heading + Column heading + Column heading + Column heading + Column heading + + + + + 1 + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + + + 2 + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + + + 3 + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + Column content + + +
+ + + \ No newline at end of file diff --git a/Source/Blazorise.AntDesign/AntDesignClassProvider.cs b/Source/Blazorise.AntDesign/AntDesignClassProvider.cs index 67a757ea92..04cf540587 100644 --- a/Source/Blazorise.AntDesign/AntDesignClassProvider.cs +++ b/Source/Blazorise.AntDesign/AntDesignClassProvider.cs @@ -754,6 +754,8 @@ public override string Display( DisplayType displayType, Breakpoint breakpoint, public override string TableRowCellTextAlignment( TextAlignment textAlignment ) => $"ant-text-{ToTextAlignment( textAlignment )}"; + public override string TableResponsive() => "ant-table-responsive"; + #endregion #region Badge diff --git a/Source/Blazorise.AntDesign/Styles/_layout.scss b/Source/Blazorise.AntDesign/Styles/_layout.scss index 5474f04bb1..1ca66d2631 100644 --- a/Source/Blazorise.AntDesign/Styles/_layout.scss +++ b/Source/Blazorise.AntDesign/Styles/_layout.scss @@ -1,7 +1,3 @@ .b-layout-header { line-height: 64px; } - -.b-body-layout { - overflow-x: hidden; -} diff --git a/Source/Blazorise.AntDesign/Styles/_table.scss b/Source/Blazorise.AntDesign/Styles/_table.scss index fa5093b6cf..35c741bad9 100644 --- a/Source/Blazorise.AntDesign/Styles/_table.scss +++ b/Source/Blazorise.AntDesign/Styles/_table.scss @@ -51,3 +51,14 @@ .ant-table-row-header { font-weight: bold; } + +.ant-table-responsive { + display: block; + width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; +} + +.ant-table-responsive > .ant-table-bordered { + border: 0; +} diff --git a/Source/Blazorise.AntDesign/wwwroot/blazorise.antdesign.css b/Source/Blazorise.AntDesign/wwwroot/blazorise.antdesign.css index 2104986a38..72a5a356ee 100644 --- a/Source/Blazorise.AntDesign/wwwroot/blazorise.antdesign.css +++ b/Source/Blazorise.AntDesign/wwwroot/blazorise.antdesign.css @@ -168,6 +168,15 @@ .ant-table-row-header { font-weight: bold; } +.ant-table-responsive { + display: block; + width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; } + +.ant-table-responsive > .ant-table-bordered { + border: 0; } + .ant-menu-submenu-horizontal > .ant-menu-submenu-title .ant-menu-submenu-arrow { position: absolute; top: 50%; diff --git a/Source/Blazorise.Bootstrap/BootstrapClassProvider.cs b/Source/Blazorise.Bootstrap/BootstrapClassProvider.cs index cc0142dfd0..15303291b3 100644 --- a/Source/Blazorise.Bootstrap/BootstrapClassProvider.cs +++ b/Source/Blazorise.Bootstrap/BootstrapClassProvider.cs @@ -574,7 +574,7 @@ public override string Column( ColumnWidth columnWidth, Breakpoint breakpoint, b return $"{baseClass}-{ToBreakpoint( breakpoint )}-{ToColumnWidth( columnWidth )}"; } - + return $"{baseClass}-{ToColumnWidth( columnWidth )}"; } @@ -759,6 +759,8 @@ public override string Display( DisplayType displayType, Breakpoint breakpoint, public override string TableRowCellTextAlignment( TextAlignment textAlignment ) => $"text-{ToTextAlignment( textAlignment )}"; + public override string TableResponsive() => "table-responsive"; + #endregion #region Badge diff --git a/Source/Blazorise.Bootstrap/Styles/_layout.scss b/Source/Blazorise.Bootstrap/Styles/_layout.scss index 76c106e400..5f282702bb 100644 --- a/Source/Blazorise.Bootstrap/Styles/_layout.scss +++ b/Source/Blazorise.Bootstrap/Styles/_layout.scss @@ -1,3 +1 @@ -.b-body-layout { - overflow-x: hidden; -} + \ No newline at end of file diff --git a/Source/Blazorise.Bulma/BulmaClassProvider.cs b/Source/Blazorise.Bulma/BulmaClassProvider.cs index ff393cb216..faf03c8cbd 100644 --- a/Source/Blazorise.Bulma/BulmaClassProvider.cs +++ b/Source/Blazorise.Bulma/BulmaClassProvider.cs @@ -762,6 +762,8 @@ public override string Display( DisplayType displayType, Breakpoint breakpoint, public override string TableRowCellTextAlignment( TextAlignment textAlignment ) => $"has-text-{ToTextAlignment( textAlignment )}"; + public override string TableResponsive() => "table-container"; + #endregion #region Badge diff --git a/Source/Blazorise.Bulma/Config.cs b/Source/Blazorise.Bulma/Config.cs index 09a5efc9a3..c728765e85 100644 --- a/Source/Blazorise.Bulma/Config.cs +++ b/Source/Blazorise.Bulma/Config.cs @@ -50,6 +50,7 @@ private static void RegisterComponents( IComponentMapper componentMapper ) componentMapper.Register( typeof( Blazorise.Select<> ), typeof( Bulma.Select<> ) ); componentMapper.Register( typeof( Blazorise.Switch<> ), typeof( Bulma.Switch<> ) ); componentMapper.Register(); + componentMapper.Register(); componentMapper.Register(); componentMapper.Register(); componentMapper.Register( typeof( Blazorise.TimeEdit<> ), typeof( Bulma.TimeEdit<> ) ); diff --git a/Source/Blazorise.Bulma/Table.razor b/Source/Blazorise.Bulma/Table.razor new file mode 100644 index 0000000000..0d8705a1d8 --- /dev/null +++ b/Source/Blazorise.Bulma/Table.razor @@ -0,0 +1,17 @@ +@inherits Blazorise.Table +@if ( Responsive ) +{ +
+
+ + @ChildContent +
+
+
+} +else +{ + + @ChildContent +
+} \ No newline at end of file diff --git a/Source/Blazorise.Frolic/FrolicClassProvider.cs b/Source/Blazorise.Frolic/FrolicClassProvider.cs index 2e97a3d0d2..51d5f7d25c 100644 --- a/Source/Blazorise.Frolic/FrolicClassProvider.cs +++ b/Source/Blazorise.Frolic/FrolicClassProvider.cs @@ -747,6 +747,8 @@ public override string Display( DisplayType displayType, Breakpoint breakpoint, public override string TableRowCellTextAlignment( TextAlignment textAlignment ) => $"text-{ToTextAlignment( textAlignment )}"; + public override string TableResponsive() => "e-table-responsive"; + #endregion #region Badge diff --git a/Source/Blazorise.Frolic/Styles/_layout.scss b/Source/Blazorise.Frolic/Styles/_layout.scss index 76c106e400..5f282702bb 100644 --- a/Source/Blazorise.Frolic/Styles/_layout.scss +++ b/Source/Blazorise.Frolic/Styles/_layout.scss @@ -1,3 +1 @@ -.b-body-layout { - overflow-x: hidden; -} + \ No newline at end of file diff --git a/Source/Blazorise.Frolic/Styles/_table.scss b/Source/Blazorise.Frolic/Styles/_table.scss index 5028637351..c812a79899 100644 --- a/Source/Blazorise.Frolic/Styles/_table.scss +++ b/Source/Blazorise.Frolic/Styles/_table.scss @@ -21,4 +21,15 @@ table.e-table tbody tr.selected { tr.table-row-selectable:hover { cursor: pointer; -} \ No newline at end of file +} + +.e-table-responsive { + display: block; + width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; +} + +.e-table-responsive > .bordered { + border: 0; +} diff --git a/Source/Blazorise.Frolic/wwwroot/blazorise.frolic.css b/Source/Blazorise.Frolic/wwwroot/blazorise.frolic.css index a76bea4d78..b3fc7d602a 100644 --- a/Source/Blazorise.Frolic/wwwroot/blazorise.frolic.css +++ b/Source/Blazorise.Frolic/wwwroot/blazorise.frolic.css @@ -219,6 +219,15 @@ table.e-table tbody tr.selected { tr.table-row-selectable:hover { cursor: pointer; } +.e-table-responsive { + display: block; + width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; } + +.e-table-responsive > .bordered { + border: 0; } + .e-tabs.vertical ul { -webkit-flex-direction: column; flex-direction: column; } diff --git a/Source/Blazorise.Material/Styles/_layout.scss b/Source/Blazorise.Material/Styles/_layout.scss index 76c106e400..5f282702bb 100644 --- a/Source/Blazorise.Material/Styles/_layout.scss +++ b/Source/Blazorise.Material/Styles/_layout.scss @@ -1,3 +1 @@ -.b-body-layout { - overflow-x: hidden; -} + \ No newline at end of file diff --git a/Source/Blazorise/ClassProvider.cs b/Source/Blazorise/ClassProvider.cs index 71b0abbd2d..78f12a5f31 100644 --- a/Source/Blazorise/ClassProvider.cs +++ b/Source/Blazorise/ClassProvider.cs @@ -2,6 +2,7 @@ using System; using System.Collections.Generic; using System.Linq; +using System.Threading; using System.Threading.Tasks; #endregion @@ -393,8 +394,6 @@ public abstract class ClassProvider : IClassProvider public virtual string LayoutHasSider() => "b-layout-has-sider"; - public virtual string LayoutBody() => "b-body-layout"; - public virtual string LayoutContent() => "b-layout-content"; public virtual string LayoutHeader() => "b-layout-header"; @@ -687,6 +686,8 @@ public virtual string Display( DisplayType displayType, IEnumerable<(Breakpoint public abstract string TableRowCellTextAlignment( TextAlignment textAlignment ); + public abstract string TableResponsive(); + #endregion #region Badge diff --git a/Source/Blazorise/IClassProvider.cs b/Source/Blazorise/IClassProvider.cs index ed49686d93..a9f12d5d54 100644 --- a/Source/Blazorise/IClassProvider.cs +++ b/Source/Blazorise/IClassProvider.cs @@ -393,8 +393,6 @@ public interface IClassProvider string LayoutHasSider(); - string LayoutBody(); - string LayoutContent(); string LayoutHeader(); @@ -681,6 +679,8 @@ public interface IClassProvider string TableRowCellTextAlignment( TextAlignment textAlignment ); + string TableResponsive(); + #endregion #region Badge diff --git a/Source/Blazorise/Layout.razor.cs b/Source/Blazorise/Layout.razor.cs index 785e3e4958..321bde0388 100644 --- a/Source/Blazorise/Layout.razor.cs +++ b/Source/Blazorise/Layout.razor.cs @@ -28,36 +28,6 @@ protected override void BuildClasses( ClassBuilder builder ) base.BuildClasses( builder ); } - protected override async Task OnAfterRenderAsync( bool firstRender ) - { - if ( firstRender ) - { - if ( ParentLayout == null ) - { - await JSRunner.AddClassToBody( ClassProvider.LayoutBody() ); - - bodyClassApplied = true; - } - } - - await base.OnAfterRenderAsync( firstRender ); - } - - protected override void Dispose( bool disposing ) - { - if ( disposing ) - { - if ( bodyClassApplied ) - { - _ = JSRunner.RemoveClassFromBody( ClassProvider.LayoutBody() ); - - bodyClassApplied = false; - } - } - - base.Dispose( disposing ); - } - #endregion #region Properties diff --git a/Source/Blazorise/Providers/EmptyClassProvider.cs b/Source/Blazorise/Providers/EmptyClassProvider.cs index 02ba606145..d6afe6871e 100644 --- a/Source/Blazorise/Providers/EmptyClassProvider.cs +++ b/Source/Blazorise/Providers/EmptyClassProvider.cs @@ -689,6 +689,8 @@ class EmptyClassProvider : IClassProvider public string TableRowCellTextAlignment( TextAlignment textAlignment ) => null; + public string TableResponsive() => null; + #endregion #region Badge diff --git a/Source/Blazorise/Styles/_layout.scss b/Source/Blazorise/Styles/_layout.scss index 4c77226223..aee1b543d4 100644 --- a/Source/Blazorise/Styles/_layout.scss +++ b/Source/Blazorise/Styles/_layout.scss @@ -13,6 +13,10 @@ .b-layout { &.b-layout-has-sider { flex-direction: row; + + .b-layout { + overflow-x: hidden; + } } } @@ -28,9 +32,14 @@ /*background: #001529;*/ /*line-height: 64px;*/ &-fixed { - position: sticky; + position: fixed; z-index: 1; top: 0; + width: calc(100% - var(--b-sidebar-width, 0px)); + + @media (min-width:1px) and (max-width:767.98px) { + width: 100%; + } } } diff --git a/Source/Blazorise/Table.razor b/Source/Blazorise/Table.razor index e254c75537..2d6ed67e79 100644 --- a/Source/Blazorise/Table.razor +++ b/Source/Blazorise/Table.razor @@ -1,9 +1,20 @@ @inherits BaseComponent @if ( !HasCustomRegistration ) { - - @ChildContent -
+ @if ( Responsive ) + { +
+ + @ChildContent +
+
+ } + else + { + + @ChildContent +
+ } } else { diff --git a/Source/Blazorise/Table.razor.cs b/Source/Blazorise/Table.razor.cs index e5b832aa3f..c58dbde771 100644 --- a/Source/Blazorise/Table.razor.cs +++ b/Source/Blazorise/Table.razor.cs @@ -24,6 +24,17 @@ public partial class Table : BaseComponent private bool borderless; + private bool responsive; + + #endregion + + #region Constructors + + public Table() + { + ResponsiveClassBuilder = new ClassBuilder( BuildResponsiveClasses ); + } + #endregion #region Methods @@ -41,10 +52,19 @@ protected override void BuildClasses( ClassBuilder builder ) base.BuildClasses( builder ); } + private void BuildResponsiveClasses( ClassBuilder builder ) + { + builder.Append( ClassProvider.TableResponsive() ); + } + #endregion #region Properties + protected ClassBuilder ResponsiveClassBuilder { get; private set; } + + protected string ResponsiveClassNames => ResponsiveClassBuilder.Class; + /// /// Makes the table to fill entire horizontal space. /// @@ -135,6 +155,21 @@ public bool Borderless } } + /// + /// Makes table responsive by adding the horizontal scroll bar. + /// + [Parameter] + public bool Responsive + { + get => responsive; + set + { + responsive = value; + + DirtyClasses(); + } + } + [Parameter] public RenderFragment ChildContent { get; set; } #endregion diff --git a/Source/Blazorise/Theme.cs b/Source/Blazorise/Theme.cs index 22239a44f7..9ba199c3f7 100644 --- a/Source/Blazorise/Theme.cs +++ b/Source/Blazorise/Theme.cs @@ -507,9 +507,11 @@ IEnumerator IEnumerable.GetEnumerator() public class ThemeSidebarOptions { - public string BackgroundColor { get; set; } + public string Width { get; set; } = "220px"; - public string Color { get; set; } + public string BackgroundColor { get; set; } = "#343a40"; + + public string Color { get; set; } = "#ced4da"; } public class ThemeSnackbarOptions @@ -591,6 +593,7 @@ public static class ThemeVariables public static string OutlineButtonYiqColor( string variant ) => $"--b-outline-button-{variant}-yiq-shadow"; public static string OutlineButtonBoxShadowColor( string variant ) => $"--b-outline-button-{variant}-box-shadow"; + public const string SidebarWidth = "--b-sidebar-width"; public const string SidebarBackground = "--b-sidebar-background"; public const string SidebarColor = "--b-sidebar-color"; diff --git a/Source/Blazorise/ThemeGenerator.cs b/Source/Blazorise/ThemeGenerator.cs index f0a60b6053..749df09899 100644 --- a/Source/Blazorise/ThemeGenerator.cs +++ b/Source/Blazorise/ThemeGenerator.cs @@ -195,6 +195,9 @@ protected virtual void GenerateTextColorVariables( Theme theme, string variant, protected virtual void GenerateSidebarVariables( ThemeSidebarOptions sidebarOptions ) { + if ( sidebarOptions.Width != null ) + variables[ThemeVariables.SidebarWidth] = sidebarOptions.Width; + if ( sidebarOptions.BackgroundColor != null ) variables[ThemeVariables.SidebarBackground] = ToHex( ParseColor( sidebarOptions.BackgroundColor ) ); diff --git a/Source/Blazorise/wwwroot/blazorise.css b/Source/Blazorise/wwwroot/blazorise.css index 129e94ce27..a06159a696 100644 --- a/Source/Blazorise/wwwroot/blazorise.css +++ b/Source/Blazorise/wwwroot/blazorise.css @@ -152,6 +152,8 @@ .b-layout.b-layout-has-sider { flex-direction: row; } + .b-layout.b-layout-has-sider .b-layout { + overflow-x: hidden; } .b-layout-header, .b-layout-footer { @@ -164,9 +166,13 @@ /*background: #001529;*/ /*line-height: 64px;*/ } .b-layout-header-fixed { - position: sticky; + position: fixed; z-index: 1; - top: 0; } + top: 0; + width: calc(100% - var(--b-sidebar-width, 0px)); } + @media (min-width: 1px) and (max-width: 767.98px) { + .b-layout-header-fixed { + width: 100%; } } .b-layout-footer { /*padding: 24px 50px;*/ diff --git a/Source/Extensions/Blazorise.DataGrid/DataGrid.razor b/Source/Extensions/Blazorise.DataGrid/DataGrid.razor index 77576f4df7..d01bed4f51 100644 --- a/Source/Extensions/Blazorise.DataGrid/DataGrid.razor +++ b/Source/Extensions/Blazorise.DataGrid/DataGrid.razor @@ -3,7 +3,7 @@ @* there are two CascadingValue because one is used only to define columns, and the other is to build rows based on those columns *@ @* This one is to build rows *@ - +
@if ( ShowCaptions ) { diff --git a/Source/Extensions/Blazorise.DataGrid/DataGrid.razor.cs b/Source/Extensions/Blazorise.DataGrid/DataGrid.razor.cs index a81d0612dc..1839464821 100644 --- a/Source/Extensions/Blazorise.DataGrid/DataGrid.razor.cs +++ b/Source/Extensions/Blazorise.DataGrid/DataGrid.razor.cs @@ -850,6 +850,11 @@ protected int LastVisiblePage /// [Parameter] public bool Narrow { get; set; } + /// + /// Makes table responsive by adding the horizontal scroll bar. + /// + [Parameter] public bool Responsive { get; set; } + /// /// Custom css classname. /// diff --git a/Source/Extensions/Blazorise.Sidebar/wwwroot/blazorise.sidebar.css b/Source/Extensions/Blazorise.Sidebar/wwwroot/blazorise.sidebar.css index 35b3180ceb..f48e0aba6f 100644 --- a/Source/Extensions/Blazorise.Sidebar/wwwroot/blazorise.sidebar.css +++ b/Source/Extensions/Blazorise.Sidebar/wwwroot/blazorise.sidebar.css @@ -1,9 +1,13 @@ -.sidebar { +:root { + --b-sidebar-width: 220px; +} + +.sidebar { --bsb-dark: var(--b-sidebar-background, #343a40); --bsb-dark-dark: var(--b-sidebar-background, #343a40); --bsb-dark-light: var(--b-sidebar-color, #ced4da); - min-width: 220px; - max-width: 220px; + min-width: var(--b-sidebar-width, 220px); + max-width: var(--b-sidebar-width, 220px); min-height: 100vh; transition: margin .4s ease-in-out; z-index: 2; @@ -30,7 +34,7 @@ position: fixed; top: 0; z-index: 2; - width: 220px; + width: var(--b-sidebar-width, 220px); } .sidebar-nav { @@ -141,11 +145,11 @@ } .sidebar:not(.sidebar-collapsed).show { - margin-left: -220px; + margin-left: -var(--b-sidebar-width, 220px); } .sidebar-collapsed.show { - margin-left: -220px; + margin-left: -var(--b-sidebar-width, 220px); } html[data-useragent*="MSIE 10.0"] .show.sidebar-collapsed { @@ -166,8 +170,8 @@ html[data-useragent*="MSIE 10.0"] .show.sidebar-collapsed { bottom: 0; position: fixed; background: var(--bsb-dark-dark); - min-width: 220px; - max-width: 220px; + min-width: var(--b-sidebar-width, 220px); + max-width: var(--b-sidebar-width, 220px); color: #e9ecef; z-index: 3; } @@ -188,7 +192,7 @@ html[data-useragent*="MSIE 10.0"] .show.sidebar-collapsed { @media (min-width:1px) and (max-width:767.98px) { .sidebar:not(.sidebar-collapsed) { - margin-left: -220px; + margin-left: -var(--b-sidebar-width, 220px); } .sidebar:not(.sidebar-collapsed).show {