Scrolling content in remainder of screen

Hello,

I have a view with a tab. I need the view to have a search field in my tab and the results underneath. I’m using the collection-repeat approach discussed here. My problem is the container for the results does not take up the remaining space of the view. If I hard-code “height:300px;” on the <div class="list"> element, or its parent element, it works. My code looks like the following:

<ion-tab title="SEARCH">
  <ion-content scroll="false">
    <div class="list">
      <div class="item item-input-inset">
        <label class="item-input-wrapper">
	  <input type="text" placeholder="search" id="search" />
	</label>
	<button class="button button-small button-stable" ng-click="search_Click()">search</button>
      </div>
    </div>

    <ion-scroll>
      <div>
        <div class="list">
	  <a class="item" style="left:0; right:0"
               collection-repeat="result in results"
               collection-item-width="'100%'" collection-item-height="getItemHeight(result, $index)"
               ng-style="{height: getItemHeight(result, $index)}">
               <h2>{{result.Name}}</h2>
	       <p>{{result.Highlight}}</p>
          </a>
	</div>
      </div>
    </ion-scroll>				
  </ion-content>
</ion-tab>

How do I make a div fill the remaining space of a tab?

Any chance you could put what you have so far into a codepen?

Sure. I created the pen here. I’m trying to get the results to be placed in the space below the search area. If there are more items then space available, I want to scroll only the portion with the results. I need the search field to always be visible. That’s why I added the ion-scroll and turned off scrolling on the ion-content element.

Sure you could do it that way, but you could try it like this and get the same effect

http://codepen.io/mhartington/pen/yzBaE

Use an ion-header-bar with a class of bar-subheader

I forgot one important detail. My tab directive is using the following class: tabs-top tabs-background-assertive tabs-light. The challenge with the approach you provided is that it doesn’t seem to work when the tabs are aligned against the top. I’m not sure if this is by design or a bug. Either way, I’d like to align my tabs across the top AND have the search bar just below the tab in the content area.

Thank you for your help!

well with some custom css, you could get it to work.

http://codepen.io/mhartington/pen/fwyBh

2 Likes

THank you sir! Like I said, I wasn’t sure if styling was the correct approach or if there was a bug. Either way, thank you for your help.