Any news on ticket 11455 regarding @media CSS queries not working?

Looking at the thread in the ticket it is acknowledged there that it is not resolved and yet the status is marked as fixed. I’ve been trying to implement an @media print style class but it hasn’t been working in 7.0.7.

Here is the ticket reference:
http://dev.vaadin.com/ticket/11455

Here is my SCSS:


	@media print {
		.v-horizontallayout.v-layout.v-horizontal.v-widget.sidebar-and-divider.v-horizontallayout-sidebar-and-divider.v-has-height {
			display:none;
			& * {
				display:none;
			}
		}
	}

Here is the CSS that is generated (including all of my other media references):


	
.themename {
	@media screen and (max-device-width: 480px) and (orientation: portrait) {
}
	@media screen and (max-device-width: 640px) and (orientation: landscape) {
}
	@media screen and (max-device-width: 640px) {
}
	@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
}
	@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
}
	@media screen and (min-width: 1024px) {
}
	@media screen and (min-aspect-ratio: 1/1) {
}
	@media print {
	.v-horizontallayout.v-layout.v-horizontal.v-widget.sidebar-and-divider.v-horizontallayout-sidebar-and-divider.v-has-height {
		display: none;
		
	}
	.v-horizontallayout.v-layout.v-horizontal.v-widget.sidebar-and-divider.v-horizontallayout-sidebar-and-divider.v-has-height * {
		display: none;
		background: red;
	}
}
}

You will notice that these @media queries have been processed, but are still formatted for SCSS, below a .themename (replace this with the name of your root theme name) class.

Many thanks for your help on this,

Andrew

I’m not sure if anyone else is looking to use this now but for anyone looking this up, I thought I’d mention that I have found a work around to allow @media statement to work, place it inside your styles.scss file. The key is that it must be placed at the top most level of CSS, inside the @media statement it appears all scss rules work as required.

.applicationCSS {
	@include applicationCSS;
}

@media print {
	.sidebar-and-divider {
		display:none;
		& * {
			display:none;
		}
	}
}

Thanks Andrew. Not thinking, I did the same by including inmy theme scss.
It is nesting the @media queries like this, which is wrong :slight_smile:

.applicationCSS @media print {
    .sidebar-and-divider {
       display:none;
      & * {
          display:none;
      }
  }
}

Also, remember to adjust your scope to included your theme prefix so that it will properly overide any existin theme stylings. ie,

.applicationCSS {
    @include applicationCSS;
 }

@media print {
    .applicationCSS .sidebar-and-divider {
       display:none;
      & * {
          display:none;
      }
  }
}

Just to point out, there’s a new ticket for this issue:
http://dev.vaadin.com/ticket/11838

can anyone please guide me how to use media queries in vaadin 7, still i think it don’t work, vaadin sass compailer fails to compile media queries…

Hi,

I haven’t tested this in a while, but at least you can work around any issues by placing your media query rules in a separate, normal CSS file (i.e. not .scss), which you just @import regularly in your main stylesheet. This way those rules will not run through the Sass compilation.

Can you post an example how you author your SCSS and what the output looks like?

Thank you Jouni!!, i think using it in normal CSS will be an added idea.

I did as like you showed in one of your responsive workshop.
https://vaadin.com/blog/-/blogs/responsive-layouts-with-vaadin-and-sass
But even though compiler was faling to compile media queries. May be i was missing something, i don’t know.

Jouni, could you please guide me how to use jquery in vaadin, basically i am a UI developer and have less idea on JAVA.
I got to know that to use jquery we have to do java level server call.

I think my media queries deosn’t work … :confused:

This is not working.

No matter if I put my media queries in any of both .scss files I have in my project (one for theme, the other one is the bare “styles.scss”), it won’t work.

If I put it in my regular “styles.css” it will work, but as this files is generated dynamically on each compile, I’ll lose my modification each time. And it’s very easy so forget it and lose everything.

EDIT:

Also, attempting what Jouni Koivuviita recommended 3 years ago won’t work for me.
Neither placing it directly in any of the .scss files nor importing them from a regular .css file (I tried it in styles.css, via @import “myfile.css”, then adding an @include myfile) will work. And it will fail with the following error:

de juny 06, 2017 10:18:18 AM com.vaadin.sass.internal.handler.SCSSErrorHandler severe
SEVERE: Mixin Definition: myfile not found
Compiling theme “VAADIN\themes\thMyProject” failed

Oh my lord, please take me soon…

Pere: the error message says the mixins “myfile” is not found. When you import a regular .css file, you don’t need to include that separately. Including applies only for Sass mixins. So remove “@include myfile;” from your Sass.

Media queries work if you place the rules at the root level of your stylesheet, meaning that it is not wrapped inside any selectors. The standard Sass compiler supports that, but our own Java version doesn’t.

So you can’t do this:

styles.scss

.mytheme {
  @media (max-width: 400px) {
    ...
  }
}

But this works:

styles.scss

@media (max-width: 400px) {
  ...
}

Hope this helps!

Hi Jouni,

Definitely your message has been of great help. Previously I tried several combinations including adding my media queries at the root level, but I was still @including myfile. I’m not much into Sass, but usually I find confusing documentation about it and it seems that behaviour often depends on implementation (?). But anyway, in this case it was my fault.

Also take into account not to include it in an already included file, as I was doing, too. I ended putting it inside my styles.scss, on the 1st line.