Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2024-11-22 08:36:33 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix sticky on Edge + IE11

Browse Source
This commit is contained in:
Roman Hotsiy 2017-11-20 12:05:54 +02:00
parent c17178f28f
commit 6d7fd547b1
No known key found for this signature in database
GPG Key ID: 5CB7B3ACABA57CB0
3 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
e2e/standalone.e2e.ts
View File

@ -11,7 +11,7 @@ describe('Standalone bundle test', function() {
cy cy
.visit('e2e/standalone.html') .visit('e2e/standalone.html')
.get('.menu-content li') .get('.menu-content li')
.click({ multiple: true }); .click({ multiple: true, force: true });
}); });
}); });
@ -27,7 +27,7 @@ describe('Standalone bundle test', function() {
cy cy
.visit('e2e/standalone.html') .visit('e2e/standalone.html')
.get('.menu-content li') .get('.menu-content li')
.click({ multiple: true }); .click({ multiple: true, force: true });
}); });
}); });
}); });

8
src/components/Redoc/Redoc.tsx
View File

@ -19,17 +19,17 @@ export interface RedocProps {
}; };
} }
const stickyfill = Stickyfill();
export class Redoc extends React.Component<RedocProps> { export class Redoc extends React.Component<RedocProps> {
stickyfill = Stickyfill();
stickyElement: Element; stickyElement: Element;
componentDidMount() { componentDidMount() {
this.props.store.menu.updateOnHash(); this.props.store.menu.updateOnHash();
this.stickyfill.add(this.stickyElement); stickyfill.add(this.stickyElement);
} }
componentWillUnmount() { componentWillUnmount() {
this.stickyfill.remove(this.stickyElement); stickyfill.remove(this.stickyElement);
} }
render() { render() {
@ -39,7 +39,7 @@ export class Redoc extends React.Component<RedocProps> {
<RedocWrap className="redoc-wrap"> <RedocWrap className="redoc-wrap">
<StickySidebar <StickySidebar
className="menu-content" className="menu-content"
ref={el => { innerRef={el => {
this.stickyElement = el; this.stickyElement = el;
}} }}
> >

5
src/components/Redoc/elements.tsx
View File

@ -34,7 +34,7 @@ export const RedocWrap = styled.div`
`; `;
export const StickySidebar = styled.div` export const StickySidebar = styled.div`
min-width: ${props => props.theme.menu.width}; width: ${props => props.theme.menu.width};
background-color: ${props => props.theme.menu.backgroundColor}; background-color: ${props => props.theme.menu.backgroundColor};
overflow: hidden; overflow: hidden;
display: flex; display: flex;
@ -42,7 +42,7 @@ export const StickySidebar = styled.div`
transform: translateZ(0); transform: translateZ(0);
max-height: 100vh; height: 100vh;
position: sticky; position: sticky;
position: -webkit-sticky; position: -webkit-sticky;
top: 0; top: 0;
@ -51,4 +51,5 @@ export const StickySidebar = styled.div`
export const ApiContent = styled.div` export const ApiContent = styled.div`
z-index: 10; z-index: 10;
position: relative; position: relative;
width: calc(100% - ${props => props.theme.menu.width});
`; `;