responsive-designcarousel.net-6.0responsivemudblazor
How To make Responsive Carousel in MudBlazor
This is MudCarousel which has 2 MudCarouselItem and inside each MudCarouselItem it has 4 MudCards. My problem is when I view this in mobile view then MudCarouselItem's First MudCard is going visible others goes hidden unable to access or see.
<MudCarousel Class="mud-width-full" Style="height:220px;" ShowArrows="true" ShowBullets="false" EnableSwipeGesture="true" AutoCycle="false" TData="object">
<MudCarouselItem Transition="@Transition.Slide">
<div class="d-flex justify-content-center" style="height:100%;">
<div class="carousel-container">
<MudGrid>
<MudItem xs="12" sm="3" >
<MudCard Class="hover-paper paper1" Style="height: 210px;width:270px; margin-right:5px;" Elevation="4">
<MudCardHeader style="height: 75px; background-color:#FFF176; text-align:center;">
<CardHeaderContent>
<div style="display: flex; justify-content: center; align-items: center;">
<div style="flex-grow: 1;">
<MudText Typo="Typo.caption" Color="Color.Dark" style="word-wrap: break-word;">
Application Name 1
</MudText>
</div>
<MudTooltip Text="Name of IT Owners/Business" Arrow="true" Placement="Placement.Top">
<MudIconButton Icon="@Icons.Material.Filled.Help" Size="Size.Small" />
</MudTooltip>
</div>
</CardHeaderContent>
</MudCardHeader>
<MudCardContent style="margin-bottom: 0; padding-bottom: 0;word-wrap: break-word;font-size:small;" >
</MudCardContent>
<MudCardActions></MudCardActions>
</MudCard>
</MudItem>
<MudItem xs="12" sm="3">
<MudCard Class="hover-paper paper2" Style="height: 210px;width:270px;margin-right:5px;" Elevation="4">
<MudCardHeader style="height: 75px; background-color:#F8BBD0;;text-align:center;">
<CardHeaderContent>
<div style="display: flex; justify-content: center; align-items: center;">
<div style="flex-grow: 1;">
<MudText Typo="Typo.caption" Color="Color.Dark" style="word-wrap: break-word;">
Application Name 2
</MudText>
</div>
<MudTooltip Text="Name of IT Owners/Business" Arrow="true" Placement="Placement.Top">
<MudIconButton Icon="@Icons.Material.Filled.Help" Size="Size.Small" />
</MudTooltip>
</div>
</CardHeaderContent>
</MudCardHeader>
<MudCardContent style="margin-bottom: 0; padding-bottom: 0;word-wrap: break-word;font-size:small;">
</MudCardContent>
</MudCard>
</MudItem>
<MudItem xs="12" sm="3" >
<MudCard Class="hover-paper paper3" Style="height: 210px;width:270px; margin-right:5px;" Elevation="4">
<MudCardHeader style="height: 75px; background-color:#B3E5FC;text-align:center;">
<CardHeaderContent>
<div style="display: flex; justify-content: center; align-items: center;">
<div style="flex-grow: 1;">
<MudText Typo="Typo.caption" Color="Color.Dark" style="word-wrap: break-word;">
Application Name 3
</MudText>
</div>
<MudTooltip Text="Name of IT Owners/Business" Arrow="true" Placement="Placement.Top">
<MudIconButton Icon="@Icons.Material.Filled.Help" Size="Size.Small" />
</MudTooltip>
</div>
</CardHeaderContent>
</MudCardHeader>
<MudCardContent style="margin-bottom: 0; padding-bottom: 0;word-wrap: break-word;font-size:small;">
</MudCardContent>
</MudCard>
</MudItem>
<MudItem xs="12" sm="3" >
<MudCard Class="hover-paper paper4" Style="height: 210px;width:270px; margin-right:5px;" Elevation="4">
<MudCardHeader style="height: 75px; background-color:#AED581 ;text-align:center;">
<CardHeaderContent>
<div style="display: flex; justify-content: center; align-items: center;">
<div style="flex-grow: 1;">
<MudText Typo="Typo.caption" Color="Color.Dark" style="word-wrap: break-word;">
Application Name 4
</MudText>
</div>
<MudTooltip Text="Name of IT Owners/Business" Arrow="true" Placement="Placement.Top">
<MudIconButton Icon="@Icons.Material.Filled.Help" Size="Size.Small" />
</MudTooltip>
</div>
</CardHeaderContent>
</MudCardHeader>
<MudCardContent style="margin-bottom: 0; padding-bottom: 0;word-wrap: break-word;font-size:small;">
</MudCardContent>
</MudCard>
</MudItem>
</MudGrid>
</div>
</div>
</MudCarouselItem>
<MudCarouselItem Transition="@Transition.Slide">
<div class="d-flex justify-content-center" style="height:100%;">
<div class="carousel-container">
<MudGrid>
<MudItem xs="12" sm="3" >
<MudCard Class="hover-paper paper1" Style="height: 210px;width:250px; margin-right:5px;" Elevation="4">
<MudCardHeader style="height: 75px;background-color:#FFF176;;text-align:center;">
<CardHeaderContent>
<div style="display: flex; justify-content: center; align-items: center;">
<div style="flex-grow: 1;">
<MudText Typo="Typo.caption" Color="Color.Dark" style="word-wrap: break-word;">
Application Name 5
</MudText>
</div>
<MudTooltip Text="Name of IT Owners/Business" Arrow="true" Placement="Placement.Top">
<MudIconButton Icon="@Icons.Material.Filled.Help" Size="Size.Small" />
</MudTooltip>
</div>
</CardHeaderContent>
</MudCardHeader>
<MudCardContent style="margin-bottom: 0; padding-bottom: 0;word-wrap: break-word;">
</MudCardContent>
</MudCard>
</MudItem>
<MudItem xs="12" sm="3" >
<MudCard Class="hover-paper paper2" Style="height: 210px;width:250px; margin-right:5px;" Elevation="4">
<MudCardHeader style="height: 75px;background-color:#F8BBD0;text-align:center;">
<CardHeaderContent>
<div style="display: flex; justify-content: center; align-items: center;">
<div style="flex-grow: 1;">
<MudText Typo="Typo.caption" Color="Color.Dark" style="word-wrap: break-word;">
Application Name 6
</MudText>
</div>
<MudTooltip Text="Name of IT Owners/Business" Arrow="true" Placement="Placement.Top">
<MudIconButton Icon="@Icons.Material.Filled.Help" Size="Size.Small" />
</MudTooltip>
</div>
</CardHeaderContent>
</MudCardHeader>
<MudCardContent style="margin-bottom: 0; padding-bottom: 0;word-wrap: break-word;">
</MudCardContent>
</MudCard> </MudItem>
<MudItem xs="12" sm="3" >
<MudCard Class="hover-paper paper3" Style="height: 210px;width:250px; margin-right:5px;" Elevation="4">
<MudCardHeader style="height: 75px;background-color:#B3E5FC;text-align:center;">
<CardHeaderContent>
<div style="display: flex; justify-content: center; align-items: center;">
<div style="flex-grow: 1;">
<MudText Typo="Typo.caption" Color="Color.Dark" style="word-wrap: break-word;">
Application Name 7
</MudText>
</div>
<MudTooltip Text="Name of IT Owners/Business" Arrow="true" Placement="Placement.Top">
<MudIconButton Icon="@Icons.Material.Filled.Help" Size="Size.Small" />
</MudTooltip>
</div>
</CardHeaderContent>
</MudCardHeader>
<MudCardContent style="margin-bottom: 0; padding-bottom: 0;word-wrap: break-word;">
</MudCardContent>
</MudCard>
</MudItem>
<MudItem xs="12" sm="3" >
<MudCard Class="hover-paper paper4" Style="height: 210px;width:250px; margin-right:5px;" Elevation="4">
<MudCardHeader style="height: 75px;background-color:#AED581 ;text-align:center;">
<CardHeaderContent>
<div style="display: flex; justify-content: center; align-items: center;">
<div style="flex-grow: 1;">
<MudText Typo="Typo.caption" Color="Color.Dark" style="word-wrap: break-word;">
Application Name 8
</MudText>
</div>
<MudTooltip Text="Name of IT Owners/Business" Arrow="true" Placement="Placement.Top">
<MudIconButton Icon="@Icons.Material.Filled.Help" Size="Size.Small" />
</MudTooltip>
</div>
</CardHeaderContent>
</MudCardHeader>
<MudCardContent style="margin-bottom: 0; padding-bottom: 0;word-wrap: break-word;">
</MudCardContent>
</MudCard>
</MudItem></MudGrid>
</div>
</div>
</MudCarouselItem>
</MudCarousel>
In mobile view i want my Carousel to act like that it shows one mudcard and arrow click left/right it should show prevoius/Next mudcard accordingly(one Mudcard at a time). That is in Mobile View, I want to see only one Mudcard which should act like MudCarouselItem enable to access other Mudcards using Prevoius and Next arrows.
Desktop View:
Mobile View:
Solution
You can use the IBrowserViewportService to determine how your carousel items should be rendered. In this full code example I've added three different options for rendering based on screen size (you can modify as necessary for your needs). The main logic is shown below:
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await base.OnAfterRenderAsync(firstRender);
if (!firstRender) return;
_initialized = true;
var breakpoint = await BrowserViewportService.GetCurrentBreakpointAsync();
switch (breakpoint)
{
case Breakpoint.Xs:
case Breakpoint.Sm:
_itemGroups = ChunkList<TData>(Items, 1);
break;
case Breakpoint.Md:
_itemGroups = ChunkList<TData>(Items, PerRow / 2);
break;
default:
_itemGroups = ChunkList<TData>(Items, PerRow);
break;
}
StateHasChanged();
}
The PerRow parameter is used to determine how much you want to display (in your case 4).
The IBrowserViewportService checks the current screen size and the switch determines how much items should be included on each carousel view.
- sm & xs - 1 item per view (mobile)
- md - 2 items per view (this can be removed)
- default - 4 items per view (desktop)
Note: changing the screen size of the already rendered carousel will not update the number of items shown per row. The number of items is determined by the initial screen size (size of screen when page loads)
- How to set an element to show on medium screen and below in Tailwind?
- How to Make Background Image Responsive with CSS?
- How can I reduce font size based on length?
- Font scaling based on size of container
- Responsive Separator for Horizontal List
- CSS Non-standard responsive image frame
- trying to have a responsive design for the items using media query and flexbox , but it is not working
- responsive height,full height background
- Arrange row column parallel using CSS flex
- how to hide div in mobile devices using boostrap?
- Position a responsive circle in the top-right corner of the screen
- Responsive Typography in Material UI?
- Responsive Image cropping
- Spring boot better design responsibility
- How to Make an Absolutely Positioned Div Responsive Across Different Screen Sizes?
- Break a table row into multiple line (responsive layout)
- What are the rules for CSS media query overlap?
- CSS - apply mobile pattern also on desktop when parent container is small
- Make full screen pop up responsive
- How To make Responsive Carousel in MudBlazor
- how to snap video div to 100% width on mobile
- How to get specifically positioned divs to correctly resize based on browser width
- How to create a responsive master detail app using React Router?
- Responsive css grid with fixed rows and maximum columns but can show more items
- How To Add Dynamic Font Size about Multi Device in Xcode Storyboard
- How do I create a page that is responsive based on height not width?
- video embed not scaling responsively in bootstrap 5 carousel
- Position containers "horizontally off-center" on desktop; smoothly scale down "centrally" for mobile
- Responsive web design is working on desktop but not on the mobile device
- Is there a way to have an image show its right side when resized and cropped for mobile?