how to fix an element inside bootstrap modal with respect to bootstrap modal


Tags: jquery,html,css,twitter-bootstrap,css-position

Problem :

I want to fix an element inside bootstrap modal, but position: fixed but on scrolling it moves with the modal. I want it to stick at its place even after the modal is scrolled.

Here is the JSFiddle. Here you will see the Patate text has position: fixed css attribute but if the modal is large then it moves with it. How can i fix this text to its place so that it stays at its position even if the modal is scrolled.

I had no luck with this. Please help. Thanks.



Solution :

This might help. Using the grid inside the modal to separate the fixed div from the rest of your content.

$('.launch-scroll').on('click', function(e) {
  $('#modal-scroll').modal({
    show: true
  });
});
.modal {
    overflow: hidden;
}
.modal .modal-body {
    height: 500px;
    overflow: auto;
}
.modal .modal-fixed {
    position: fixed;
    background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="page-container">
  <div class="container">
    <br />
    <button type="button" class="btn launch-scroll">Launch Confirm</button>
  </div>
</div>
<div class="modal fade" id="modal-scroll">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>

        </button>
        <h4 class="modal-title">Modal title</h4>

      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-xs-2">
            <div class="modal-fixed">Patate</div>
          </div>
          <div class="col-xs-10">
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
            <p>One fine body&hellip;</p>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->


    CSS Howto..

    Trying to show two different images depending on two media queries

    How to make triangle shape in before a div in pure css?

    How to prevent mobile device to resize and use proper css file

    How to apply styles to an element with a prefixed ID?

    jQuery + CSS: How to scroll smooth, regarding a fixed header?

    Jquery button click to show div right to left with slide animation

    How do I make :hover inside div style? [duplicate]

    CSS: How to drill all the underlying layers up to the background?

    How to hide elements in navbar until hover in css?

    How to make link color change based on location on page?

    How to change color of text based on the php condition [closed]

    How to Unmerge CSS and JS in magento using MySQL Command

    How to change the style of an active menu with php + css

    How to align social like buttons next to copyright text inside footer?

    How can I make my web page load faster?

    how can i make the li inside the div be horizontal?

    How can I get rid of those animation in jquery toggle?

    How to convert this CSS to SASS (arithmetics in selector)?

    W3.CSS how to make container centered inside another container

    Javascript slide showing the last image 5 times

    how to i target a another div with jquery or css

    How to use custom underline with breakline in CSS?

    Hiding and showing elements with jQuery flickers in Chrome and Edge

    How to mark up a tiled layout with CSS?

    Bootstrap modal: how to fade in, but immediately disappear on close

    How do I set image src based on li active status?

    Wordpress- How do i change the default font of navigation menu?

    How to Mask Images with Dynamic Sizes to Shapes?

    How to use CSS function instead of LESS function?

    How to Overcome Bootstrap's Default Styling? Element targeting issues?