Vertical Scroll doesn't work on NavPillsCard

[francosegura]

• [ Yes ] I am running the latest version
• [ Yes ] I checked the documentation and found no answer
• [ Yes ] I checked to make sure that this issue has not already been filed
• [ Yes ] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

The expected behavior is that when we try to scroll with the wheel mouse or the keyboard arrows, the displacement function works correctly.

Current Behavior

When we try to scroll when the mouse pointer is on the NavPills component, it doesn't work.

Failure Information (for bugs)

The bug is on your page too, on the card "Nav Pills": https://demos.creative-tim.com/material-dashboard-pro-react/?_ga=2.93843099.768424100.1540922259-1634820716.1533926808#/components/panels

• Device: Desktop
• Operating System: Windows 10 x64
• Browser and Version: Google Chrome last version.

[einazare]

Hello there @francosegura ,

Thank you for your interest in working with our products. Right now we have some issues with our office and I am working from home from a MacBook and I do not have a Windows Computer to test this out. When the issues at the Creative-Tim office will be solved and I will be able to go to the office I'll test and see if I can come up with a solution on the Windows Computer from the office.

Hope you can understand our situation.

Just to be sure I've understood your issue correctly, the scroll of the page does not work if you are hovering the NavPills?

Best, Manu

[francosegura]

Hello there @francosegura ,

Thank you for your interest in working with our products. Right now we have some issues with our office and I am working from home from a MacBook and I do not have a Windows Computer to test this out. When the issues at the Creative-Tim office will be solved and I will be able to go to the office I'll test and see if I can come up with a solution on the Windows Computer from the office.

Hope you can understand our situation.

Just to be sure I've understood your issue correctly, the scroll of the page does not work if you are hovering the NavPills?

Best, Manu

Hi, First of all, thanks for your quick answer. We understand your situation, so don't worry. Yes, the issue is as you mentioned previously.

Best, Franco.

[einazare]

Hello again, @francosegura ,

Just been able to test this issue. It seems it comes from the react-swipeable-views plugin that we use to make the animations on the NavPills. There are two fixes for this:

1. Go inside src/components/NavPills/NavPills.jsx and change lines 84-98 from

   <div className={classes.contentWrapper}>
       <SwipeableViews
         axis={direction === "rtl" ? "x-reverse" : "x"}
         index={this.state.active}
         onChangeIndex={this.handleChangeIndex}
       >
         {tabs.map((prop, key) => {
           return (
             <div className={classes.tabContent} key={key}>
               {prop.tabContent}
             </div>
           );
         })}
       </SwipeableViews>
     </div>

   to

   <div className={classes.contentWrapper}>
       {tabs.map((prop, key) => {
         if (key === this.state.active) {
           return (
             <div className={classes.tabContent} key={key}>
               {prop.tabContent}
             </div>
           );
         }
         return null;
       })}
     </div>

   But this means you will not have the animation any longer on the NavPills.

2. Go inside src/components/NavPills/NavPills.jsx and change lines 85-89 from

   <SwipeableViews
         axis={direction === "rtl" ? "x-reverse" : "x"}
         index={this.state.active}
         onChangeIndex={this.handleChangeIndex}
       >

   to

   <SwipeableViews
         axis={direction === "rtl" ? "x-reverse" : "x"}
         index={this.state.active}
         onChangeIndex={this.handleChangeIndex}
         style={{overflowY:"hidden"}}
       >

Hope this helps you.

Best, Manu

[pranaydp]

Hello team, I tried this for horizontal Navpills not working still facing an issue...

[einazare]

Hello there @pranaydp ,

Can you paste me your whole NavPills code?

Best, Manu

[pranaydp]

yes sure, import React from "react"; // nodejs library that concatenates classes import classNames from "classnames"; // nodejs library to set properties for components import PropTypes from "prop-types"; import SwipeableViews from "react-swipeable-views";

// material-ui components import withStyles from "@material-ui/core/styles/withStyles"; import Tab from "@material-ui/core/Tab"; import Tabs from "@material-ui/core/Tabs";

// core components import GridContainer from "components/Grid/GridContainer.jsx"; import GridItem from "components/Grid/GridItem.jsx";

import navPillsStyle from "assets/jss/material-dashboard-pro-react/components/navPillsStyle.jsx";

class NavPills extends React.Component { constructor(props) { super(props); this.state = { active: props.active }; } handleChange = (event, active) => { this.setState({ active }); }; handleChangeIndex = index => { this.setState({ active: index }); }; render() { const { classes, tabs, direction, color, horizontal, alignCenter } = this.props; const flexContainerClasses = classNames({

  [classes.horizontalDisplay]: horizontal !== undefined
});
const tabButtons = (
  <Tabs
    classes={{
      root: classes.root,
      fixed: classes.fixed,
      flexContainer: flexContainerClasses,
      indicator: classes.displayNone
    }}
    value={this.state.active}
    onChange={this.handleChange}
    centered={alignCenter}
  >
    {tabs.map((prop, key) => {
      var icon = {};
      if (prop.tabIcon !== undefined) {
        icon["icon"] = <prop.tabIcon className={classes.tabIcon} />;
      }
      const pillsClasses = classNames({
        [classes.pills]: true,
        [classes.horizontalPills]: horizontal !== undefined,
        [classes.pillsWithIcons]: prop.tabIcon !== undefined
      });
      return (
        <Tab
          label={prop.tabButton}
          key={key}
          {...icon}
          classes={{
            root: pillsClasses,
            labelContainer: classes.labelContainer,
            label: classes.label,
            selected: classes[color]
          }}
        />
      );
    })}
  </Tabs>
);
const tabContent = (
  <div className={classes.contentWrapper}>
    <SwipeableViews
      axis={direction === "rtl" ? "x-reverse" : "x"}
      index={this.state.active}
      onChangeIndex={this.handleChangeIndex}
      style={{ overflowY: "hidden" }}
    >
      {tabs.map((prop, key) => {
        if (key === this.state.active) {
          return (
            <div className={classes.tabContent} key={key}>
              {prop.tabContent}
            </div>
          );
        }
        return null;
      })}
    </SwipeableViews>
  </div>
);
return horizontal !== undefined ? (
  <GridContainer>
    <GridItem {...horizontal.tabsGrid}>{tabButtons}</GridItem>
    <GridItem {...horizontal.contentGrid}>{tabContent}</GridItem>
  </GridContainer>
) : (
  <div>
    {tabButtons}
    {tabContent}
  </div>
);

} }

NavPills.defaultProps = { active: 0, color: "primary" };

NavPills.propTypes = { classes: PropTypes.object.isRequired, // index of the default active pill active: PropTypes.number, tabs: PropTypes.arrayOf( PropTypes.shape({ tabButton: PropTypes.string, tabIcon: PropTypes.func, tabContent: PropTypes.node }) ).isRequired, color: PropTypes.oneOf([ "primary", "warning", "danger", "success", "info", "rose" ]), direction: PropTypes.string, horizontal: PropTypes.shape({ tabsGrid: PropTypes.object, contentGrid: PropTypes.object }), alignCenter: PropTypes.bool };

export default withStyles(navPillsStyle)(NavPills);

[einazare]

Hello again @pranaydp ,

So, the code is wrong. You either use the first option, or the second one, not both.

Best, Manu

[scblason]

I'm on the same team as @francosegura. We had to find a solution to the problem so we change te component that NavPills uses. We tested the react-swipeable-views component alone in a code sandbox a we didn't find any problem scrolling. We now use react-swipe inside NavPills. Thank you for the help @EINazare !

Regards, Santiago.

[didemkaraaslan]

@scblason Hey, can you give me a code example of you using react-swipe instead of SwipableViews ? Can't really find a solution..