Salesforce Visualforce CSS固定div

我正在构建自定义分析页面并复制Salesforce1中的本机操作栏的UI。其目的是将操作栏固定在屏幕的底部。它似乎在Android和浏览器移动模拟器中运行良好，但在iOS应用程序中却不行。Salesforce Visualforce CSS固定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; 
}

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

来源

2016-04-29 Alen Giliana

这是不容易重现您的问题。即使你没有具体说明你的问题。使用你的源代码向我展示2个问题。

首先你没有提供任何尺寸到你的svg元素。因此，使用一些示例svg文件（包括它们直接指向源代码！）将以尺寸显示，我只能看到透明的左上角。我必须设定大小。然后它工作正常。

第二个问题是使用<use xlink:href="myicon.svg"></use>外部资源方式在任何版本（最多11个测试）的Internet Explorer和Safari浏览器中都不起作用。你需要填充这个。你可以使用这个polyfill jonathantneal/svg4everybody。

来源

2016-04-29 06:58:02

我添加了一些关于操作栏的更多细节。关于浏览器兼容性，该页面只能通过iOS查看。此外，svg大小来自Salesforce Lightning体验CSS库。（注意容器上的类）。 https://www.lightningdesignsystem.com/components/icons/ –

Salesforce Visualforce CSS固定div

回答

相关问题