fixed headers + filter

5 posts, 0 answers
  1. RICHARD FRIEND
    RICHARD FRIEND avatar
    16 posts
    Member since:
    Nov 2008

    Posted 11 Sep 2013 Link to this post

    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 ?



  2.
  3. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 11 Sep 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. RICHARD FRIEND
    RICHARD FRIEND avatar
    16 posts
    Member since:
    Nov 2008

    Posted 11 Sep 2013 Link to this post

    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
  7. RICHARD FRIEND
    RICHARD FRIEND avatar
    16 posts
    Member since:
    Nov 2008

    Posted 11 Sep 2013 Link to this post

    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..
  8.
  9. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 13 Sep 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top