Topic: It seems that css not working

Estinto pro asked 5 years ago


Q1: Codes of the Vue page. https://mdbootstrap.com/snippets/vue/estinto/525065 It seems that button has only plain appearance and same gray color. No margin, no color, no shadow...

Q2: I add dependency to package.json and installed. But when I run audit, it still says npm ERR! code ELOCKVERIFY npm ERR! Errors were found in your package-lock.json, run npm install to fix them. npm ERR! Missing: mdbvue@git+https://oauth2:[my token]@git.mdbootstrap.com/mdb/vue/vu-pro.git

what shall I do?

Thanks!


Estinto pro commented 5 years ago

I also tried npm install from local .tgz file from download. It works in demo but not my project. I create project using vue create and use default settings. There might be conflicts but I've no idea now..


Magdalena Dembna staff answered 5 years ago


Hi, as for the first problem I see the problem in the import statement. The following snippet works fine:

<template>
  <div class="todo-item">
    <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
    <mdb-btn color="primary">Primary</mdb-btn>

    <!-- Default button -->
    <mdb-btn color="default">Default</mdb-btn>

    <!-- Secondary button -->
    <mdb-btn color="secondary">Secondary</mdb-btn>

    <!-- Indicates a successful or positive action -->
    <mdb-btn color="success">Success</mdb-btn>

    <!-- Contextual button for informational alert messages -->
    <mdb-btn color="info">Info</mdb-btn>

    <!-- Indicates caution should be taken with this action -->
    <mdb-btn color="warning">Warning</mdb-btn>

    <!-- Indicates a dangerous or potentially negative action -->
    <mdb-btn color="danger">Danger</mdb-btn>

    <mdb-btn color="primary"><mdb-icon icon="magic" class="mr-1"/> Left</mdb-btn>
    <mdb-btn color="default">Right <mdb-icon icon="magic" class="ml-1"/></mdb-btn>
  </div>
</template>

<script>
  import { mdbBtn } from 'mdbvue';

export default {
    name: "HelloWorld",
    props: ["todo"],
    methods:{
        markComplete(){
            this.todo.completed = !this.todo.completed
        }
    },
    components:{
        mdbBtn
    }
};

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .todo-item{
    background: #f4f4f4;
    padding: 10px;
    border-bottom: 1px #ccc dotted;
}

.is-complete{
    text-decoration: line-through;
}

.del{
    background: #ff0000;
    color: #fff;
    border: none;
    padding: 5px 9px;
    border-radius: 50%;
    cursor: pointer;
    float: right;
}

</style>

As for the second problem it's quite hard to say anything without snippet from package.json. If you're still experiencing difficulties, please share the code (don't forget to remove your token). Kind regards, Magdalena


Estinto pro answered 5 years ago


import Vue from 'vue' import 'bootstrap-css-only/css/bootstrap.min.css'; import 'mdbvue/build/css/mdb.css'; import App from './App.vue'

works for me.

Solved.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 5.1.1
  • Device: Macbook Pro
  • Browser: chrome
  • OS: Lastest Mojave
  • Provided sample code: No
  • Provided link: Yes
Tags