Issue in using CSS to styling a vue template
Im doing a login page and im having trouble using css to style vue templates.
Without vue i have it working, here is my code:
HTML
<body class="text-center">
<form class="form-signin">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted">© 2017-2018</p>
</form>
</body>
CSS
html,
body {
height: 100%;
}
body {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
When i do the same thing in a Vue template it doesnt work because im using the tag html and body in the css.
How can i achieve the same result (styling wise) in a vue template without using html and body tag.
Using what was recomended:
with vue
without vue
its working better then before but it still isnt working 100%, i had tried it before and this also happened, any idea on how to fix?
html css vue.js vuejs2
asked Dec 29 '18 at 17:00
Bernardo FerreiraBernardo Ferreira
133
|
show 6 more comments
Im doing a login page and im having trouble using css to style vue templates.
Without vue i have it working, here is my code:
HTML
<body class="text-center">
<form class="form-signin">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted">© 2017-2018</p>
</form>
</body>
CSS
html,
body {
height: 100%;
}
body {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
When i do the same thing in a Vue template it doesnt work because im using the tag html and body in the css.
How can i achieve the same result (styling wise) in a vue template without using html and body tag.
Using what was recomended:
with vue
without vue
its working better then before but it still isnt working 100%, i had tried it before and this also happened, any idea on how to fix?
html css vue.js vuejs2
asked Dec 29 '18 at 17:00
Bernardo FerreiraBernardo Ferreira
133
are you working with single file component? or just defining your component likeVue.omponent('comp-name',{template:...})
– Boussadjra Brahim
Dec 29 '18 at 17:11
its a single file component
– Bernardo Ferreira
Dec 29 '18 at 17:31
could you show how have you did that so far and the structure of your project?
– Boussadjra Brahim
Dec 29 '18 at 17:33
its a vue cli project and this is a view, its a login.vue file, u want me to show u the code i have for the view?
– Bernardo Ferreira
Dec 29 '18 at 17:45
did you try my solution by that wrapper andheight:100%?
– Boussadjra Brahim
Dec 29 '18 at 17:49
|
show 6 more comments
Im doing a login page and im having trouble using css to style vue templates.
Without vue i have it working, here is my code:
HTML
<body class="text-center">
<form class="form-signin">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted">© 2017-2018</p>
</form>
</body>
CSS
html,
body {
height: 100%;
}
body {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
When i do the same thing in a Vue template it doesnt work because im using the tag html and body in the css.
How can i achieve the same result (styling wise) in a vue template without using html and body tag.
Using what was recomended:
with vue
without vue
its working better then before but it still isnt working 100%, i had tried it before and this also happened, any idea on how to fix?
html css vue.js vuejs2
asked Dec 29 '18 at 17:00
Bernardo FerreiraBernardo Ferreira
133
Im doing a login page and im having trouble using css to style vue templates.
Without vue i have it working, here is my code:
HTML
<body class="text-center">
<form class="form-signin">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted">© 2017-2018</p>
</form>
</body>
CSS
html,
body {
height: 100%;
}
body {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
When i do the same thing in a Vue template it doesnt work because im using the tag html and body in the css.
How can i achieve the same result (styling wise) in a vue template without using html and body tag.
Using what was recomended:
with vue
without vue
its working better then before but it still isnt working 100%, i had tried it before and this also happened, any idea on how to fix?
html css vue.js vuejs2
html css vue.js vuejs2
asked Dec 29 '18 at 17:00
Bernardo FerreiraBernardo Ferreira
133
asked Dec 29 '18 at 17:00
Bernardo FerreiraBernardo Ferreira
133
edited Dec 29 '18 at 18:12
Bernardo Ferreira
asked Dec 29 '18 at 17:00
Bernardo FerreiraBernardo Ferreira
133
asked Dec 29 '18 at 17:00
Bernardo FerreiraBernardo Ferreira
133
asked Dec 29 '18 at 17:00
Bernardo FerreiraBernardo Ferreira
133
133
are you working with single file component? or just defining your component likeVue.omponent('comp-name',{template:...})
– Boussadjra Brahim
Dec 29 '18 at 17:11
its a single file component
– Bernardo Ferreira
Dec 29 '18 at 17:31
could you show how have you did that so far and the structure of your project?
– Boussadjra Brahim
Dec 29 '18 at 17:33
its a vue cli project and this is a view, its a login.vue file, u want me to show u the code i have for the view?
– Bernardo Ferreira
Dec 29 '18 at 17:45
did you try my solution by that wrapper andheight:100%?
– Boussadjra Brahim
Dec 29 '18 at 17:49
|
show 6 more comments
are you working with single file component? or just defining your component likeVue.omponent('comp-name',{template:...})
– Boussadjra Brahim
Dec 29 '18 at 17:11
its a single file component
– Bernardo Ferreira
Dec 29 '18 at 17:31
could you show how have you did that so far and the structure of your project?
– Boussadjra Brahim
Dec 29 '18 at 17:33
its a vue cli project and this is a view, its a login.vue file, u want me to show u the code i have for the view?
– Bernardo Ferreira
Dec 29 '18 at 17:45
did you try my solution by that wrapper andheight:100%?
– Boussadjra Brahim
Dec 29 '18 at 17:49
are you working with single file component? or just defining your component like
Vue.omponent('comp-name',{template:...})– Boussadjra Brahim
Dec 29 '18 at 17:11
are you working with single file component? or just defining your component like
Vue.omponent('comp-name',{template:...})– Boussadjra Brahim
Dec 29 '18 at 17:11
its a single file component
– Bernardo Ferreira
Dec 29 '18 at 17:31
its a single file component
– Bernardo Ferreira
Dec 29 '18 at 17:31
could you show how have you did that so far and the structure of your project?
– Boussadjra Brahim
Dec 29 '18 at 17:33
could you show how have you did that so far and the structure of your project?
– Boussadjra Brahim
Dec 29 '18 at 17:33
its a vue cli project and this is a view, its a login.vue file, u want me to show u the code i have for the view?
– Bernardo Ferreira
Dec 29 '18 at 17:45
its a vue cli project and this is a view, its a login.vue file, u want me to show u the code i have for the view?
– Bernardo Ferreira
Dec 29 '18 at 17:45
did you try my solution by that wrapper and
height:100%?– Boussadjra Brahim
Dec 29 '18 at 17:49
did you try my solution by that wrapper and
height:100%?– Boussadjra Brahim
Dec 29 '18 at 17:49
|
show 6 more comments
1 Answer
1
active
oldest
votes
Please read carefully documentation on how vue works. Usually vue connects to div#app and all going on there, so writing styles inside a component you can't get to body and html tags. If you really need to have these styles to those tags you can use outer CSS file and connect it to HTML. But try to avoid doing some CSS in direct index.html because later you might forget where you did this, so you will spend a lot of time trying to find that.
I don't see any reason to do like you want it. It's easy to do without touching html and body.
edited Jan 21 at 21:59
My Sharona
1539
answered Dec 29 '18 at 21:45
webmintwebmint
1091
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53971548%2fissue-in-using-css-to-styling-a-vue-template%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Please read carefully documentation on how vue works. Usually vue connects to div#app and all going on there, so writing styles inside a component you can't get to body and html tags. If you really need to have these styles to those tags you can use outer CSS file and connect it to HTML. But try to avoid doing some CSS in direct index.html because later you might forget where you did this, so you will spend a lot of time trying to find that.
I don't see any reason to do like you want it. It's easy to do without touching html and body.
edited Jan 21 at 21:59
My Sharona
1539
answered Dec 29 '18 at 21:45
webmintwebmint
1091
add a comment |
Please read carefully documentation on how vue works. Usually vue connects to div#app and all going on there, so writing styles inside a component you can't get to body and html tags. If you really need to have these styles to those tags you can use outer CSS file and connect it to HTML. But try to avoid doing some CSS in direct index.html because later you might forget where you did this, so you will spend a lot of time trying to find that.
I don't see any reason to do like you want it. It's easy to do without touching html and body.
edited Jan 21 at 21:59
My Sharona
1539
answered Dec 29 '18 at 21:45
webmintwebmint
1091
add a comment |
Please read carefully documentation on how vue works. Usually vue connects to div#app and all going on there, so writing styles inside a component you can't get to body and html tags. If you really need to have these styles to those tags you can use outer CSS file and connect it to HTML. But try to avoid doing some CSS in direct index.html because later you might forget where you did this, so you will spend a lot of time trying to find that.
I don't see any reason to do like you want it. It's easy to do without touching html and body.
edited Jan 21 at 21:59
My Sharona
1539
answered Dec 29 '18 at 21:45
webmintwebmint
1091
Please read carefully documentation on how vue works. Usually vue connects to div#app and all going on there, so writing styles inside a component you can't get to body and html tags. If you really need to have these styles to those tags you can use outer CSS file and connect it to HTML. But try to avoid doing some CSS in direct index.html because later you might forget where you did this, so you will spend a lot of time trying to find that.
I don't see any reason to do like you want it. It's easy to do without touching html and body.
edited Jan 21 at 21:59
My Sharona
1539
answered Dec 29 '18 at 21:45
webmintwebmint
1091
edited Jan 21 at 21:59
My Sharona
1539
edited Jan 21 at 21:59
My Sharona
1539
edited Jan 21 at 21:59
My Sharona
1539
1539
answered Dec 29 '18 at 21:45
webmintwebmint
1091
answered Dec 29 '18 at 21:45
webmintwebmint
1091
answered Dec 29 '18 at 21:45
webmintwebmint
1091
1091
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53971548%2fissue-in-using-css-to-styling-a-vue-template%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
are you working with single file component? or just defining your component like
Vue.omponent('comp-name',{template:...})– Boussadjra Brahim
Dec 29 '18 at 17:11
its a single file component
– Bernardo Ferreira
Dec 29 '18 at 17:31
could you show how have you did that so far and the structure of your project?
– Boussadjra Brahim
Dec 29 '18 at 17:33
its a vue cli project and this is a view, its a login.vue file, u want me to show u the code i have for the view?
– Bernardo Ferreira
Dec 29 '18 at 17:45
did you try my solution by that wrapper and
height:100%?– Boussadjra Brahim
Dec 29 '18 at 17:49