Salesforce Visualforce CSS behoben div

Question

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.

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> 

Answer 1

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.