0

I have a component that's appHostable. I'm loading it into salesforce1 and I'd like to include a section at the bottom that replicates the action menu of some of the standard screens but with some highly customized actions. I've tried just copying the markup and classes without luck, I imagine classes have to be parented in a specific way. I've been messing around with the CSS to try and get the container div to only take up the available viewport space. I thought maybe height 100% or height 100vh would do the trick but the container always ends up extending beyond the available space in the viewport and I think it's because of other elements that SF1 includes in the page, top menu, spacer-pull-down-for-more etc.. My very simple question is how do I create a div for an sf1 component that takes up ALL but ONLY the available space in the viewport so that I can position another element at the bottom of that div?

2

I have done sth. similar. The idea is to prevent all touch scrolling events within Salesforce1 app to get rid of the "pull to refresh" effect. But then you have to "allow" all your containers explicitly where you want to have scrolling behavior.

Try this one:

onRender : function(component)
{
  var mainViewTouchmoveHandler = function(event)
  {
    event.stopPropagation();
  };

  var mainViewTouchmoveHandlerTargeting = function(touchEvent)
  {
    var logMessageEvent;
    var scrollableContent = false;
    var currentElement = touchEvent.target;

    while(currentElement)
    {
        if(currentElement.classList && currentElement.classList.contains("allow_scroll"))
        {
            scrollableContent = true;
            break;
        }

        currentElement = currentElement.parentElement;
    }

    if(scrollableContent === false)
    {
        touchEvent.preventDefault();
        touchEvent.stopPropagation();
    }
};

component.getElement().addEventListener("touchmove", mainViewTouchmoveHandlerTargeting, true);
component.getElement().addEventListener("touchmove", mainViewTouchmoveHandler); 
},

I did call the code on the afterRender in a custom renderer, but with Summer17 you should be able to use

<aura:handler name="render" value="{!this}" action="{!c.onRender}"/>

Now set some CSS in your main container:

position: absolute; 
height: 100%;
width:100%;
top: 0px;
bottom: 0px; 
left: 0px; 
right: 0px;

Maybe you have to add some padding on top or bottom, not sure right now.

Additional you have to add all your scrollable items the class="allow_scroll". Last but no least have a look at the Lightning Design System to apply the right action icons "faking" the real action buttons.

Hope the idea helps you getting in the right direction.

  • Thanks! I was hoping I was missing something really simple, but I'll give it a shot. It feels like we have do a lot of hackery to do really basic things in SF1 / Lightning – Scott Morrison Jun 12 '17 at 19:32
  • Setting the main container CSS to what's above I'm still always 60 pixels off of what the actual height should b – Scott Morrison Jun 12 '17 at 19:58
  • did you try setting bottom: 60px? As you cannot scroll down you have to add some extra padding – Christian Menzinger Jun 12 '17 at 20:02
  • I have it mostly working, the css really messes up lightning out in a visual force page though, thanks for the help! – Scott Morrison Jun 13 '17 at 19:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.