locked
How to make a simple grid in an MVC Index page not scroll past the header properly? RRS feed

  • Question

  • User2142845853 posted

    http://jsfiddle.net/andrewwhitaker/fj8wM/

    With this kind of table, I want to freeze the header if the user scrolls down the page.  On my table there are 8 headers of different sizes like 120, 140, 960, 120... I apply the code in this fiddle and the header stops halfway smashing the header grid.  Then, the columns in the frozen part spread out

    So while the table's column widths are 120, 140, 960, 120, 140 etc... once you scroll down, the frozen header column spreads it out, 120, 150, 1020, and its already off the page, looks terrible

    is there ANY way to do this and have it look neat, proper?   Just a <table> with th, tr/td.  Tried using bootstrap classes like table-bordered, it can put the frozen header in a border but its half way blocked above the top of the page, in other words, it doesnt stop at the top, it goes up 1/2 thickness of the header row then freezes.

    just want it to scroll nicely and show all the headers, it can keep the headers and text above the headers frozen where they are now, just anything below the header scrolls, is that possible?

    Sunday, February 23, 2020 8:07 PM

All replies

  • User409696431 posted

    It is hard to answer you when you post a working fiddle, and don't show us your code that doesn't work.

    Monday, February 24, 2020 4:18 AM
  • User2142845853 posted

    Intro

    jquery.floatThead is a floating/locked/sticky/fixed table header plugin that requires no special CSS and supports window and overflow scrolling.

    Features:

    • Floats the table header - so that the user can always see it
    • Supports tables with inner scroll bars, or window scrolling
    • Horizontal and vertical scrolling
    • Doesn't clone the thead - so your events stay bound
    • Doesn't mess with your styles
    • Works on any table
    • Requires no special css
    • Works with datatables out of the box
    • Screen reader support
    • Bootstrap3 support

    Requirements:

    • jQuery 1.8 or better (code is 1.9+ compliant)<small>
      or jQuery 1.7 with jQuery UI 1.8.x</small>
    • Internet Exploder 8+, FireFox 10+ or Chrome15+
    • <small>Add this meta tag into your header to placate IE:
      <meta http-equiv="X-UA-Compatible" content="IE=10; IE=9; IE=8; IE=7; IE=EDGE" /></small>

    So the fiddler method is one way, this jquery way appears to be far better.  so far not able to make it work, not clear how to apply to existing table

    Monday, February 24, 2020 6:25 AM
  • User409696431 posted

    Again, you don't show your code/markup for what doesn't work, so it's hard to answer any question.  Also, why show a way that works in fiddler, if you aren't using it?

    Monday, February 24, 2020 5:33 PM
  • User2142845853 posted

    I showed this because I am trying to find a solution, not complain. the one solution caused the width of the header columns to change dramatically.  So I find a plugin that claims to solve problems the first solution has.  Is that not a good idea?

    I also said Im not able to implement the 2nd solution.  downloaded the plugin, also tried with the cdw, and it scrolls the same 

    Tuesday, February 25, 2020 12:13 AM
  • User409696431 posted

    " the one solution caused the width of the header columns to change dramatically."

    What one?  The one in fiddler, which did not do that at all?

    Again, you are not providing any code that you have tried so people can see what is wrong.

    Tuesday, February 25, 2020 1:43 AM
  • User2142845853 posted

    " the one solution caused the width of the header columns to change dramatically."

    What one?  The one in fiddler, which did not do that at all?

    Again, you are not providing any code that you have tried so people can see what is wrong.

    Yes the one in fiddler does it exactly as I said it does, it messes up column spacing.  Perhaps if the columns are 5px wide with 3 letter names you dont notice it. the fiddler one is now superceded by a jquery drop in where in their website it works far better, it mentions how the drop in is better than cloning the header which is all the fiddler is doing, clone and show only if the other is scrolled out of view. In trying to find the solution the dropin is now the superior option for this.   May the discussion now turn to the dropin, the author does not really provide examples

    Tuesday, February 25, 2020 3:41 AM
  • User409696431 posted

    Again, my point is that you have not shown anything to us.  The fiddler you posted does not mess anything up.  If it messes things up in your code, you have to show it.  The other option you tried: again, you haven't shown any code that demonstrates it doesn't work.

    I'll leave you to figure it out on your own, or perhaps someone else can help.

    Tuesday, February 25, 2020 5:23 AM
  • User2142845853 posted

    http://jsfiddle.net/haasey/mb48z7j5/

    here is a close example,

    <body>
            <br>
                <br>
                    
        <div class="wrapper" style="height:300px; overflow-y:auto" >
        <table class="table table-bordered table-striped">
            <thead class="header">
                <tr>
                    <th>a</th>
                    <th>b</th>   
                    <th>c</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td colspan="2">2</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td colspan="2">2</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td colspan="2">3</td>
                </tr>
                <tr>
                    <td>4</td>
                     <td colspan="2">4</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td colspan="2">5</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td colspan="2">6</td>
                </tr>
                <tr>
                    <td>7</td>
                    <td colspan="2">7</td>
                </tr>
                <tr>
                    <td>8</td>
                    <td colspan="2">8</td>
                </tr>
                <tr>
                    <td>9</td>
                    <td colspan="2">9</td>
                </tr>
                <tr>
                    <td>10</td>
                    <td colspan="2">10</td>
                </tr>
                <tr>
                    <td>11</td>
                    <td colspan="2">11</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td colspan="2">12</td>
                </tr>
                <tr>
                    <td>13</td>
                    <td colspan="2">13</td>
                </tr>
                <tr>
                    <td>14</td>
                    <td colspan="2">14</td>
                </tr>
                <tr>
                    <td>15</td>
                    <td colspan="2">15</td>
                </tr>
                <tr>
                    <td>16</td>
                    <td colspan="2">16</td>
                </tr>
                <tr>
                    <td>17</td>
                    <td colspan="2">17</td>
                </tr>
                <tr>
                    <td>18</td>
                    <td colspan="2">18</td>
                </tr>
                <tr>
                    <td>19</td>
                    <td colspan="2">19</td>
                </tr>
                <tr>
                    <td>20</td>
                    <td colspan="2">20</td>
                </tr>
            </tbody>
        </table>
    </div>
    
            
    </body>
    

    Here is the HTML

        $(document).ready(function () {
            var $table = $('.wrapper table');
    
            $table.floatThead({
                //useAbsolutePositioning: true,
                scrollContainer: function ($table) {
                    return $table.closest('.wrapper');
                }
            });
        });

    here is the JavaScript

        . wrapper table thead {
            background-color: #eee;
        }
    
        /*Rendered Floating Table Header*/
        table. floatThead-table {
            border-top: none;
            border-bottom: none;
            background-color: #eee;
        }

    adjust the dot next to wrapper, then connect table.floatThead-table {

    Tuesday, February 25, 2020 2:07 PM
  • User2142845853 posted

    The question is, with the above code snippet, how to make the table STAY FIXED, but scroll, and then use floatTHEAD.  Right now the table scrolls to the top of the page then the float kicks in.  the table must stay in its own region, as if that was a rectangular opening cut into paper that is taped on, the table must stay in that region.  but how...

    Thursday, February 27, 2020 3:05 PM
  • User-474980206 posted

    your question is not clear. The sample works perfectly. Give a sample of the issue.

    Thursday, February 27, 2020 5:03 PM
  • User2142845853 posted

    The question is, with the above code snippet, how to make the table STAY FIXED, but scroll, and then use floatTHEAD.  Right now the table scrolls to the top of the page then the float kicks in.  the table must stay in its own region, as if that was a rectangular opening cut into paper that is taped on, the table must stay in that region.  but how...

    Thursday, February 27, 2020 5:36 PM
  • User2142845853 posted

    whats missing? what doesnt work?

     $demoTable.floatThead({
                        //the pageTop is a global function i have here, it takes care of making the table float under my floated nav
                        top: pageTop,
                        scrollContainer: function($table){
                            return $table.closest('.wrapper');
                        },
                        position: 'absolute'
                    });

    but pageTop is a hidden, secret function that is not available.  so while the demo shows the scrolling table? its not possible (so far) from the code they released

    Thursday, February 27, 2020 11:58 PM
  • User-17257777 posted

    Hi rogersbr,

    The question is, with the above code snippet, how to make the table STAY FIXED, but scroll, and then use floatTHEAD.  Right now the table scrolls to the top of the page then the float kicks in.  the table must stay in its own region, as if that was a rectangular opening cut into paper that is taped on, the table must stay in that region.  but how...

    Not quite sure what you mean. The table is always fixed. If you want to scroll the table you should put your mouse on the table body, and if you want to scroll the window then move it outside.

    Best Regards,

    Jiadong Meng

    Friday, February 28, 2020 9:03 AM
  • User2142845853 posted

    It now has scroll bars on the table, didnt before.  using Inspect, then reload it errors:

    pageTop not found (red letters) or something like that.
    Friday, February 28, 2020 11:15 PM
  • User-17257777 posted

    Hi rogersbr,

    It is clear that you have not declared the pageTop variable. The top option is used to offset from the top of the window where the floating header will 'stick' when scrolling down. The default value is 0.

    Please check the Options section in the document.

    Best Regards,

    Jiadong Meng

    Wednesday, March 4, 2020 9:00 AM