Data Table, show diferent columns if horizontal/vertical position

1

Hi guys.

I’m building app (PWA) and I have to show a few columns of Data Table when the device is in a vertical position and show all columns when the device is in a horizontal position on an android device (I have to use Screen Orientation API, and it’s not supported on Safari)

Any ideas?

Regards

2

Render one div with the few columns, and have a second hidden div with all the columns. When the device is rotated, hide the first div and reveal the second div. Do this with CSS media queries: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

3

Thanks, let me check

4

Hi kerry

About media queries …Could you help me, please?

First, I’m trying with this to see how works, I want to change the table background when orientation = landscape but doesn’t work, I try on computer (chrome browser)

@media screen and (orientation: landscape) {
    .tabla-general{
        background: RGB(255,25,0,.4);
    }
}

.tabla-general{
    background: RGB(0,0,0,.4);
}
5

If you’re using Chrome, use their dev tools (you can turn it on in their menu) to simulate a device and assign whether it is portrait or landscape.

Try it with a website such as this to see the result: https://robertnyman.com/css3/media-queries/media-queries.html

Here’s where you will find the relevant buttons to click:

css-media-devtools
css-media-devtools582×856 51 KB

6 
var myClass = {};

if(condition == true) {
  myClass = {color: "red"};
}

myClass = {color: "blue"};

console.log(myClass.color) // "blue"

no matter what the condition is,
it will allways return color “blue”

just rewrite it like this:

.tabla-general {
  background: RGB(0,0,0,.4);
}

@media screen and (orientation: landscape) {
  .tabla-general {
    background: RGB(255,25,0,.4);
  }
}
7

Hi Deejay !!

Yes you right, if I changed the order it’s works

Thanks.

8

ok
now that it’s work,
you can do something like this:

.landscape-only {
  display: none;
}

@media screen and (orientation: landscape) {
  .landscape-only {
    display: block;
  }
}

<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="landscape-only"></div>
</div>
9

Nice, works!!! Thank you very much