hideAtMedia behaves unexpectedly

Bob

Asked On January 22, 2020 07:37 AM UTC

Hello,

I am trying to get hideAtMedia working for my vue solution (4.1.2) trying to make the grid more responsive.

As stated in the dox, columns should be made visible/invisible by using a media query.

Although this works on first load, this does not seem to work if the browser window is resized after the initial load; i.e. when I load it maximized all columns are visible (that is correct), but when I downsize the browser window without reloading the page, the columns are still visible.

This is a problem as users can, for instance, rotate their tablet at any time to get more vertical screen room.

Is this by design?
How can I get it to re-evaluate?

This is my .vue page:

<template>
  <ejs-grid id="gen2Grid" ref="gen2Grid" :dataSource="data" >
    <e-columns>
      <e-column field="mt" headerText="Material">e-column>
      <e-column field="mst" headerText="Service" hideAtMedia="(min-width: 800px)">e-column>
    e-columns>
  ejs-grid>
template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { GridPlugin } from '@syncfusion/ej2-vue-grids';

@Component
export default class GenWorklistComponent extends Vue {
  public data: any = [
    {
      mt: '2445/01, BAVARIA, FASH X-SB 6-25',
      mst: 'Jaarlijks onderhoud',
    },
    {
      mt: '2445/01, BAVARIA, FASH X-SB 6-25 met extra vulling',
      mst: 'Jaarlijks onderhoud',
    },
  ];

}
script>

<style scoped lang="scss">
@import '../../node_modules/@syncfusion/ej2-vue-grids/styles/material.css';
style>

Reply | Reply with quote

Dhivya Rajendran [Syncfusion]

Replied On January 27, 2020 10:21 AM UTC

Hi Bob,

Thanks for contacting Syncfusion support.

We have checked the reported problem in the Intel Atom Z3770 tablet and it is working fine at our end. Please share the below details, which will help us to validate further at our end and to provide a better solution as soon as possible.

Share the device details and browser details
The reported problem occurred in any particular device/bowser or all devices?
Share screenshot of the problem
Syncfusion package version details

Regards,

R.Dhivya

Reply | Reply with quote

Bob

Replied On January 29, 2020 09:31 AM UTC

Hi, thank you for your answer.

I tried this on a PC actually using Windows 10 10.0.18362, Chrome 79.0.3945.130 and FireFox 72.0.1 (64-bits), Syncfusion version 17.4.43 (ej2-vue-grids).

I haven't tried this on a mobile device yet as debugging options for those devices are limited and ofc it should work on a PC as well.

Resizing the browser window after page load does not change column visibility.

It feels like the media query is only being evaluated on page load.

When reloading the content in the resized window (just hit F5), the column *is* hidden, per the mediaquery.

I have added 3 screenshots (in order) to illustrate the problem.

Thanks,

Bob

Attachment: 20200129__synfusion_support_e01f3076.zip

Reply | Reply with quote

Dhivya Rajendran [Syncfusion]

Replied On January 31, 2020 01:21 PM UTC

Hi Bob,

Thanks for sharing the details.

We are able to reproduce the reported issue at our end. We have logged a bug report for the reported issue as “media query (hideAtMedia) is not working properly”. Thank you for taking time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle ) and including the defect fix in our upcoming February 12 Patch Release.

Until then we appreciate your patience.

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.

https://www.syncfusion.com/feedback/11704/media-query-hideatmedia-is-not-working-properly

Regards,

R.Dhivya

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
150858	Jan 22,2020 07:36 AM UTC	Jan 31,2020 01:21 PM UTC	Vue	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US