What is the best way to display fewer pages in Pagination on a mobile view?

Issue

We need to display fewer pages in the mobile view so that it can align with the heading (My Orders) on the same line.

https://i.sstatic.net/JROvk.png

Resource

material-ui/pagination

Current Progress

I have successfully removed the Next and Previous buttons in the mobile view, but I am struggling to find a pre-built property or CSS solution to reduce the number of pages displayed in the mobile view

Desktop View

https://i.sstatic.net/qtouh.png

Mobile View

https://i.sstatic.net/eA5r2.png

Code Example

CSS Styling

@media (min-width: 501px) {
.MuiPagination-root {
.MuiPagination-ul {
    flex-wrap: nowrap;
    li {
        &:first-child {
            flex-basis: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            > button::before {
                margin-right: 10px;
                content: "Previous  ";
            }
        }
        &:last-child {
            flex-basis: 100%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            > button::after {
                margin-left: 10px;
                margin-right: 20px;
                content: "  Next";
            }
        }
    }
}
}

Custom Component Implementation

    import React, { useState } from "react";
    import PropTypes from "prop-types";
    import Pagination from '@material-ui/lab/Pagination';

    export const CustomPagination = ({ onChange, totalRecords, currentPage, className, shape }) => {
        return (
            <Pagination
                count={totalRecords}
                shape={shape}
                className={className}
                onChange={onChange}
                page={currentPage}
            />
        )
    };

    CustomPagination.propTypes = {
        paginationLength: PropTypes.number,
        selectPage: PropTypes.func,
        activePage: PropTypes.number,
    };

Answer №1

One approach I devised involves enclosing the pagination component within a Box element and adjusting its dimensions based on the viewport:

export function Test() {
  return;
  <>
    <Box sx={{ display: { xs: "none", md: "block" } }}>
      <Pagination
      />
    </Box>
    <Box sx={{ display: { xs: "block", md: "none" } }}>
      <Pagination
        size="small"
      />
    </Box>
  </>;
}
        </Box>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using React with Typescript: What is the best way to implement useMemo for managing a checkbox value?

I am currently developing a to-do list project using React and Typescript. At the moment, I have successfully implemented the functionality to add new to-do items via a form and delete them individually. Each item includes a checkbox with a boolean value. ...

Is the table not displaying properly in the print preview with a messy

I have a large table with multiple rows. Due to its length, I have provided a link to the jsfiddle where you can view it: jsfiddle. The table is structured in HTML and contains many rows with various attributes. <table> <thead>text here!</t ...

Utilizing the getCenter() function and other methods in react-google-maps for call operations

After attempting the following code: <GoogleMap defaultZoom={14} center={{lat: props.mapCenter.lat, lng: props.mapCenter.lng}} onCenterChanged={getCenter()} /> Update: I have implemented a Stateless Functional Component: const MarkerClustere ...

Tips for swapping out a div tag with another div tag in the same spot without needing to redirect to a different page by utilizing bootstrap

Currently, I am developing a JSP project that utilizes Bootstrap for the frontend. I have come across a question regarding HTML design. Is there a way to replace one div tag with another div on the same page without navigating to a new URL using Bootstrap ...

Message for validating the value of the Material UI color picker in React

I recently discovered the Material UI color picker component and it has been a great tool for my projects. You can check it out here: https://www.npmjs.com/package/material-ui-color-picker <ColorPicker name='color' defaultValue='#0 ...

How can Semantic UI React be used to create a tag input feature inspired by Stack Overflow?

I am exploring the possibility of creating a Tag input functionality similar to Stack Overflow, with key features such as: An input field with autocomplete capability, fetching server results and displaying them for user selection. The ability for the in ...

jquery-ui allowing to resize child divisions as well

Currently, I am in the process of developing a website that includes resizable divs with jQuery. However, I have encountered an issue where only the width of the child divs is being resized when I adjust them. For reference, you can view the site and its c ...

User-data Ajax Pagination

Is there a way to properly set a pagination link in my AJAX script for searching users based on user meta-data? The pagination functionality is fine, but the issue lies with the pagination link not functioning correctly. I'm seeking assistance from an ...

Incomplete width allocation for the floating div positioned to the left

I've encountered an issue with the placement of the side-text div in relation to the image. Currently, without specifying the width of the side-text div, it automatically moves to the bottom. To address this problem, I attempted using display:inline- ...

Is it possible to detect whether a website is being accessed through a mobile app or a browser when using ReactJS?

My intention is to present a download link for an app to the user only if they have not already downloaded the app or accessed the site through their browser. If the user accessed the website from the app, I would like to hide that button. While I was ab ...

Generating a fresh instance from a pre-existing object using JavaScript

Currently, I am facing a challenge from devchallenges.io known as the Shoppingify challenge. After carefully reviewing the prompt, I started working on creating a model that should have a specific format when a request is submitted. { "user": 1 ...

Guide to implementing endless ajax scroll pagination using Codeiginiter

I am attempting to implement infinite ajax scroll pagination on my blog, but unfortunately I am encountering an issue. The error message "server not responding..." keeps appearing despite troubleshooting efforts. Below is the code snippet being utilized: ...

Center the popover over the element

I am in the process of creating a resource map using SVGs. My goal is to display a popover in the center of the element when a user clicks on it. However, due to CSS rotation of the map, the traditional techniques such as the one mentioned here have not be ...

Explicitly employ undefined constants deliberately

So I am working on a project called WingStyle: https://github.com/IngwiePhoenix/WingStyle. It is still in the development phase, and I'm looking for ways to improve its functionality. One thing I want to address is the use of quotes. For example, whe ...

Tips for placing a button on top of a Div element with overflow set to hidden?

My goal is to have a button placed over a box, but I am facing difficulty achieving this. I have experimented with z-index, grid-content, and other methods, but the button refuses to show over the box as desired. The placement of the button inside the box ...

Can we modify the cell width in knitr and pandoc?

When generating an HTML file using knitr/pandoc to display multiple tables in a loop, how can you ensure that each table has the same total width despite having varying numbers of cells? --- output: html_document: theme: cosmo --- {r results ="asis", e ...

Is it feasible to utilize variables in React to direct to an outside website?

In an attempt to make every element in my application redirect to a website, I encountered an issue. Specifically, when wanting to search for an ID on Google after clicking on said element, I initially believed HTML would suffice. <a href=`https://www. ...

Is it possible to paginate a json response partially?

Curious if a JSON can be partially paginated. Take this example: { "data": [{ "type": "articles", "id": "1", "attributes": { "title": "JSON API paints my bikeshed!", "body": "The shortest article. Ever." } }], "included" ...

Unable to locate the module name loaded using require() function

Within my React file, I am importing a Javascript file like this (I am using Typescript): let FloDialog = require('../public/js/flo-dialog.min'); Afterwards, I declare a property for the dialog class: dialog: FloDialog = null; It is important ...

Looking to enhance your navigation menu with drop shadows?

I am trying to add a drop shadow effect to the navigation menu on my WordPress website. You can view the desired effect here. However, I have attempted to apply it to my .navigation-main class without success. Below is the header code: <header id="mast ...