Find your content:

Search form

You are here

Homeยป

Can we make header bar floating in Salesforce?

 
Share

Is there a way to make the header bar floating so that when we scroll the detail page it does not hide or disappear and should display always. Any ideas?

enter image description here

Thanks, Baskaran


Attribution to: Bforce

Possible Suggestion/Solution #1

The straight answer from a platform feature function perspective is no, there is no way to configure this, i agree its a good request from a UX perspective though! Maybe something to raise on IdeasExchange.

While you might be able to hack this through a side bar component that manipulates the page DOM, this is not safe as it depends on the internal rendering of the page which can change at any time by Salesforce, also the sidebar is not always visible unless configured so by the user.

The other consideration is to build a Visualforce page and within it a scrollable region containing your UI. Your question does not really state if your looking for all of the UI the user uses or maybe just certain aspects. So I thought I would throw this option in, just in case. It obviously requires some development skills and is not a general solution, only for areas you build a UI for, which need not necessarily be from scratch, as their is some great components in Visualforce for reproducing the standard UI, but does requirement development effort.


Attribution to: Andrew Fawcett

Possible Suggestion/Solution #2

Though what Andrew said is true, this is possible though, If it's done on a VF page you can just directly inject css code as described below, otherwise you'll have to create a custom home page component as also described below to avoid the cross server scripting issues if you are trying to embed this on a page layout. You'll have to inject your own CSS into the header which has an ID of 'AppBodyHeader'. Without real effort, I got it to be sticky, though you will have to massage it with more css.

Give the ID ('AppBodyHeader') some CSS parameters of:

  • position: fixed;
  • z-index: 100;

If you wish to test this out, on chrome for example, open up your console and paste this in:

var header = document.getElementById('AppBodyHeader');
header.style.position = 'fixed';
header.style.zIndex = '100';
header.style.background ='AliceBlue';

Tested this out and worked beautifully...

  • Create Home Page Component (HTML Area)
  • Clicked on 'Show HTML' checkbox located on the top right of rich text input
  • Wrote this inside:

`

<SCRIPT>
function callme(){
var header = document.getElementById('AppBodyHeader');
header.style.position = 'fixed';
header.style.zIndex = '100';
header.style.background ='AliceBlue';
var bodyParent = header.nextSibling;
bodyParent.style.padding = '110px 0 0 0';   
}

window.parent.onload=function(){callme();}

</SCRIPT>

`

  • Saved and added it to my home page layout

Attribution to: Double A
This content is remixed from stackoverflow or stackexchange. Please visit https://salesforce.stackexchange.com/questions/30959

My Block Status

My Block Content