'Vuetify visibility class not working properly

Following the docs here, I am trying to use a Vuetify visibility class to hide an element on small screens.

Using the following class produces the opposite of what I want removing the element on the larger screen size and adding it to the small one.

 <span class="d-sm-none d-md-flex">
   {{ username }}               
 </span>

I have tried changing the classes to this:

 <span class="d-md-none d-lg-flex">
  {{ username }}               
 </span>

However, this has the same effect - the element appears only on the small screen.

If anyone has any idea why these classes are not working as expected I would appreciate the help.

vue.jsvuetify.js


Solution 1:[1]

You should add a default display, in your case it should be d-none instead of d-sm-none.

<span class="d-none d-md-flex">
    {{ username }}               
</span>

This element will be hidden on small screens and flex on medium screen devices.

Solution 2:[2]

Set a the default display to none, and the other device screens to block.

<span class="d-none d-md-block">
    {{ username }}               
</span>

Solution 3:[3]

I created a sample working code snippet/demo as per this document and it's working fine.

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  
})
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/@mdi/[email protected]/css/materialdesignicons.min.css"/>
<div id="app">
  <v-app id="inspire">
    <div>
      <div class="d-none d-sm-flex">
        Not visible on x-small screens
      </div>
      <div class="d-none d-md-flex">
        Not visible on x-small and small screens
      </div>
      <div class="d-none d-lg-flex">
        Not visible on x-small, small and medium screens
      </div>
    </div>
  </v-app>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Maverick Fabroa
Solution 2 Rohullah Muhammadee
Solution 3 Rohìt Jíndal

Related Questions