CODEWITHSUNDEEP
angularangular-flex-layout
SGR
SGR

Reputation: 2417

Flex layout issue tablets/mobiles in angular 4

This my login page in laptop

enter image description here

But when it comes to tab size.It is not fitting to full height of the screen.I have tried many css properties still no use.Unable to configure that which property is overriding.

Hers is the tab-size screenshot enter image description here

This my html code(login-page.component.html)

    <!doctype html>
    <html>
       <head>
       </head>
       <body> 

          <div class="ylet_header">
              <p class="ylet_business">MY Business</p>
          </div>

            <div class="container" fxLayout="row" fxLayout.xs="column" 
                            fxLayoutWrap fxLayoutGap="0%">

                 <div fxFlex="76%" class="left-sidebar">
                     <img id="ylet_img" src="assets\img\ylet_1.jpg">
                 </div>  
                 <div fxFlex="25%" style="background-color:pink;"  id="Login- 
                      form">
                       <p class="login" align="left">Login</p>

                         ...Login page content goes here.....

                      <router-outlet></router-outlet>
                  </div>

            </div>


       </body>
    </html>

and the css (login-page.component.css) is like this

    .login {
       color: #cc00cc;
       font-size: 20px;
       margin-top: 80px;
     }
    .ylet_header {
       background-color: #990099;
       height: 45px;
       width: 100%;
       position: absolute;
       top: 0;
       left: 0;
     }
   .ylet_business {
      color: #ffffff;
      font-size: 18px;
      text-align: left;
      text-indent: 5%;
      margin-top: 11px;
   }
  .left-sidebar {
      width: 100%;
      height: auto;
      top: 0;
      left: 0;
   }
 .left-sidebar img {
    min-width: 100%;
    margin-left: -16px;
    background-size: cover;
   }
  .forget-sec {
    bottom: 0;
  }
  .ms-TextField-field {
   margin-left: -12px !important;
   }
  @media (max-width: 600px) {
   .left-sidebar {display: none;}
   }

One more issue is that,I want align forget password on the bottom,fixed for every devices.

Upvotes: 2

Views: 471

Answers (1)

slashpm
slashpm

Reputation: 214

So in my comment I meant the following as working example.

extend css with:

   .container {
     display: flex;
     height: 100vh;
   }

   #ylet_img {
     background-image: url(https://imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg);
     height: 100%;
     background-size: cover;
     background-position: center;
   }

slightly simplified html as I am using pure css here (no angular):

<html>
   <head>
   </head>
   <body> 

      <div class="ylet_header">
          <p class="ylet_business">MY Business</p>
      </div>

        <div class="container" >

             <div style="flex: 0 0 75%" class="left-sidebar">
             <div id="ylet_img"></div>
             </div>  
             <div style="flex: 0 0 25%" style="background-color:pink;"  id="Login- 
                  form">
                   <p class="login" align="left">Login</p>

                     ...Login page content goes here.....

                  <router-outlet></router-outlet>
              </div>

        </div>
   </body>
</html>

I hope it helps and this was the effect you wanted to achieve :)

Upvotes: 1

Related Questions