CODEWITHSUNDEEP
css
Eatsam ul haq
Eatsam ul haq

Reputation: 347

I do not want to skip a line after my input field

My front end look like this:

password image

I want to display this "Show" button inside my text field but I think due to Form Control, I am unable to do so.

Here is the code from Angular: angular code

Upvotes: 0

Views: 74

Answers (2)

John Malkoln
John Malkoln

Reputation: 461

It's not related to angular. Just use position: absolute on your button.

.form-group {
    width: 200px;
}

.form-control-wrapper {
    position: relative;
}

.show-password-button {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0,-50%);
    margin-right: 10px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="form-group">
    <label>Password</label>
    <div class="form-control-wrapper"> 
      <input type="password" formControlName="password" class="form-control">
      <button class="show-password-button">Show</button>
    </div>
</div>

Upvotes: 1

Soufiane Boutahlil
Soufiane Boutahlil

Reputation: 2604

In order to align the button with the input, you can use flexbox:

Css:

.container {
   display: flex;
   justify-content: space-between;
}

HTML:

  <div class="form-group">
          <label>Password</label>
          <div class="container">
            <input type="password" class="form-control" />
            <button>Show</button>
          </div>
   </div>

Upvotes: 0

Related Questions