Ej-Ribbon not styled

Sumair Ahmed

Asked On January 4, 2019 02:28 PM UTC

Hi

I'm using angular 7 and regardless how what i try, the styling from the theme is not applied.

I tried adding it to angular.json and directly to the index.html and nope, the ribbon is not styled. Anyone know why the styling is not being applied?

Looks like this:

My ribbon code:

<ej-ribbon id="Default" width="100%" height="100%" applicationTab.type="backstage" applicationTab.backstageSettings.text="FILE" 
    applicationTab.backstageSettings.height="100%" applicationTab.backstageSettings.width="100%" 
        applicationTab.backstageSettings.headerWidth="120" showQAT="true" applicationTab.isResponsive="true" (groupClick)="handleRibbonEvent($event)">
    <e-applicationtab-backstagesettings-pages>
        <e-page id="account" text="Office Account" contentID="accountCon">
        e-page>
        <e-page id="close" text="Close" itemType="button">
        e-page>
    e-applicationtab-backstagesettings-pages>
    <e-tabs>
        <e-tab id="tbHome" text="Home" [groups]="tabHome">e-tab>
        <e-tab id="tbMenu" text="Menu" [groups]="">e-tab>
    e-tabs>
ej-ribbon>

angular.json

  "styles": [
              "./../Management/node_modules/syncfusion-javascript/Content/ej/web/default-theme/ej.web.all.min.css",
              "src/main.scss"
            ],

Also tried this in index.html:

  <link rel="apple-touch-icon" sizes="180x180" rel='nofollow' href="apple-touch-icon.png"/>
<link rel="stylesheet" rel='nofollow' href="http://cdn.syncfusion.com/15.1.0.41/js/web/flat-azure/ej.web.all.min.css" />

  <script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
head>

Reply | Reply with quote

Sumair Ahmed

Replied On January 5, 2019 10:02 AM UTC

Anybody?

Reply | Reply with quote

Christopher Issac Sunder K [Syncfusion]

Replied On January 7, 2019 11:43 AM UTC

Hi Sumair,

Thank you for contacting Syncfusion support.

In our Ribbon component, we have provided the theming support for built in elements. For customizable elements, you can provide the required styles in your application level. We suspect your issue is that styling is not applied to the backstage content. You can provide required styles for backstage elements and resolve your reported problem. Please find the code block below,

app.component.html

<ej-ribbon id="Default" width="100%" applicationTab.type="backstage" applicationTab.backstageSettings.text="FILE" applicationTab.backstageSettings.height="400" applicationTab.backstageSettings.width="100%" applicationTab.backstageSettings.headerWidth="120">

<e-applicationtab-backstagesettings-pages>

<e-page id="account" text="Office Account" contentID="accountCon">

</e-page>

<e-page id="close" text="Close" itemType="button">

</e-page>

</e-applicationtab-backstagesettings-pages>

<e-tabs>

<e-tab id="home1" text="HOME" [groups]="groups1">

</e-tab>

<e-tab id="insert" text="INSERT" [groups]="insert">

</e-tab>

</e-tabs>

</ej-ribbon>

<span class=" user-info">User Information</span>

<div>

<div class=" user-mail">xyz@syncfusion.com</div>

</div>

</div>

app.component.css

.user-info {

color: #131379;

font-size: 22px;

}

.user-name {

color: #18f151;

font-size: 18px;

}

.user-mail {

color: #d02694;

font-size: 18px;

}

We have prepared a sample for your reference, please check it - http://www.syncfusion.com/downloads/support/forum/141824/ze/Default887785947 .

Please let us know if you require any further assistance.

Thanks,

Christo

Reply | Reply with quote

Sumair Ahmed

Replied On January 7, 2019 01:46 PM UTC

Hi

i copied your code and ir still does not work. Any ideas why its not working on mine?

I've attached the code.

Thanks

Attachment: ribbon_9ed4392b.zip

Reply | Reply with quote

Christopher Issac Sunder K [Syncfusion]

Replied On January 8, 2019 09:51 AM UTC

Hi Sumair,

We checked your application and suspect that the issue you are facing is that the ribbon component is not rendered. This is because our component related module – “EJAngular2Module” is not imported in below file,

shell.module.ts

import { EJAngular2Module } from 'ej-angular2';

@NgModule({

imports: [CommonModule, TranslateModule, NgbModule, RouterModule, EJAngular2Module.forRoot()],

declarations: [ShellComponent, RibbonComponent],

schemas: [CUSTOM_ELEMENTS_SCHEMA]

})

Also, the ribbon tab group is not properly defined in your application. The below code is given in your application,

<e-tabs>

<e-tab id="home1" text="HOME" [groups]="tabHome">

</e-tab>

<e-tab id="insert" text="INSERT" [groups]="">

</e-tab>

</e-tabs>

But the tab group name given in ribbon.component.ts is groups1 and insert. So, you have to use following code,

<e-tabs>

<e-tab id="home1" text="HOME" [groups]="groups1">

</e-tab>

<e-tab id="insert" text="INSERT" [groups]="insert">

</e-tab>

</e-tabs>

You have reported issue that styling is not properly applied, but on checking from our side we did not face any issue related to that. In our sample, we have also showcased how to apply custom styling like below,

app.component.css

.user-info {

color: #131379;

font-size: 22px;

}

It is applied in the backstage content,

We have modified your ribbon sample accordingly, please check it - http://www.syncfusion.com/downloads/support/forum/141824/ze/Ribbon-311664551

You can also refer to our documentation given below,

Documentation for rendering Syncfusion components - https://help.syncfusion.com/angular/gettingstarted/getting-started-angular-cli

Getting started with Ribbon component - https://help.syncfusion.com/angular/ribbon/getting-started

Is this the issue you are facing? If not please get back to us with the details so that we can assist you further.

Thanks,
Christo

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
141824	Jan 4,2019 02:28 PM UTC	Jan 8,2019 09:51 AM UTC	Angular	4

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US