pasting a form to the top

Question

pasting a form to the top

Navigation

#1 by (0 votes)

0

How I can do to paste a form to the top part. There is the sticky-top property and it works but for the whole width of the general div. I just want the form. '

<div class="row sticky-top" style="margin-top:40px">
          
            <div class="col-1">
            lk
            </div>
            <div class="col-6 mr-3" style="margin-right:40px">
            lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum
            </div>
            <div class="col-4">
                <form>
                    <div class="form-row">
                       <div class="form-group col-md-6">
                           <label for="inputEmail4">Email</label>
                           <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
                       </div>
                       <div class="form-group col-md-6">
                         <label for="inputPassword4">Password</label>
                         <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
                        </div>
                     </div>
                     <div class="form-group">
                         <label for="inputAddress">Address</label>
                         <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
                     </div>
                     <div class="form-group">
                         <label for="inputAddress2">Address 2</label>
                          <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
                     </div>
                     <div class="form-row">
                        <div class="form-group col-md-6">
                             <label for="inputCity">City</label>
                             <input type="text" class="form-control" id="inputCity">
                        </div>
                       <div class="form-group col-md-4">
                            <label for="inputState">Provincia</label>
                            <select id="inputState" class="form-control">
                            <option selected>Choose...</option>
                            <option>Cuenca</option>
                            <option>Ciudad Real</option>
                           </select>
                         </div>
                         <div class="form-group col-md-2">
                            <label for="inputZip">Zip</label>
                            <input type="text" class="form-control" id="inputZip">
                         </div>
                     </div>
                    <div class="form-group">
                      <div class="form-check">
                      <input class="form-check-input" type="checkbox" id="gridCheck">
                      <label class="form-check-label" for="gridCheck">
                         Check me out
                      </label>
                      </div>
                    </div>
                   <button type="submit" class="btn btn-default">Sign in</button>
                </form>
            </div>
            <div class="col-1">
        
            </div>
        
        
        </div>

bootstrap

asked by Dani Serra 28.02.2018 в 18:11

source

1 answer

Key set does not exist Android Studio: Layout [duplicated]

score 0 · Answer 1

The sticky-top class allows you to leave an item above the window, but only when you have gone through this scroll, you must include it to the element that you want to have this behavior in this way:

<form class="sticky-top">
    ....
</form>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row" style="margin-top:40px">

    <div class="col-1">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="col-6 mr-3" style="margin-rigth:40px">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="col-4">
      <form class="sticky-top">
        <div class="form-row">
          <div class="form-group col-md-6">
            <label for="inputEmail4">Email</label>
            <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
          </div>
          <div class="form-group col-md-6">
            <label for="inputPassword4">Password</label>
            <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
          </div>
        </div>
        <div class="form-group">
          <label for="inputAddress">Address</label>
          <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
        </div>
        <div class="form-group">
          <label for="inputAddress2">Address 2</label>
          <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
        </div>
        <div class="form-row">
          <div class="form-group col-md-6">
            <label for="inputCity">City</label>
            <input type="text" class="form-control" id="inputCity">
          </div>
          <div class="form-group col-md-4">
            <label for="inputState">Provincia</label>
            <select id="inputState" class="form-control">
                                <option selected>Choose...</option>
                                <option>Cuenca</option>
                                <option>Ciudad Real</option>
                               </select>
          </div>
          <div class="form-group col-md-2">
            <label for="inputZip">Zip</label>
            <input type="text" class="form-control" id="inputZip">
          </div>
        </div>
        <div class="form-group">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="gridCheck">
            <label class="form-check-label" for="gridCheck">
                             Check me out
                          </label>
          </div>
        </div>
        <button type="submit" class="btn btn-default">Sign in</button>
      </form>
    </div>
  </div>
</div>

It is important that you consider that position: sticky is not supported in all browsers.

If on the other hand you want to be fixed all the time you can use the class fixed-top , adding it to the element that you want this behavior to have, like this:

<div class="col-4 fixed-top"></div>

And in your specific case you must add left: auto to your css so that it respects the width of the div

.fixed-top {
  left: auto;
}

.one {
  height: 1rem;
  background: #0FF;
}

.two {
  height: 1rem;
  background: #FF0;
}

.three {
  background: #F0F;
}

.fixed-top {
  left: auto !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row" style="margin-top:40px">

    <div class="col-1 one"></div>
    <div class="col-6 mr-3 two"></div>
    <div class="col-4 fixed-top three">
      <form>
        <div class="form-row">
          <div class="form-group col-md-6">
            <label for="inputEmail4">Email</label>
            <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
          </div>
          <div class="form-group col-md-6">
            <label for="inputPassword4">Password</label>
            <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
          </div>
        </div>
        <div class="form-group">
          <label for="inputAddress">Address</label>
          <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
        </div>
        <div class="form-group">
          <label for="inputAddress2">Address 2</label>
          <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
        </div>
        <div class="form-row">
          <div class="form-group col-md-6">
            <label for="inputCity">City</label>
            <input type="text" class="form-control" id="inputCity">
          </div>
          <div class="form-group col-md-4">
            <label for="inputState">Provincia</label>
            <select id="inputState" class="form-control">
                            <option selected>Choose...</option>
                            <option>Cuenca</option>
                            <option>Ciudad Real</option>
                           </select>
          </div>
          <div class="form-group col-md-2">
            <label for="inputZip">Zip</label>
            <input type="text" class="form-control" id="inputZip">
          </div>
        </div>
        <div class="form-group">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="gridCheck">
            <label class="form-check-label" for="gridCheck">
                         Check me out
                      </label>
          </div>
        </div>
        <button type="submit" class="btn btn-default">Sign in</button>
      </form>
    </div>
  </div>
</div>