3
I’m learning angular.
I’m using angular 6
I am trying to make the login page of Admin LTE
I imported these files in angular.json
"styles": [
"node_modules/admin-lte/bower_components/bootstrap/dist/css/bootstrap.min.css",
"node_modules/admin-lte/bower_components/font-awesome/css/font-awesome.min.css",
"node_modules/admin-lte/bower_components/Ionicons/css/ionicons.min.css",
"node_modules/admin-lte/bower_components/jvectormap/jquery-jvectormap.css",
"node_modules/admin-lte/dist/css/AdminLTE.min.css",
"node_modules/admin-lte/dist/css/skins/_all-skins.min.css",
"node_modules/admin-lte/plugins/iCheck/square/blue.css",
"src/styles.css"
],
"scripts": [
"node_modules/admin-lte/bower_components/jquery/dist/jquery.min.js",
"node_modules/admin-lte/bower_components/jquery-ui/jquery-ui.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/admin-lte/dist/js/adminlte.min.js",
"node_modules/admin-lte/bower_components/fastclick/lib/fastclick.js",
"node_modules/admin-lte/bower_components/jquery-slimscroll/jquery.slimscroll.min.js",
"node_modules/admin-lte/plugins/iCheck/icheck.min.js"
]
But the gray area of the background is not working on the whole page and it seems that not even the bootstrap is working, while this same import works for the page in general, but I want to leave the login well formatted, as it is in the original
This is my setup
The ash was halfway down the page
And this is the original
All nicely formatted
And this is the code I entered login.component.html
<body class="hold-transition login-page">
<div class="login-box">
<div class="login-logo">
<a href="../../index2.html"><b>Admin</b>LTE</a>
</div>
<!-- /.login-logo -->
<div class="login-box-body">
<p class="login-box-msg">Sign in to start your session</p>
<form action="../../index2.html" method="post">
<div class="form-group has-feedback">
<input type="email" class="form-control" placeholder="Email">
<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="Password">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-8">
<div class="checkbox icheck">
<label>
<input type="checkbox"> Remember Me
</label>
</div>
</div>
<!-- /.col -->
<div class="col-xs-4">
<button type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button>
</div>
<!-- /.col -->
</div>
</form>
<div class="social-auth-links text-center">
<p>- OR -</p>
<a href="#" class="btn btn-block btn-social btn-facebook btn-flat"><i class="fa fa-facebook"></i> Sign in using
Facebook</a>
<a href="#" class="btn btn-block btn-social btn-google btn-flat"><i class="fa fa-google-plus"></i> Sign in using
Google+</a>
</div>
<!-- /.social-auth-links -->
<a href="#">I forgot my password</a><br>
<a href="register.html" class="text-center">Register a new membership</a>
</div>
<!-- /.login-box-body -->
</div>
<!-- /.login-box -->
</body>
Here is the project
Here is the question
Here is the stackblitz
Try to create a stackblitz with your code, it will be difficult for someone to respond without being able to inspect the gift.
– Eduardo Vargas
how do I send my project to the?
– adventistaam
Create a new angular design and copy as little as possible to reproduce your problem.
– Eduardo Vargas
I’m trying and I’m not getting
– adventistaam
I think I got more or less.. Here
– adventistaam
I don’t understand what the problem is? What’s wrong with stackBlitz?
– Eduardo Vargas
It is not formatting properly, I believe it is not detecting the bootstrap
– adventistaam
Take a look here and another, there showed the normal background, but in mine, that background color only goes up to half the page
– adventistaam
Here for me in Stack Blitz is normal http://prntscr.com/kixuh9
– Paulo Henrique
Only in my project is getting thus
– adventistaam
@adventistaam try other browsers and compare the code with the original Admin LTE.
– Paulo Henrique
Yes I tested it. They’re the same
– adventistaam
Without simulating the error gets a little tricky to understand why of the error, try to inspect the elements and verify why it is breaking.
– Paulo Henrique
No stackblitz is not taking the sources of social networks... nor formatting the checkbox as I realized
– adventistaam
Let’s go continue this discussion in chat.
– Paulo Henrique