Question

我的一个Angular页面有问题。下面是我的应用程序的着陆页。

我面临的问题是，只要单击登录按钮而不输入任何用户名/密码，我的div就会溢出，如下图所示：

到目前为止，我已经尝试过：

CSS属性，例如：

溢出：隐藏
最大宽度
最小宽度
调整大小：无

它们似乎都不起作用。以下是相同的HTML：

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

请求一些专家建议。谢谢！

Answer 1

您需要将错误消息的位置设置为绝对，如下所示

.invalid-feedback {
    position: absolute;
}

防止div在Angular中溢出

1 个答案: