Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vertical Scroll doesn't work on NavPillsCard #137

Closed
francosegura opened this issue Jan 7, 2019 · 9 comments
Closed

Vertical Scroll doesn't work on NavPillsCard #137

francosegura opened this issue Jan 7, 2019 · 9 comments
Labels
bug Something isn't working

Comments

@francosegura
Copy link

  • [ 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
Copy link
Contributor

einazare commented Jan 7, 2019

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
Copy link
Author

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 einazare added the bug Something isn't working label Jan 10, 2019
@einazare
Copy link
Contributor

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.

  1. 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
Copy link

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

@einazare
Copy link
Contributor

Hello there @pranaydp ,

Can you paste me your whole NavPills code?

Best,
Manu

@pranaydp
Copy link

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.flexContainer]: true,
[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]
}}
/>
);
})}

);
const tabContent = (


<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 (

{prop.tabContent}

);
}
return null;
})}


);
return horizontal !== undefined ? (

<GridItem {...horizontal.tabsGrid}>{tabButtons}
<GridItem {...horizontal.contentGrid}>{tabContent}

) : (

{tabButtons}
{tabContent}

);
}
}

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
Copy link
Contributor

Hello again @pranaydp ,

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

Best,
Manu

@scblason
Copy link

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

5 participants