How to increase footer height?

[Yonghong_R_]

Hello.

I have a listview populated with data fed from a web service. I have two "input" controls (Name and Phone) to filter the items in the listview. These two "input" controls should be always visible and located at the bottom, regardless of the number of items in the list view. To do this, I put the two 'input' control in a "footer" as below:

           <div class="upage panel" id="bselect" data-header="none">

                <div class="upage-outer">
                    <div class="upage-content ac0 content-area vertical-col left" id="uib_page_4">
                        <ul class="list widget uib_w_48 d-margins" data-uib="app_framework/listview" data-ver="1">
                            <li class="widget uib_w_49 template" data-uib="app_framework/listitem" data-ver="1" data-sm="YAbs" data-rpath=".patients[]" data-sc="multiple" id="blist"><a>{{name}}{{address}}{{phone}}</a>
                            </li>
                        </ul>

                        <footer>
                        <div class="grid grid-pad urow uib_row_10 row-height-10" data-uib="layout/row" data-ver="0">
                            <div class="col uib_col_12 col-0_5-12_5-5" data-uib="layout/col" data-ver="0">
                                <div class="widget-container content-area vertical-col">
                                    <div class="table-thing with-label widget uib_w_50 d-margins" data-uib="app_framework/input" data-ver="1" data-driving="[{'service':'YAbs','identifier':'value','uib':'app_framework/input','field':'name','request_on_change':true}]">
                                        <label class="narrow-control label-inline" for="name">Name</label>
                                        <input class="wide-control" type="text" id="name">
                                    </div>
                                    <span class="uib_shim"></span>
                                </div>
                            </div>
                            <div class="col uib_col_13 col-0_5-12_5-7" data-uib="layout/col" data-ver="0">
                                <div class="widget-container content-area vertical-col">
                                    <div class="table-thing with-label widget uib_w_51 d-margins" data-uib="app_framework/input" data-ver="1" data-driving="[{'service':'YAbs','identifier':'value','uib':'app_framework/input','field':'phone','request_on_change':true}]">
                                        <label class="narrow-control label-inline" for="phone">Phone</label>
                                        <input class="wide-control" type="text" id="phone">
                                    </div><span class="uib_shim"></span>
                                </div>
                            </div>
                        </div>
                        </footer>

                    </div>
              </div>

The footer tag does put the controls at the bottom, but they are only partially visible. I assume it's because the footer is too narrow. How could I increase the footer height? Or better yet make it to adjust to fit?

If the footer is not the right choice for this purpose, what would be the recommended ways to accomplish this?

Thanks in advance.

[Hamilton_Tenório_da_]

Do you tryied change the height in CSS? Get the id or class of the footer and change this value in your CSS.

[Chris_P_Intel]

>> If the footer is not the right choice for this purpose, what would be the recommended ways to accomplish this?

That is the right question.  I have three different answers:

Answer #1

In App Designer, you can just put the input _after_ the list view. You don't have to put it in a footer.  Then, select the listview and turn on the Rest of Space property. 

Rest of Space is a strange property - essentially, you are telling the Design that the list view should just vertically size itself to whatever size is maximal, but without causing any other controls to be offscreen.  That's pretty much what you want.  

Answer #2

If you want to keep the footer, then you'll need to change its height. This means overriding the CSS that determines that.  Exactly how to do that depends upon the framework you use. Note that some frameworks only want buttons in their footers, nothing else. So even once you have the footer height changed, you may be fighting the CSS to get the controls displayed correctly.  YMMV.

Answer #3

If wrestling with the framework isn't going well, but you still want a footer. Then forget their footer and make your own. Drag a row to the bottom of your document, add a background color style, adjust its min-height style to fit your needs, put your components in as you want. And then add some CSS to change it to 

position:fixed
bottom:0px;
right:0px;
left:0px;

That will probably work. If your page has a lot of scroll activity, then that footer might end up on top of other things. The solution is to add a normal empty row before the footer, at the end of your content, that has the same height as your footer row.  This isn't always a perfect solution, but for many situations it works well.

Good luck,

Chris

[Yonghong_R_]

Chris, Hamilton,

Thank you both for the replies.

I agree I should stay within the framework (App Framework). So Chris' answer # is the most preferable. I followed the instruction and it indeed puts the controls at bottom. But I got one issue: the listview doesn't scroll. That is, if the listview has many items, I expect to be able to scroll through the items. When I swipe up or down, it just tries to scroll the whole page and items that are not shown initially are not view-able. I tested in XDK emulator and on Android (hybrid Cordova build) and this non-scrolling listview is consistent.

I must have missed something very basic. Perhaps I need to enable some options on the listview? Or dynamically fill the listview with one "page" of items at a time?

The jQuery Listview demo in XDK seems interesting. But it looks to implement paging itself in JS, Unfortunately I couldn't run it as I couldn't obtain the Rotten Tomatoes API key, and it's not using App Framework listview. 

I am new to web/app programming. Thank you for your patience and any advice and pointers.

[Chris_P_Intel · Accepted solution]

overflow:auto;

or 

overflow:scroll-y

is the CSS you need to make something scroll.

#mylistview { overflow: auto; }

[Yonghong_R_]

Chris,

That's exactly what I needed! Now the listview scrolls and the control panel can filter the listview content.

Thank so much for the help.