Prevent div overflow in Angular

Question

I have an issue with one of my Angular Pages.Below is the Landing Page of My App.

The issue that I am facing is whenever I am clicking Login button without entering any username/pwd, my div overflows as you can see in the image below:

What I've tried so far:

CSS Properties like:

overflow:hidden
max-width
min-width
resize:none

none of them seems to work. Below is the HTML for the same:

 <div style=" background-color: rgba(227, 221, 233, 0.582);">

 <div class="container-custom">
  <div class="row">
    <div class="col-md-7" >
      <div class="card">
        <div class="card-body" style="margin-bottom:1%">
            <h3> What we do?</h3>
            <hr>  
      <p style="text-align:justify">
        Avaali is a consulting and professional services organization 
        focused<br>
        on supporting upper mid to large enterprises to create and execute 
        their Digital roadmap.<br>
        We are headquartered in Bengaluru, India. We believe that Digital is 
        going to be the biggest<br>
        enabler of revenue to enterprises. We support our customers to 
        maximize value from digital<br>
        and help them translate this value in the form of innovative 
        customer experience,<br>
        highly engaging customers, internal process efficiencies, reduced 
        costs and delivering<br>
        your organization’s stated objective Lorem ipsum dolor sit amet, 
        consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 
        labore et dolore magna aliqua. Ut enim ad.
      </p>

      <hr>
      <p>
        Already registered?
        Please login to the portal using your email address and password 
        <br>

      </p>

        </div>
      </div>
    </div>
    <div class="col-md-5"  style="position:relative">
      <div class="card">

        <div class="card-body">
          <br>
      <h4>Velocious Rapid - Sign In</h4>

      <br>
      <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
        <div class="form-group" style="margin-top:23px">
          <input type="username" formControlName="username" id="username" 
          placeholder="Email Id" name="username"
            class="form-control" [ngClass]="{ 'is-invalid': submitted && 
            f.username.errors }" />
          <div *ngIf="submitted && f.username.errors" class="invalid- 
           feedback">
            <div *ngIf="f.username.errors.required">Username is 
            required</div>
          </div>
        </div>
        <div class="form-group" style="margin-top: 35px">
          <input type="password" formControlName="password" id="password" 
            placeholder="Password" name="password"
            class="form-control" [ngClass]="{ 'is-invalid': submitted && 
            f.password.errors }" />
          <div *ngIf="submitted && f.password.errors" class="invalid- 
          feedback">
            <div *ngIf="f.password.errors.required">Password is 
           required</div>
          </div>
        </div>
        <button class="btn btn-primary" type="submit" 
        style="float:right;background-color: #0072aa">Login</button>
        <div *ngIf="error" class="alert alert-danger" 
         style="width:70%">Username or Password is invalid</div>
      </form>
      <br>
      <br>
      <hr>

    <p>New User ? <a href="/"> Register Here</a></p>
     <p> <a routerLink="/vendorOnboarding">Vendor Onboarding</a></p>
     <p> <a href="/">Forgot Password?</a></p>


        </div>
      </div>
    </div>
    </div>
  </div>

Request some expert advice. Thanks !

If you don't want this div to change size, why not style the error messages and position them absolutely otherwise upgrade to bootstrap 4 and that will make both your columns expand at the same time so it doesn't look like they overflow — Pete
– Pete, Commented Dec 5, 2018 at 13:40
It would be good if you disable the login (submit) button. like <button class="btn btn-primary" type="submit" [disabled]="!loginForm.valid" style="float:right;background-color: #0072aa">Login</button> — Ankit
– Ankit, Commented Dec 5, 2018 at 13:41
when it shows errors below the fields in your div it take some space thats why div is going big — Salman Saleem
– Salman Saleem, Commented Dec 5, 2018 at 13:41

Rahul · Accepted Answer · 2018-12-06 06:52:47Z

1

you need to set your error message position to absolute like below

.invalid-feedback {
    position: absolute;
}

edited Dec 6, 2018 at 6:52

answered Dec 5, 2018 at 14:01

Rahul

4,3741 gold badge13 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Prevent div overflow in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related