search

creativetimofficial / ct-nextjs-material-dashboard-pro

NextJS version of Material Dashboard PRO
https://demos.creative-tim.com/nextjs-material-dashboard-pro/admin/dashboard
16 stars 7 forks source link

[Bug] Search icon alignment bug in dashboard menu at reduced screen sizes #13

Closed kasterbrandon closed 2 years ago

kasterbrandon commented 3 years ago

Version

1.1.0

Operating System

Windows 10 Pro & Mac OS

Device

PC & Mac

Browser & Version

Chrome & Safari

Steps to reproduce

  1. Download version 1.1.0 of the NextJS Material Dashboard Pro
  2. run 'npm install'
  3. run 'npm run dev'
  4. In your browser, navigate to 'http://localhost:3000/admin/dashboard'
  5. In your browser, reduce your browser's window size to less than 960 pixels wide.
  6. Click on the menu icon and the menu will open from the ride side of the screen.
  7. Text alignment bug occurs in displaying the "Search Icon" near the "Profile" menu item..

    What is expected?

    The "Search Icon" to display to the right of the Search input field.

    What is actually happening?

    The "Search Icon" displays near the "Profile" menu item.

Solution

Additional comments

einazare commented 3 years ago

Hello again, @kasterbrandon ,

Please go inside assets/jss/nextjs-material-dashboard-pro/components/adminNavbarLinksStyle.js and delete:

  searchButton: {
    [theme.breakpoints.down("sm")]: {
      top: "-50px !important",
      marginRight: "38px",
      float: "right",
    },
  },

Also, please change:

margin: "10px 15px",

To:

margin: "10px 0 10px 15px!important",

Best, Manu

kasterbrandon commented 3 years ago

The bug is resolved with the changes you recommended. Thank you Manu!

sta2m commented 3 years ago

Hi,

Same problem here. The fix is ok for the search button, but there a problem with dashboard / notification / profile buttons.

creative-tim

Any idea ?

sajadevo commented 2 years ago

Hi there

We've updated the product to v2 and now it has a totally new and fresh design with a reusable, flexible and scalable base structure and all of the issues are fixed on the new update of the product.

Note: To get the latest updates and supports for the products and other related things to Creative Tim please join our Discord Community.

All the best, Sajad
 React Developer @ Creative-Tim.com