2016-04-29 9 views
0

Ich erstelle eine benutzerdefinierte Analyseseite und repliziere die Benutzeroberfläche der nativen Aktionsleiste in Salesforce1. Die Absicht ist, die Aktionsleiste am unteren Bildschirmrand zu fixieren. Es scheint gut in Android und Browser-Emulator zu funktionieren, aber nicht in iOS-App.Salesforce Visualforce CSS behoben div

CSS

#dashboard-utility-banner{ 
    border-top:1px solid #999; 
    background-color:#eeeeee; 
    position:fixed; 
    bottom:0px; 
    height:74px; 
} 

#dashboard-utility-banner .utility-tools{ 
    text-align: center; 
    font-size: 11px; 
} 

Bootstrap HTML

<div id="dashboard-utility-banner" class=" col-md-12 col-xs-12"> 
    <div class = "col-md-4 col-sm-4 col-xs-4 customTextFontClass utility-tools" > 
    <a href="#" onClick="createNote();return false;"> 
     <span class="slds-icon_container slds-icon_container--circle slds-icon-standard-performance"> 
     <svg aria-hidden="true" class="slds-icon slds-icon--small"> 
      <use xlink:href="{!URLFOR($Resource.SLDS0102,'assets/icons/utility-sprite/svg/symbols.svg#note')}"></use> 
     </svg> 
    </span><br/><span class="">Create Note</span> 
    </a> 
    </div>  
    <div class = "col-md-4 col-sm-4 col-xs-4 customTextFontClass utility-tools" > 
    <a href="#" onClick="showPriceList();return false;"> 
     <span class="slds-icon_container slds-icon_container--circle slds-icon-standard-topic"> 
      <svg aria-hidden="true" class="slds-icon slds-icon--small"> 
       <use xlink:href="{!URLFOR($Resource.SLDS0102,'assets/icons/utility-sprite/svg/symbols.svg#cases')}"></use> 
      </svg> 
     </span><br/><span class="">Price List</span> 
    </a>  
    </div> 
    <div class = "col-md-4 col-sm-4 col-xs-4 customTextFontClass utility-tools" > 
    <a href="/apex/displaySiteAccounts?accountNumber={!accountNumber}&id={!accountID}"> 
     <span class="slds-icon_container slds-icon_container--circle slds-icon-standard-account"> 
      <svg aria-hidden="true" class="slds-icon slds-icon--small"> 
       <use xlink:href="{!URLFOR($Resource.SLDS0102,'assets/icons/utility-sprite/svg/symbols.svg#company')}"></use> 
       </svg> 
    </span><br/><span class="">Locations</span> 
    </a> 
    </div>  
</div> 

enter image description here

Antwort

0

Es ist nicht leicht, Ihr Problem zu reproduzieren. Auch Sie haben nicht angegeben, was genau Ihr Problem ist. Wenn Sie Ihre Quelle lokal verwenden, zeigen Sie mir 2 Probleme.

Zuerst haben Sie Ihrem Svg-Element keine Größen hinzugefügt. Also mit einigen Beispiel-Svg-Dateien (enthalten sie direkt an der Quelle!), Wird durch eine Größe angezeigt, sehe ich nur die transparente obere linke Kante. Ich muss dann die Größe einstellen. Dann funktioniert es gut.

Das zweite Problem, das Sie haben, ist <use xlink:href="myicon.svg"></use> Die externe Ressource Weg funktioniert nicht in jeder Version (bis zu 11 getestet) von Internet Explorer und Safari. Sie müssen das auffüllen. Sie können dieses Polyfill jonathantneal/svg4everybody dafür verwenden.

+0

Ich habe einige weitere Details bezüglich der Aktionsleiste hinzugefügt. In Bezug auf die Browserkompatibilität wird die Seite nur über iOS angezeigt. Außerdem stammen die SVG-Größen aus der CSS-Bibliothek von Salesforce Lightning Experience. (Beachten Sie die Klassen auf dem Container). https://www.lightningdesignsystem.com/components/icons/ –