fixed headers + filter

[RICHARD FRIEND]

Hi 

Im having an issue where the first fixed header overlaps the search box when using filtering + fixed headers.


See http://jsfiddle.net/52kyv/4/

How can i get round this ?

[Kamen Bundev]

Hello Richard,

The latest internal build from yesterday partially fixes this issue - it doesn't show the fixed header when the Scroller is at 0px. Can you download it and check if this helps?

Regards,
Kamen Bundev
Telerik

[RICHARD FRIEND]

Hi

That seems to fix the issue, however : 


1.I am using the custom package builder - to minimise my scripts so i dont think i can use it with this internal build.
2.It now breaks when clicking a button that has no href is clicked - most of my buttons that sit inside a listview item template have no href (they are bound to click),

There seems to be no check for the href being undefined.

var pane = this,
                link = $(e.currentTarget),
                transition = attrValue(link, "transition"),
                rel = attrValue(link, "rel") || "",
                target = attrValue(link, "target"),
                href = link.attr(HREF),
                remote = href[0] !== "#" && this.options.serverNavigation; <---This blows up

Thanks

Richard

[RICHARD FRIEND]

For now i am simply moving the filter form element into another div that i have placed inside the header, this also has the advantage of making the filter fixed and stays there when you scroll.

<div data-role="header">
            <div data-role="navbar">
                <span data-role="view-title"></span>
                <a href="#Form_HM12_Popup" class='app-button  lock-when-busy' data-bind="click: readyToAdd" data-align="right" data-icon="add" data-role="button"></a>
                <a data-align="left" data-role="button" class='app-button' href="#home-view" data-icon="home"></a>

            </div>

            <ul style="margin-top: 10px" data-role="buttongroup" data-index="0" id="HM12_FilterButton">
                <li class="badge-white">All Residents
                </li>
                <li class="badge-green">Actioned today
                </li>
                <li class="badge-red">Outstanding today
                </li>
            </ul>
            <div id="Form_HM12_List_FilterPlaceholder"></div>
        </div>



        <ul id="Form_HM12_List" data-bind='click: showOptions'>
        </ul>

 $("#Form_HM12_List").prev(".km-filter-form").appendTo("#Form_HM12_List_FilterPlaceholder");


works for now..

[Petyo]

Hi Richard,

apologies for the inconvenience caused - the javascript error issue you mention was discovered shortly after the internal build release. We addressed it in the one released yesterday. 

The approach of having the filter bar in the header is a viable one, in fact. 

Regards,
Petyo
Telerik