react-mdc-web icon indicating copy to clipboard operation
react-mdc-web copied to clipboard

Where to write the <script/> required to run "lastRowFixedOnly" in Toolbar of mdc?

Open prakharrke opened this issue 7 years ago • 1 comments

I am stuck as to lastRowFixedOnly requires a javascript to be run in order to make it work. Where should I write it? While defining the Component ToolBar, I wrote it in componentDidMount method but it gives me an error of mdc is not defined.

import React from "react";
import Toolbar from "react-mdc-web/lib/Toolbar/Toolbar";
import ToolbarRow from "react-mdc-web/lib/Toolbar/ToolbarRow";
import ToolbarSection from "react-mdc-web/lib/Toolbar/ToolbarSection";
import ToolbarTitle from "react-mdc-web/lib/Toolbar/ToolbarTitle";

export class Header extends React.Component{
  componentDidMount() {
    const s = document.createElement("script");
    s.type = "text/javascript";
    s.async = true;
    s.innerHTML = "var toolbar = mdc.toolbar.MDCToolbar.attachTo(document.querySelector('.mdc-toolbar')); toolbar.fixedAdjustElement = document.querySelector('.mdc-toolbar-fixed-adjust');";
  document.body.appendChild(s);
  }
render(){

return(

  <Toolbar fixed fixedLastRowOnly>
  <ToolbarRow>
  <ToolbarSection>
  <h1>This is row 1</h1>
  </ToolbarSection>
</ToolbarRow>
 <ToolbarRow>
    <ToolbarSection>
    <ToolbarTitle>Title</ToolbarTitle>
   </ToolbarSection>
    </ToolbarRow>
    <ToolbarRow>
    <ToolbarSection>
    <ToolbarTitle>Title</ToolbarTitle>
  </ToolbarSection>
    </ToolbarRow>
  </Toolbar>
);
}
}

prakharrke avatar Dec 06 '17 09:12 prakharrke

yes, that is exactly what i'm removing now, don't use it at the moment

kradio3 avatar Dec 06 '17 13:12 kradio3