0

I have the site in english as the main language, added Arabic as the secondary language. When I view the site in arabic, the logo gets aligned to the right but the site title and the menu does not. Please check.

enter image description here

Kindly advise how to fix the layout.

Edit: This issue happens when I add application customizer to add a footer to the site. This messes up with the site title, menu and the calendar, links web parts and changes the layout from left to right.

Below is my code: SCSS file:

    @import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';

:global {

/*  div[class^="feedback_"]{

    display: none !important;

} */

  body, /* entire body*/
  .ms-Nav, /*left navigation pane background*/
  #spPageChromeAppDiv /* whole page again*/
  {
      background-color: #f2f3f4  !important;
  }
  .o365cs-base.o365cs-topnavBGColor-2, /* top bar*/
  .o365cs-base .o365cs-nav-rightMenus /* top bar menu right*/
  {
      background-color: #3B3890 !important;
  }

  
  #O365_NavHeader{

    background-color: #3B3890 !important;
    
    }
    
    #O365_MainLink_NavMenu{
    
    background-color: #3B3890 !important;
    
    }

 a{
    
  font-size: x-small;
 }
 a:hover {
    color: silver;
  }

}

.app {

  .navbar {
    overflow: hidden;
    background-color: #3B3890;
  }
  
  .navbar a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  
  
  

  .top {
      height:80px;
      text-align:center;
      line-height:2.5;
      font-weight:bold;
      display: flex;
      align-items: center;
      justify-content: left;
      background-color: #3B3890;
      color: $ms-color-white;
      border-bottom: 3px solid silver;
      border-top: 3px solid silver;
  }


  .top1 {
   
    text-align:center;
    line-height:2.5;
    font-weight:bold;
    display: flex;
    align-items: center;
    justify-content: left;
    height:80px;
    color: $ms-color-white;
    width: 70%;
    padding-left:5px;
    }
    .top2 {
      height:80px;
      text-align:center;
      line-height:2.5;
      font-weight:bold;
      display: flex;
      align-items: center;
      justify-content: right;
      color: $ms-color-white;
      width: 30%;
      margin-right: 20px;
      }

      .top3 {
        
        text-align:center;
        line-height:2.5;
        font-weight:bold;
        display: flex;
        align-items: center;
        justify-content: center;
        
        color: $ms-color-white;
        width: 10%;
        }
        .top4 {
          
          text-align:center;
          line-height:2.5;
          font-weight:bold;
          display: flex;
          align-items: center;
          justify-content: center;
          
          color: $ms-color-white;
          width: 10%;
          }

          .top6 {
          
            text-align:center;
            line-height:2.5;
            font-weight:bold;
           // display: flex;
            align-items: center;
            justify-content: center;
            
            color: $ms-color-white;
            width: 10%;
            }
          .top5 {
            
            text-align:center;
            line-height:2.5;
            font-weight:bold;
            display: flex;
            align-items: center;
            justify-content: center;
            
            color: $ms-color-white;
            width: 10%;
            }

           
  .bottom {
      height:40px;
      text-align:left;
      line-height:2.5;
       display: flex;
      align-items: center;
      justify-content: left;
      //background-color: $ms-color-themePrimary;
      background-color: #3B3890;
      color: $ms-color-white;
      border-top: 3px solid silver;
      padding-left: 5px;
      font-size: smaller;
  }


  .bottom1 {
    height:40px;
    text-align:left;
    line-height:2.5;
     display: flex;
    align-items: center;
    justify-content: left;
    //background-color: $ms-color-themePrimary;
    background-color: #3B3890;
    color: $ms-color-white;
    border-top: 3px solid silver;
    padding-left: 5px;
    font-size: smaller;
    width: 30%;
}

.bottom2 {
  width: 70%;
  height:40px;
  text-align:left;
  line-height:2.5;
   display: flex;
  align-items: center;
  justify-content: right;
  //background-color: $ms-color-themePrimary;
  background-color: #3B3890;
  color: $ms-color-white;
  border-top: 3px solid silver;
  padding-left: 5px;
  font-size: smaller;
  margin-right: 20px;
}

.navbarbottom {
  overflow: hidden;
  color: white;
  position: fixed;
  bottom: 0;
  width: 100%;
}

.navbarbottom a {
  float: right;
  display: block;
  color: white;
  text-align: center;
  padding: 4px 7px;
  text-decoration: none;
  font-size: x-small; 
  
}

.navbarbottom a:hover {
  background: #f1f1f1;
  color: black;
}

.navbarbottom a.active {
  background-color: silver;
  color: white;
}
 
}

And my application customizer code:

import { override } from '@microsoft/decorators';
import { Log } from '@microsoft/sp-core-library';
import {
  BaseApplicationCustomizer
} from '@microsoft/sp-application-base';
import { Dialog } from '@microsoft/sp-dialog';
import styles from './AppCustomizer.module.scss';
import { escape } from '@microsoft/sp-lodash-subset';
import * as $ from 'jquery';
import { confirm } from "react-confirm-box";

import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    PlaceholderContent,
  PlaceholderName
} from '@microsoft/sp-application-base';

import * as bootstrap from "bootstrap";
require('../../../node_modules/bootstrap/dist/css/bootstrap.css');
require('../../../node_modules/bootstrap/dist/css/bootstrap.min.css');


import * as strings from 'SbcHeaderFooterApplicationCustomizerStrings';

const LOG_SOURCE: string = 'SbcHeaderFooterApplicationCustomizer';



/**
 * If your command set uses the ClientSideComponentProperties JSON input,
 * it will be deserialized into the BaseExtension.properties object.
 * You can define an interface to describe it.
 */
export interface ISbcHeaderFooterApplicationCustomizerProperties {
  // This is an example; replace with your own property
  Top: string;
  Bottom: string;
}



/** A Custom Action which can be run during execution of a Client Side Application */
export default class SbcHeaderFooterApplicationCustomizer
  extends BaseApplicationCustomizer<ISbcHeaderFooterApplicationCustomizerProperties> {
  
    
    // These have been added
  private _topPlaceholder: PlaceholderContent | undefined;
  private _bottomPlaceholder: PlaceholderContent | undefined;

  @override
  public onInit(): Promise<void> {
    Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);
  
    // Wait for the placeholders to be created (or handle them being changed) and then
    // render.
    this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceHolders);
  
    return Promise.resolve();
  }


  private _renderPlaceHolders(): void {
    console.log("HelloWorldApplicationCustomizer._renderPlaceHolders()");
    console.log(
      "Available placeholders: ",
      this.context.placeholderProvider.placeholderNames
        .map(name => PlaceholderName[name])
        .join(", ")
    );

    var absolutePath:string = this.context.pageContext.web.absoluteUrl;

    // $('.ms-compositeHeader').css('display','none');    
  
    // Handling the top placeholder
//     if (!this._topPlaceholder) {
//       this._topPlaceholder = this.context.placeholderProvider.tryCreateContent(
//         PlaceholderName.Top,
//         { onDispose: this._onDispose }
//       );
  
//       // The extension should not assume that the expected placeholder is available.
//       if (!this._topPlaceholder) {
//         console.error("The expected placeholder (Top) was not found.");
//         return;
//       }
  
//       if (this.properties) {
//         let topString: string = this.properties.Top;
//         if (!topString) {
//           topString = "(Top property was not defined.)";
//         }
  
//  /*        if (this._topPlaceholder.domElement) {
//           this._topPlaceholder.domElement.innerHTML = `



//           <div class="${styles.app}">
//             <div class="${styles.top}">



//               <div class="${styles.top1}" >  
//                 <div  class="${styles.navbar}" >
            
//                         <div  class="${styles.dropdown}"  >
//                           <a  class="${styles.dropbtn}" href="${absolutePath}"/SitePages/Home.aspx">${strings.Home}
//                           </a>
//                         </div> 

            
//                         <div  class="${styles.dropdown}"  >
//                           <button  class="${styles.dropbtn}">${strings.About_Us} 
//                           </button>
//                           <div  class="${styles.dropdowncontent}">
//                             <a href="https://business.sa/AboutSBC/About.html">${strings.SBC_Overview}</a>
//                             <a href="https://business.sa/AboutSBC/About.html">${strings.Objectives}</a>
//                             <a href="https://business.sa/AboutSBC/Board.html">${strings.Board_Members}</a>
//                           </div>
//                         </div> 

//                   <div class="${styles.dropdown}">
//                     <button class="${styles.dropbtn}">${strings.Departments}</button>
//                     <div  class="${styles.dropdowncontent}">
//                       <a href=""  style="background-color:#E6EFFA">${strings.Shared_Services}</a>
//                       <a href="">${strings.Finance}</a>
//                       <a href="">${strings.Contracts_Procurement}</a>
//                       <a href="">${strings.HR}</a>
//                       <a href="">${strings.IT}</a>
//                       <a href="">${strings.Admin_Services}</a>
//                       <a href="">${strings.Project_Management}</a>
                                      
//                       <a href=""  style="background-color:#E6EFFA">${strings.Communication_Marketing}</a>
//                       <a href="">${strings.Marketing_Communication}</a>
//                       <a href="">${strings.Public_Relations}</a>
//                       <a href="">${strings.Events_and_Confrences}</a>

                              
//                       <a href=""  style="background-color:#E6EFFA">${strings.Business_Intelligence}</a>
//                       <a href="">${strings.Data_Analysis}</a>
//                       <a href="">${strings.Economic_Reports}</a>
//                       <a href="">${strings.Lists_URP}</a>

                              
//                       <a href=""  style="background-color:#E6EFFA">${strings.Investor_Services}</a>
//                       <a href="">${strings.Spatial_Centers}</a>
//                       <a href="">${strings.Unified_Digital_Platform}</a>
//                       <a href="">${strings.Investors_Services}</a>

//                       <a href=""  style="background-color:#E6EFFA">${strings.Policies_Regulations}</a>
//                       <a href="">${strings.Dev_Policies_Regulations}</a>
              
//                       <a href=""  style="background-color:#E6EFFA">${strings.Partnerships_Capacity_Dev}</a>
//                       <a href="">${strings.Capacity_Operations_Dev}</a>
//                       <a href="">${strings.Quality}</a>
//                       <a href="">${strings.Partnersips}</a>
//                     </div>
//                   </div>

//                       <div  class="${styles.dropdown}"  >
//                             <a  class="${styles.dropbtn}" href="${absolutePath}/SitePages/Home.aspx">${strings.Circulation} 
//                             </a>
//                       </div> 
//                       <div  class="${styles.dropdown}"  >
//                             <a  class="${styles.dropbtn}" href="${absolutePath}/SitePages/Home.aspx">${strings.News} 
//                             </a>
//                       </div>
//                  </div>
//               </div>     
              
              
                    
//               <div class="${styles.top2}">              
//               <a href='${absolutePath}/SitePages/Home.aspx'    > 
//               <img src='${absolutePath}/SiteImages/logos/XXX-LOGO_300_72.png' style="height:60px;width:300px" alt="Search"> 
//               </a>
//               </div>  


//             </div>
//           </div>`;
//         } */
//       }
//     }
  
    // Handling the bottom placeholder
    if (!this._bottomPlaceholder) {
      this._bottomPlaceholder = this.context.placeholderProvider.tryCreateContent(
        PlaceholderName.Bottom,
        { onDispose: this._onDispose }
      );
  
      // The extension should not assume that the expected placeholder is available.
      if (!this._bottomPlaceholder) {
        console.error("The expected placeholder (Bottom) was not found.");
        return;
      }

      //const elem: React.ReactElement<IReactFooterProps> = React.createElement(ReactFooter);

      //ReactDOM.render(elem, this._bottomPlaceholder.domElement); 
  
      if (this.properties) {
        let bottomString: string = this.properties.Bottom;
        if (!bottomString) {
          bottomString = "(Bottom property was not defined.)";
        }
  
        if (this._bottomPlaceholder.domElement) {
          this._bottomPlaceholder.domElement.innerHTML = `
          <div class="${styles.app}">
            <div class="${styles.bottom}">

            <div class="${styles.bottom2}">
            <div class="${styles.navbarbottom}">
            
            
           
            <a href="https://www.instagram.com/XXX?utm_medium=copy_link">${strings.Instagram}</a>
            <a href="https://twitter.com/XXX?s=20">${strings.Twitter}</a>
            <a href="https://www.youtube.com/channel/XXX">${strings.Youtube}</a>
            <a href="https://sa.linkedin.com/company/XXX">${strings.Linkedin}</a>
          </div>
            </div>
            
            <div class="${styles.bottom1}">
            ${strings.Copyright_first} ${new Date().getFullYear()} ${strings.Copyright_Second}
            </div>

           
            </div>
          </div>`;
        }
      }
    }
  }

  private _onDispose(): void {
    console.log('[HelloWorldApplicationCustomizer._onDispose] Disposed custom top and bottom placeholders.');
  }
}

Kindly help fix this error.

3
  • Is this a bespoke/customised page layout or is it out-of-the-box? Sep 18, 2022 at 11:21
  • Out of the box communication site
    – Noorul
    Sep 18, 2022 at 13:58
  • You'll probably need to raise this with Microsoft support. Sep 18, 2022 at 15:43

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.