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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Ej-Ribbon not styled

Thread ID:

Created:

Updated:

Platform:

Replies:

141824 Jan 4,2019 02:28 PM UTC Jan 8,2019 09:51 AM UTC Angular 4
loading
Tags: ejRibbon
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>

Sumair Ahmed
Replied On January 5, 2019 10:02 AM UTC

Anybody?

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


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

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;