How to change this material design and pull the form to right side in css html?

Question

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Bootstrap Material Design">
<meta name="keywords" content="Bootstrap Material Design, Sass">
<meta name="author" content="Federico Zivolo, Kevin Ross, and Bootstrap Material Design contributors">

<title>

  Login Form

</title>


<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">


 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css">


  </head>
  <body>
    <style type="text/css">
html,
body {
    height: 100%;
}
html {
    display: table;
    margin: auto;
}
body {
    display: table-cell;
    vertical-align: middle;
}
.margin {
  margin: 0 !important;
}
.row {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    min-width: 300px;
}
</style>

<div id="login-page" class="row">
    <div class="col s12 z-depth-6 card-panel">
  <form class="form-signin m-x-auto">
       <div class="row">
          <div class="input-field col s12 center">
            <img src="../assets/img/logo.png" alt="" class="responsive-img valign profile-image-login">
            <p class="center login-form-text">Login Form</p>
          </div>
        </div>
    <div class="row margin">
          <div class="input-field col s12">
            <i class="mdi-social-person-outline prefix"></i>
            <input class="validate" id="email" type="email" required="">
            <label for="email" data-error="wrong" data-success="right" class="center-align">Email</label>
          </div>
        </div>
    <div class="row margin">
          <div class="input-field col s12">
            <i class="mdi-action-lock-outline prefix"></i>
            <input class="validate" id="password" type="password" required="">
            <label for="password">Password</label>
          </div>
        </div>
            <div class="row">          
          <div class="input-field col s12 m12 l12  login-text">
              <input type="checkbox" id="remember-me" />
              <label for="remember-me">Remember me</label>
          </div>
        </div>
        <div class="row">
          <div class="input-field col s12">
            <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
          </div>
        </div>
        <div class="row">
          <div class="input-field col s6 m6 l6">
            <p class="margin medium-small"><a href="/register">Register Now!</a></p>
          </div>
          <div class="input-field col s6 m6 l6">
              <p class="margin right-align medium-small"><a href="forgot-password.html">Forgot password?</a></p>
          </div>          
        </div>
  </form>

</div>

</div>
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>

  </body>
</html>

This is my code. I am using material-design and i am not able to move the form to the right side. ho ca I able to move the form to right side as given in the image

I am not able to move the form to the right side. Please help me to have a solution in this case

This is my jsfiddle. I need to change this according to the image attached

Answer 1

Here is a jsfiddle which does what you want. The trick was to add two divs into the card-panel : one to hold the image and one for the form. Note the col s6 classes on both of these divs in order to make them fit horizontally.

Answer 2

I have adjusted your CSS to achieve the alignment and also to allow for easy insertion of an image later.

All changes are documented in the CSS. Hope this helps.

 html, body { height: 100%; width: 100%; /* Added */ } html { display: table; /* margin: auto; Removed */ } body { display: table-cell; vertical-align: middle; } .margin { margin: 0 !important; } .row { margin-left: auto; margin-right: auto; margin-bottom: 20px; min-width: 300px; } #login-page { /* Added to allow for easy insert of image later */ display: flex; justify-content: flex-end; /* This actually moves the form to the right */ width: 100%; } .row .col.s12 { /* Added to overwrite width: 100% */ width: auto!important; }

 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css"> <div id="login-page" class="row"> <div class="col s12 z-depth-6 card-panel"> <form class="form-signin mx-auto"> <div class="row"> <div class="input-field col s12 center"> <img src="../assets/img/logo.png" alt="" class="responsive-img valign profile-image-login"> <p class="center login-form-text">Login Form</p> </div> </div> <div class="row margin"> <div class="input-field col s12"> <i class="mdi-social-person-outline prefix"></i> <input class="validate" id="email" type="email" required=""> <label for="email" data-error="wrong" data-success="right" class="center-align">Email</label> </div> </div> <div class="row margin"> <div class="input-field col s12"> <i class="mdi-action-lock-outline prefix"></i> <input class="validate" id="password" type="password" required=""> <label for="password">Password</label> </div> </div> <div class="row"> <div class="input-field col s12 m12 l12 login-text"> <input type="checkbox" id="remember-me" /> <label for="remember-me">Remember me</label> </div> </div> <div class="row"> <div class="input-field col s12"> <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> </div> </div> <div class="row"> <div class="input-field col s6 m6 l6"> <p class="margin medium-small"><a href="/register">Register Now!</a></p> </div> <div class="input-field col s6 m6 l6"> <p class="margin right-align medium-small"><a href="forgot-password.html">Forgot password?</a></p> </div> </div> </form> </div> </div> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>

How to change this material design and pull the form to right side in css html?

Question

2 answers

solution1
0 2018-03-21 10:01:11

solution2
0 2018-03-21 10:02:31

How to change this material design and pull the form to right side in css html?

Question

2 answers

solution1 0 2018-03-21 10:01:11

solution2 0 2018-03-21 10:02:31

solution1
0 2018-03-21 10:01:11

solution2
0 2018-03-21 10:02:31