title: Nativescript - How to hide a menu bellow the bottom?
body: <p>I have these two images where one is on top of the other : (twitter image and black image):</p>
  
  <p><a href="https://i.stack.imgur.com/tpnJZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tpnJZ.png" alt="enter image description here"></a></p>
  
  <p>The black image should be hidden  at bottom - and when a user clicks the twitter page - <strong><em>the black menu should slide-in from bottom</em></strong>.</p>
  
  <p>The black image is in the middle (on top of the other image) since the outside Gridview doesn't have any rows  - so everything is placed as a z-index stack: </p>
  
  <pre><code>&lt;GridLayout   columns="*"  &gt;
   &lt;GridLayout slide-out&gt;
          &lt;Image src="~/images/page.png"    &gt;&lt;/Image&gt;
      &lt;/GridLayout&gt;
  
      &lt;StackLayout slide-in class="slide b" height="300" &gt;
          &lt;Image   src="~/images/replies.png" "&gt;&lt;/Image&gt;
      &lt;/StackLayout&gt;
  &lt;/GridLayout&gt;
  </code></pre>
  
  <p>But the Black image ( which held by Stacklayout) should be hidden at the bottom like this : </p>
  
  <p><a href="https://i.stack.imgur.com/voEIP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/voEIP.png" alt="------------------"></a></p>
  
  <p>Is it possible to hide it at the bottom via css ?</p>
  
  <p><strong>What have I tried so far ?</strong> </p>
  
  <p>As you see there is a directive on the Stacklayout (named <code>slide-in</code>) : </p>
  
  <p>So I set its <code>marginBottom</code> on startup  : </p>
  
  <pre><code> constructor(el: ElementRef) {
          this.element.nativeElement.marginBottom = 0;
      }
  </code></pre>
  
  <p>But the Stacklayout stays the same  ( in the middle)/</p>
  
  <p>If I set </p>
  
  <pre><code> this.element.nativeElement.marginBottom = -screen.mainScreen.heightDIPs;
  </code></pre>
  
  <p>It shows : </p>
  
  <p><a href="https://i.stack.imgur.com/50Rh4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/50Rh4.png" alt="enter image description here"></a></p>
  
  <p>But it should be completly hidden at bottom</p>
  
  <p><strong>Question:</strong></p>
  
  <p>How can I hide it at the bottom ? </p>