Menu
Im using vue cli to create a project but im having 'errors' with the styles
Im just testing a component that have 3 rows 20vh 50vh 30vh
<template>
<div class="gridContact">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
</template>
<style scoped>
.gridContact {display: grid; grid-template-areas: 'one' 'two' 'three'; box-sizing: border-box;}
.one {grid-area: one; background: rebeccapurple; box-sizing: border-box; height: 20vh; }
.two {grid-area: two; background: cadetblue; box-sizing: border-box; height:50vh;}
.three {grid-area: three; background: coral; box-sizing: border-box; height: 30vh; }
</style>
And my app.vue
*{padding: 0; margin: 0; box-sizing: border-box;}
I got this style (the style needed)
But if i refresh the page i got this white space that brokes the style, and then if reload sometime again it looks good, and then if i refresh i got the same white space, why?
Checking this behavior on the developer tools i saw this attribute injected, of course that margin its not inserted by me, i think this is a behavior made it in vue, maybe the scoped attribute?but why ? whats for? how to fix it?
953
Build your own componentsStyled-components gives you the freedom to make your own custom styled components in Vue. You can style the HTML tags and give them the name of your choice to make your code more readable.
Adding CSS classes in Vue We should apply the button CSS classes to the <button> in our ToDoForm component. Since Vue templates are valid HTML, this is done in the same way to how you might do it in plain HTML — by adding a class="" attribute to the element.
In Vue. js, we can add an inline style to our element by binding the style attribute in the HTML tag. For reference, :style is shorthand for v-bind:style . Inline styling can be done in two ways: using object syntax or array syntax.
As you don't know from where body's margin-bottom is applying, like in below example I intentionally added margin-bottom to body and applied your styles too.
.gridContact {display: grid; grid-template-areas: 'one' 'two' 'three'; box-sizing: border-box;}
.one {grid-area: one; background: rebeccapurple; box-sizing: border-box; height: 20vh; }
.two {grid-area: two; background: cadetblue; box-sizing: border-box; height:50vh;}
.three {grid-area: three; background: coral; box-sizing: border-box; height: 30vh; }
body{
margin-bottom:50px;
}
*{padding: 0px; margin: 0px; box-sizing: border-box;}<body>
<div class="gridContact">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
</body>Now I Included !important to apply my css style forcefully and it worked.
.gridContact {display: grid; grid-template-areas: 'one' 'two' 'three'; box-sizing: border-box;}
.one {grid-area: one; background: rebeccapurple; box-sizing: border-box; height: 20vh; }
.two {grid-area: two; background: cadetblue; box-sizing: border-box; height:50vh;}
.three {grid-area: three; background: coral; box-sizing: border-box; height: 30vh; }
body{
margin-bottom:50px;
}
*{padding: 0px !important; margin: 0px !important; box-sizing: border-box;}<body>
<div class="gridContact">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
</body>In Vue when we use a scoped attribute with style tag, then the CSS will apply only to the current components.
As you declared the margin in the *{} and it is not working because of the same thing of using the scoped attribute with the style tag.
https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements
You can use !important with the margin property in *{}.
Vue.js 2 - Remove initial margin from body tag
You can also go through this link: https://vuejsdevelopers.com/2017/05/01/vue-js-cant-help-head-body/
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
