How to fix issue when using position fixed element is getting smaller when scrolling

Question

Contact us form is getting smaller by 15px when the div elements gets fixed and i cannot figure out what is the issue and how to fixed it.

    <div class="container">
                           
    <section class="property-details-section">
                                
      <div class="col-md-8 section-styles">
            
           <h1 class="text-center ">Property Details</h1>
              <div class="row">
            
              <ul class="list-group">
                 <li class="list-group-item">Cras justo odio<span>Result</span></li>
                 <li class="list-group-item">Dapibus ac facilisis in<span>Result</span></li>
                  <li class="list-group-item">Morbi leo risus<span>Result</span></li>
                  <li class="list-group-item">Porta ac consectetur ac<span>Result</span></li>
             </ul>
            
         <ul class="list-group">
               <li class="list-group-item">Cras justo odio<span>Result</span></li>
               <li class="list-group-item">Dapibus ac facilisis in<span>Result</span></li>
               <li class="list-group-item">Morbi leo risus<span>Result</span></li>
                <li class="list-group-item">Porta ac consectetur ac<span>Result</span></li>
             
            </ul>
                      
                     </div>
            
                </div>
                                 
              </section>
            
            </div>

Full code here: https://jsfiddle.net/kani339/km83psw5/14/ Thanks

score 0 · Answer 1 · answered Jul 25 '18 at 09:27

0

Please Try This

.btn { width: 142px; }

Or

.form-control { min-width: 290px; }

answered Jul 25 '18 at 09:27

iPraxa Inc

548
3
6

unfortunately that didn't helped – Andrew Jul 25 '18 at 09:34

ReSedano · Answer 2 · 2018-07-25T13:36:58.617

A simple solution for this could be to use sticky-top class that works with position:sticky (but not completly cross browser). To do this you have to change a little your html structure and put all your content into one div (col-md-8, in your example). This is the documentation: https://getbootstrap.com/docs/4.0/utilities/position/ and this is a post related here in Stackoverflow: How to use CSS position sticky to keep a sidebar visible with Bootstrap 4

I created a very fast example starting from your code so you can understand how it works.

.section-styles {
    background-color: #fff;
}


.static-contact-form > form {
    padding:30px;
}

/*.sticky {
    position: sticky;
    top: 0;
    width: 360px;
    z-index: 100;
    padding: 0;
}*/

.static-contact-form h2 {
    background-color: #007bff;
    padding: 15px;
    color: #fff;
    border-bottom: 2px solid #0a6eda;
}




.form-control:focus {
    box-shadow: none;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  
                <!-- Property Details Section -->
                <section class="property-description-section">
                    <div class="row">

                        <div class="col-md-8">
                            <div class="property-description section-styles">
                                <h1 class="text-center">Property description</h1>
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt alias at sequi aut mollitia aperiam aspernatur, voluptatibus, architecto nam voluptatem quae consequuntur quos omnis. Nesciunt quos officia recusandae voluptatum? Explicabo id similique at, architecto neque, ea laboriosam, aspernatur culpa est exercitationem distinctio quam adipisci sed deleniti. Asperiores, quae expedita sint eligendi quo dolorum error consequatur accusamus, deserunt blanditiis iste animi. Nihil voluptate, eius, dolor cupiditate quisquam fugit dolores iure, voluptatem repudiandae blanditiis excepturi tempore rem temporibus vero. Nostrum aliquid pariatur repudiandae soluta excepturi labore nobis accusamus, ab dolorum animi incidunt nesciunt reprehenderit recusandae? Ea sunt perferendis pariatur eos, fugit quasi fugiat atque a! Voluptates accusamus, temporibus eaque omnis error similique. Non ratione quisquam ea enim, distinctio necessitatibus dolore ducimus laboriosam perferendis rem porro quam iure, dignissimos rerum excepturi iusto dicta. Blanditiis placeat veniam eos dolorum nulla distinctio facilis magni reprehenderit expedita, quaerat maiores quae voluptates sapiente voluptatem sed sit numquam?</p>
                            </div>


                            <h1 class="text-center ">Property Details</h1>
                            <div class="row">

                            <ul class="list-group">
                                <li class="list-group-item">Cras justo odio<span>Result</span></li>
                                <li class="list-group-item">Dapibus ac facilisis in<span>Result</span></li>
                                <li class="list-group-item">Morbi leo risus<span>Result</span></li>
                                <li class="list-group-item">Porta ac consectetur ac<span>Result</span></li>
                            </ul>

                            <ul class="list-group">
                                <li class="list-group-item">Cras justo odio<span>Result</span></li>
                                <li class="list-group-item">Dapibus ac facilisis in<span>Result</span></li>
                                <li class="list-group-item">Morbi leo risus<span>Result</span></li>
                                <li class="list-group-item">Porta ac consectetur ac<span>Result</span></li>
 
                             </ul>


 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium mollitia nihil amet, est doloremque ipsam voluptas nesciunt vel accusantium culpa quam illo non sit tenetur officiis earum voluptatum aperiam ratione sunt eius iste magni assumenda. Cupiditate eos harum rerum iure, cum dolores iusto labore at, tempora est numquam totam mollitia fugit fuga rem laborum eligendi magnam! At, quos accusamus ipsa earum neque impedit et dicta possimus vero iure itaque architecto quo, repellendus alias magni corporis exercitationem iste aliquam esse, blanditiis sit sequi deserunt. Nemo, placeat error tenetur nisi. Laboriosam praesentium quidem similique non aut maiores, repudiandae voluptatem tenetur placeat nulla.</p>
                       
                       
                            </div>




                        </div>
                        

                        <div class="col-md-4">
    
                            <div class="static-contact-form section-styles sticky-top">

                                <h2>Contact Us</h2>

                                <div class="phonering-alo-phone phonering-alo-green phonering-alo-show" id="phonering-alo-phoneIcon">
                                    <div class="phonering-alo-ph-circle"></div>
                                    <div class="phonering-alo-ph-circle-fill"></div>
                                    <a href="tel:" class="pps-btn-img" title="Phone">
                                        <div class="phonering-alo-ph-img-circle"></div>
                                    </a>
                                </div>

                                <form>
                                    <div class="form-group group">
                                        <input type="text" class="form-control inputMaterial" autocomplete="off" required>
                                        <span class="highlight"></span>
                                        <span class="bar"></span>
                                        <label>Your Name</label>
                                    </div>

                                    <div class="form-group group">
                                        <input type="number" class="form-control inputMaterial" autocomplete="off" required>
                                        <span class="highlight"></span>
                                        <span class="bar"></span>
                                        <label>Phone Number</label>
                                    </div>

                                    <div class="form-group group">
                                        <input type="email" class="form-control inputMaterial" autocomplete="off" required>
                                        <span class="highlight"></span>
                                        <span class="bar"></span>
                                        <label>Email</label>
                                    </div>

                                    <div class="form-group group">
                                        <textarea name="" cols="10" rows="4" class="form-control inputMaterial" required></textarea>
                                        <span class="highlight"></span>
                                        <span class="bar"></span>
                                        <label>Your Message</label>
                                    </div>

                                    <button type="submit" class="btn btn-outline-primary">Send Message</button>
                                    <a href="#" class="btn btn-outline-success"><i class="fas fa-phone"></i>+371 2000000</a> 
                                </form>
                                
                            </div>
    
                       </div> 
                        
                    </div>
          
                </section>  
         
                
</div>

How to fix issue when using position fixed element is getting smaller when scrolling

2 Answers2