Can't get split-button or button working

[dan]

The ribbon is working but the button with menu dropdown is not working. Also the icons are not working I am using e-icon e-iconname.

This is copied from the demo, ClipBoard should have a dropdown menu of paste and the clipboard icon.  Print Layout should have a dropdown menu of print layout text and icon.  This is copied from the Ribbon demo page. 

See attached project

To run

npm install

npm start

The ribbon is in folder src/components/nav-bar.js

Thank you

Attachment: client_baf2f24c.7z

[Ashokkumar Balasubramanian]

Hi Dan,   

   

Thanks for contacting Syncfusion Support.   

   

We had checked your query and sample. For that sample, you have missed to add the icon css reference for Ribbon component (Icons are not displayed problem) and you didn’t define the corresponding unorder list to the corresponding split button settings tagetID, please refer to the below modified code example.   

   

[App.html]   

   

<require from="syncfusion-javascript/Content/ej/web/bootstrap-theme/ej.web.all.min.css"></require>   

  <require from="syncfusion-javascript/Content/ej/web/responsive-css/ej.responsive.css"></require>   

  <require from="syncfusion-javascript/Content/ej/web/ribbon-css/ej.icons.css"></require>   

   

[nav-bar.html]   

   

<div id="Ribbon"></div>   

  <ul id="pasteSplit">   

      <li><a>Paste</a></li>   

  </ul>   

   

[nav-bar.js]   

   

splitButtonSettings: {   

                contentType: ej.ContentType.ImageOnly,   

                prefixIcon: "e-icon e-ribbon e-ribbonpaste",   

                targetID: "pasteSplit",   

                buttonMode: "dropdown",   

                arrowPosition: ej.ArrowPosition.Bottom,   

                click: "executeAction"   

              }   

     

For your convenience, we have modified your provided sample. Please check the modified sample in below location.   

   

Sample.   

   

Please let us know, if the provided information’s are helpful to achieve your requirement or not.   

   

Regards,   

Ashokkumar B.