Ej-Ribbon not styled

[Sumair Ahmed]

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>

[Sumair Ahmed]

Anybody?

[Christopher Issac Sunder K]

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> 

 

<div id="accountCon"> 

    <div class="e-userDiv"> 

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

        <div> 

            <div class="e-accuser e-newpageicon"></div> 

            <div class="e-userCon"> 

                <div class=" user-name">user</div> 

                <div class=" user-mail">[email protected]</div> 

            </div> 

        </div> 

    </div> 

    <a rel='nofollow' href="#">Sign out</a> 

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

[Sumair Ahmed]

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

[Christopher Issac Sunder K]

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