boostrap modal properties

Hi there,

From the page below:

https://getbootstrap.com/docs/4.0/components/modal/

I am able to built a modal successfully.  The problem is that I would like the "modal box" to appear (say) 5 centimeters below the place it automatically appears, simply because the upper fixed panel (shown in yellow in the figure attached) "hides" part of the modal box.

What should I include (I guess) here:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
                         ---
    </div>
  </div>
</div>

so that I will have the full modal box shown?

Thanks!
fskilnik.
30Nov17_ModalProblem.gif
fskilnikAsked:
Who is Participating?
 
lenamtlCommented:
Hi,


You just need to add a top value

.modal-dialog {
position: absolute;
left: 0;
right: 0;
top: 300px;
bottom: 0;
margin: auto;
width:500px;
height:300px;
}

Open in new window


Here is a Jsfiddle
https://jsfiddle.net/lenamtl/9q3oofk7/

also if required you can set a z-index to make sure it will on top of other element
https://www.w3schools.com/cssref/pr_pos_z-index.asp

You may need to adjust it for other @media queries (if the panel have different size in other media queries).
0
 
fskilnikAuthor Commented:
Hi, lenamtl !

Thanks a lot for the perfect solution and information/links (code) !

Regards,
fskilnik.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.