Login page

Asked

Viewed 460 times

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

inserir a descrição da imagem aqui

The ash was halfway down the page

And this is the original

inserir a descrição da imagem aqui

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

html angular adminlte

  • Try to create a stackblitz with your code, it will be difficult for someone to respond without being able to inspect the gift.

  • how do I send my project to the?

  • Create a new angular design and copy as little as possible to reproduce your problem.

  • I’m trying and I’m not getting

  • I think I got more or less.. Here

  • I don’t understand what the problem is? What’s wrong with stackBlitz?

  • It is not formatting properly, I believe it is not detecting the bootstrap

  • Take a look here and another, there showed the normal background, but in mine, that background color only goes up to half the page

  • Here for me in Stack Blitz is normal http://prntscr.com/kixuh9

  • Only in my project is getting thus

  • @adventistaam try other browsers and compare the code with the original Admin LTE.

  • Yes I tested it. They’re the same

  • 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.

  • No stackblitz is not taking the sources of social networks... nor formatting the checkbox as I realized

  • Let’s go continue this discussion in chat.

Show 10 more comments

1 answer

0

I had this same problem at Adminlte, for some reason the size of the div login-box is not going to the end of the browser. I just switched the element body of index.html for this:

<body class="hold-transition fixed sidebar-mini sidebar-collapse" style="background:#d2d6de;">

Edit: your color is the default, I had lightened a little more the background.

Browser other questions tagged html angular adminlte

You are not signed in. Login or sign up in order to post.