head>","answerCount":4,"upvoteCount":4,"dateCreated":"2019-01-04T09:28:53","author":{"@type":"Person","name":null},"acceptedAnswer":null,"suggestedAnswer":[{"@type":"Answer","text":"Anybody?","dateCreated":"2019-01-05T05:02:20","upvoteCount":0,"url":"http://www.syncfusion.com/forums/141824/ej-ribbon-not-styled#NDuGgT","author":{"@type":"Person","name":"Sumair Ahmed"}},{"@type":"Answer","text":"Hi Sumair, \r\n\r\nThank you for contacting Syncfusion support. \r\n\r\nIn 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, \r\n\r\napp.component.html \r\n\r\n\r\n\r\n\r\n<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\"> \r\n    <e-applicationtab-backstagesettings-pages> \r\n        <e-page id=\"account\" text=\"Office Account\" contentID=\"accountCon\"> \r\n        </e-page> \r\n        <e-page id=\"close\" text=\"Close\" itemType=\"button\"> \r\n        </e-page> \r\n    </e-applicationtab-backstagesettings-pages> \r\n    <e-tabs> \r\n        <e-tab id=\"home1\" text=\"HOME\" [groups]=\"groups1\"> \r\n        </e-tab> \r\n        <e-tab id=\"insert\" text=\"INSERT\" [groups]=\"insert\"> \r\n        </e-tab> \r\n    </e-tabs> \r\n</ej-ribbon> \r\n \r\n<div id=\"accountCon\"> \r\n    <div class=\"e-userDiv\"> \r\n        <span class=\" user-info\">User Information</span> \r\n        <div> \r\n            <div class=\"e-accuser e-newpageicon\"></div> \r\n            <div class=\"e-userCon\"> \r\n                <div class=\" user-name\">user</div> \r\n                <div class=\" user-mail\">xyz@syncfusion.com</div> \r\n            </div> \r\n        </div> \r\n    </div> \r\n    <a href=\"#\">Sign out</a> \r\n</div> \r\n\r\n\r\napp.component.css \r\n\r\n\r\n\r\n\r\n.user-info { \r\n    color: #131379; \r\n    font-size: 22px; \r\n} \r\n \r\n.user-name { \r\n    color: #18f151; \r\n    font-size: 18px; \r\n} \r\n \r\n.user-mail { \r\n    color: #d02694; \r\n    font-size: 18px; \r\n} \r\n\r\nWe have prepared a sample for your reference, please check it - http://www.syncfusion.com/downloads/support/forum/141824/ze/Default887785947 .  \r\n\r\nPlease let us know if you require any further assistance. \r\n\r\nThanks, \r\nChristo ","dateCreated":"2019-01-07T06:43:03","upvoteCount":0,"url":"http://www.syncfusion.com/forums/141824/ej-ribbon-not-styled#NDuGtS","author":{"@type":"Person","name":"Christopher Issac Sunder K"}},{"@type":"Answer","text":"Hii copied your code and ir still does not work.  Any ideas why its not working on mine?I've attached the code.ThanksAttachment: ribbon_9ed4392b.zip","dateCreated":"2019-01-07T08:46:19","upvoteCount":0,"url":"http://www.syncfusion.com/forums/141824/ej-ribbon-not-styled#NDuLdB","author":{"@type":"Person","name":"Sumair Ahmed"}},{"@type":"Answer","text":"Hi Sumair, \r\n \r\nWe 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, \r\n \r\nshell.module.ts \r\n\r\n\r\n\r\n\r\n \r\nimport { EJAngular2Module } from 'ej-angular2'; \r\n \r\n@NgModule({ \r\n  imports: [CommonModule, TranslateModule, NgbModule, RouterModule, EJAngular2Module.forRoot()], \r\n  declarations: [ShellComponent, RibbonComponent], \r\n  schemas: [CUSTOM_ELEMENTS_SCHEMA] \r\n}) \r\n \r\nAlso, the ribbon tab group is not properly defined in your application. The below code is given in your application, \r\n \r\n\r\n\r\n\r\n\r\n \r\n<e-tabs> \r\n            <e-tab id=\"home1\" text=\"HOME\" [groups]=\"tabHome\"> \r\n            </e-tab> \r\n            <e-tab id=\"insert\" text=\"INSERT\" [groups]=\"\"> \r\n            </e-tab> \r\n</e-tabs> \r\n \r\n \r\nBut the tab group name given in ribbon.component.ts is groups1 and insert. So, you have to use following code, \r\n \r\n\r\n\r\n\r\n\r\n \r\n<e-tabs> \r\n            <e-tab id=\"home1\" text=\"HOME\" [groups]=\"groups1\"> \r\n            </e-tab> \r\n            <e-tab id=\"insert\" text=\"INSERT\" [groups]=\"insert\"> \r\n            </e-tab> \r\n</e-tabs> \r\n \r\nYou 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, \r\n \r\napp.component.css  \r\n\r\n\r\n\r\n\r\n.user-info {  \r\n    color: #131379;  \r\n    font-size: 22px;  \r\n}  \r\n \r\n \r\nIt is applied in the backstage content, \r\n  \r\n \r\n \r\nWe have modified your ribbon sample accordingly, please check it - http://www.syncfusion.com/downloads/support/forum/141824/ze/Ribbon-311664551  \r\n \r\nYou can also refer to our documentation given below, \r\nDocumentation for rendering Syncfusion components - https://help.syncfusion.com/angular/gettingstarted/getting-started-angular-cli  \r\nGetting started with Ribbon component - https://help.syncfusion.com/angular/ribbon/getting-started  \r\n \r\nIs this the issue you are facing? If not please get back to us with the details so that we can assist you further. \r\n\r\nThanks,Christo ","dateCreated":"2019-01-08T04:51:06","upvoteCount":0,"url":"http://www.syncfusion.com/forums/141824/ej-ribbon-not-styled#NDuLZe","author":{"@type":"Person","name":"Christopher Issac Sunder K"}}]}}; Ej-Ribbon not styled | Angular Forums | Syncfusion
We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Ej-Ribbon not styled

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>

4 Replies

SA Sumair Ahmed January 5, 2019 05:02 AM

Anybody?


CI Christopher Issac Sunder K Syncfusion Team January 7, 2019 06:43 AM

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">xyz@syncfusion.com</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 



SA Sumair Ahmed January 7, 2019 08:46 AM

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


CI Christopher Issac Sunder K Syncfusion Team January 8, 2019 04:51 AM

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-size22px;  
}  
 
 
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 


Loader.
Live Chat Icon For mobile
Up arrow icon