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

    jQuery: How to get DIV to slide-off the screen and another to slide in?

    How to add label to percentage bar in css and html?

    How to achieve mouseover effect where a hover div slides in from the side

    How can I create an overlay that stays in DOM as opacity 0 but doesn't prevent content from being clickable?

    How to align text and buttons next to canvas (WebGL + JavaScript + CSS)

    How to align columns in bootstrap to center?

    How to provide default font height or content when

    or has no characters?

    How can I rotate a font icon 45 degrees?

    jQuery Show/Hide for and

    How to apply focus css for all drop downs?

    How to wrap a div containing text around a div containing an image?

    How to fit a button to a hover box? And the button is not displaying properly?

    How to ensure the header floats with horizontal page expansion?

    CSS triangle how to remove white space on the right

    How can i override the margin: 0; padding: 0; border: 0; css styles from main body css for ul li

    CSS how to keep text always inline with a paragraph

    Show a box with text when hovering an image

    How can I use min-width 100% and still have expanding by content?

    How to target the first-child of an optgroup with css or jquery

    How to create a backdrop for a dialog?

    How to set the css property of dynamic data

    How can I invoke an “AktionLink” in an “onClick” event in a “div”?

    How to Make a Pentagram with CSS Border Attributes

    How can I make dynamic progress bar using just jquery?

    How to center a text line in a navigation bar?

    How to make a child div to grow to full screen using CSS?

    How to add custom code to specific
  • s in wordpress while building navigation?
  • How do I make text-transform:uppercase work properly with Greek?

    How to load a local copy of a generic CSS file when CDN is down? [duplicate]

    How to create a gullwing shape with CSS