Bad generated header in grid

6 posts, 0 answers
  1. TREXIMA spol. s r.o.
    TREXIMA spol. s r.o. avatar
    6 posts
    Member since:
    Jul 2018

    Posted 12 Jul 2018 Link to this post

    Hello,

      I use your grid, but in Firefox (61), Edge is bad generated headers with filter (not created scroll part in header and filter row). Chrome rendering is OK.

      Thanks Pavel

  2. Stefan
    Admin
    Stefan avatar
    2913 posts

    Posted 13 Jul 2018 Link to this post

    Hello, Pavel,

    Thank you for the screenshots and details.

    I tried making a similar example but it is working on my end:

    https://stackblitz.com/edit/react-hh9w8z?file=index.js



    If possible, please modify the provided example in order to reproduce the issue and I will happily continue with the investigation.

    Regards,
    Stefan
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. TREXIMA spol. s r.o.
    TREXIMA spol. s r.o. avatar
    6 posts
    Member since:
    Jul 2018

    Posted 16 Jul 2018 in reply to Stefan Link to this post

    I modify sample ( in my project is used metronic template, so sample index.html is bigger):

    https://stackblitz.com/edit/react-wcrmq8?file=index.html

    At the end of html page is part

    <!-- BEGIN: Aside Menu -->
              <div id="m_ver_menu" class="m-aside-menu m-aside-menu--skin-dark m-aside-menu--submenu-skin-dark m-scroller ps ps--active-y" m-menu-vertical="1" m-menu-scrollable="1" m-menu-dropdown-timeout="500" style="position: relative; height: 600px; overflow: hidden;">                    
    </div>

    If I set height: 100px grid is rendered fine and correct. But If I changed height to 700px  (grid is generated at bottom of page and bad)

  4. TREXIMA spol. s r.o.
    TREXIMA spol. s r.o. avatar
    6 posts
    Member since:
    Jul 2018

    Posted 16 Jul 2018 Link to this post

    I minimize sample to:

    https://stackblitz.com/edit/react-j4baeh?file=index.html

    than Edge rendering better (but try to refresh 1x or 2x), but Firefox rendered always bad.

  5. Vasil
    Admin
    Vasil avatar
    1641 posts

    Posted 16 Jul 2018 Link to this post

    Hello,

    The header and the body are two tables in your example, since the grid is scrollable by default. And the custom styles of your page are overriding the syncing between the tables.
    There are 3 options to resolve the issue, you could pick one of them that is most convenient for you:

    - Set width for all of the Columns.
    - Or remove the display: flex from the styles, change it's specificity, or override it for the grid.
    - set scrollable="none" for the Grid

    Regards,
    Vasil
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. TREXIMA spol. s r.o.
    TREXIMA spol. s r.o. avatar
    6 posts
    Member since:
    Jul 2018

    Posted 16 Jul 2018 in reply to Vasil Link to this post

    Thanks for your help
Back to Top