3 votes

How to add a class with new css styles to v-dialog, vuetify?

I find myself working with vuetify, using the following v-dialog in a component:

<template>
  <div>
    <!--Indicador-->
      <v-dialog class="vdialognew" v-model="mostrarIndicator" persistent>
        <v-content>
          <v-container fluid fill-height>
            <v-layout align-center justify-center>
                <cube-shadow class="spinnerRotate"></cube-shadow>
            </v-layout>
          </v-container>
        </v-content>
      </v-dialog>
    <!-------------->
  </div>
</template>
<style scoped>
.vdialognew {
  box-shadow: none !important;
  max-width: 610px !important;
}
</style>

As you can see in v-dialog I have added the class vdialognew, to apply those new styles, but when I load the content checking in the browser console, I see that it does not apply the class vdialognew, only. In the same way if I use the property style inside the v-dialog it does not work for me. How can I make such a change.

I am making this modification to eliminate the box behind the green square:

introducir la descripción de la imagen aquí

3voto

Gibrán Points 343

It seems that the use of content-class has conflicts when operating with <style scoped> as mentioned in the following link .

Try placing your class in the global css of your application and use content-class as in the following example . You can also try to remove scoped of your label style .

1 votes

Thank you very much, it worked for me by removing 'scoped' from the 'style' tag and using content-class.

1 votes

+1 Thanks for digging into the problem, I had not taken this into account in my reply .

2voto

Dev. Joel Points 20672

According to the documentation a custom class can be added with the prop content-class

Exm

<v-dialog v-model="mostrarIndicator" persistent content-class="vdialognew" >
   .... 

For this example the value for the width of the dialog is added, using the class. vdialognew

Vue.component('example-dialog',{

data: function () {
    return {
      mostrarIndicator: true
    }
  },
  template: `<v-app id="inspire"> <v-dialog
       v-model="mostrarIndicator" persistent content-class="vdialognew" 
      >

        <v-card>
          <v-card-title
            class="headline grey lighten-2"
            primary-title
          >
            Privacy Policy
          </v-card-title>

          <v-card-text>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </v-card-text>

          <v-divider></v-divider>

        </v-card>
      </v-dialog> </v-app>`,

});
new Vue({
  el: '#app'

})

.vdialognew {
  box-shadow: none !important;
  max-width: 610px !important;
  width : 2500px !important;
}

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.1/dist/vuetify.min.js"></script>

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@1.5.1/dist/vuetify.min.css">

<div id="app">
   <example-dialog />
</div>

0 votes

I have done it, guided by the documentation, but the style does not apply.

0 votes

@JG_GJ check the DOM, is the class added to the dialog? or what styles are you looking to add, maybe the error is from your CSS , it should work, I will try to add an example.

0 votes

Reviewing the DOM, I see that it does apply the class, but when looking for the class among the styles "Styles Tab", the class does not appear with its properties and therefore in the end it does not apply the styles.

HolaDevs.com

HolaDevs is an online community of programmers and software lovers.
You can check other people responses or create a new question if you don't find a solution

Powered by:

X