CSS Visibility     

There are some CSS classes that you can use out of the box for common functionality.

Class NameDescription
disabledCursor is changed to notify a ‘disable’ and opacity is set to a lower value.
hiddenSet display to none. Compare with below - the class hidden means the element will not show and will not take up space in the layout.
invisibleSet visibility to hidden. Compare with above - the class invisible means the element will not show, but it will still take up space in the layout.
transparentBackground color is transparent.
dimmedApply dark transparent overlay on top of your element. Do not use on elements which already have :after pseudoelement.
light-dimmedApply white transparent overlay on top of your element. Do not use on elements which already have :after pseudoelement.
highlight-and-fadeAdds a yellow background color and fades it away upon element is displayed.
ellipsisTruncates text and shows ellipsis when not enough space available.
ellipsis-2-linesTruncates text and shows ellipsis when not enough space available on two lines (works only on Webkit browsers).
ellipsis-3-linesTruncates text and shows ellipsis when not enough space available on three lines (works only on Webkit browsers).
z-absolutePositions your element on top of any other component (including Drawer, Modals, Toasts, Layout header/footer, …)

First of all, let’s define what does a small, medium, big or large window means:

Window SizePrefixWidth threshold in pixels
Extra SmallxsUp to 576px
SmallsmUp to 768px
MediummdUp to 992px
LargelgUp to 1200px
Extra LargexlBigger than 1200px

Now on to the window width related CSS classes.

Class NameDescription
xsDisplay only on extra small windows
smDisplay only on small windows
mdDisplay only on medium-sized windows
lgDisplay only on large windows
xlDisplay only on extra large windows

You can also show some DOM element or component if it’s lower than one of the sizes. Same for greater than one of the sizes. Just attach lt- or gt- prefixes, which come from “lower than” and “greater than”. Example: lt-md (display on xs and sm only), lt-xl (display on xs, sm, md and lg windows only), gt-md (display on greater than medium windows: lg and xl).

NOTE
You can combine the visibility classes with the inline class for inline-blocks.
Example : <span class="gt-sm inline">&nbsp;and here is the end of this long sentence.</span>

Visible only on:

Class NameDescription
desktop-onlyVisible only on desktop
mobile-onlyVisible only on mobile
cordova-onlyVisible only on Cordova wrapped Apps
electron-onlyVisible only on Electron wrapped Apps
touch-onlyVisible only on touch capable platforms
mat-onlyVisible only for Material Quasar Theme
ios-onlyVisible only for iOS Quasar Theme
platform-ios-onlyVisible only on an iOS platform
platform-android-onlyVisible only on an Android platform
within-iframe-onlyVisible only when entire website is under an IFRAME tag

Hide on:

Class NameDescription
desktop-hideHide on desktop
mobile-hideHide on mobile
cordova-hideHide on Cordova wrapped Apps
electron-hideHide on Electron wrapped Apps
touch-hideHide on touch capable platforms
mat-hideHide for Material Quasar Theme
ios-hideHide for iOS Quasar Theme
platform-ios-hideHide on iOS platform
platform-android-hideHide on Android platform
within-iframe-hideHide only when entire website is under an IFRAME tag

Also check Quasar Theming > Platform Specific Styles.

NOTE
There is also a non-recommended way to hide DOM elements through Javascript. Read more on Javascript > Environment page.

Class NameDescription
orientation-portraitVisible only when screen orientation is Portrait
orientation-landscapeVisible only when screen orientation is Landscape
Class NameDescription
print-onlyVisible only on print media - hidden on screen media
print-hideVisible on screen media - hidden on print media