Can you set a variable value based on @media condition... i.e. BS4 breakpoints?

Wappler General How To
#1

As the title says.

Can I set the value or a variable to be either 1 or based on the browser view size/media query min width?

This is basically just determining whether i want my sidebar menu to start opened or closed based on what device the user loads it on.

#2

Hello,
You can use the browser component to check the viewport vidth and change a variable value or a class.

#3

Thanks @Teodor.

This is what i have on the variable, but can;t quite get it to work (tried with Browser>viewport>width as well as Device)

image
image1239×45 8.58 KB

Am i missing some syntax or is there a different way you would do it?

#4

Could you post your code instead of screenshots in the future? It’s easier to inspect/copy.
Your code should be:

browser.device.width > 768 ? 1 : 0
#5

Thanks @Teodor. I’ll do that moving forward, i always pasted screenshots as i thought it would be easier to see the code with the formatting from the code view :slight_smile:

Anyway, that didn’t work as i thought at first, but only because i wanted viewport instead of device, as the device width never changed (always returned 2,560 due to my monitor. 4K incidentally, but with 150% windows scaling, it returned 2,560px)

Once i changed to view port and used your code it worked as i wanted. Thanks.

dmx-bind:value="browser.viewport.width > 768 ? 1 : 0"

Thanks again.

1 Like
#6

Here you can see how to format code in your posts:

1 Like