MeltingDog MeltingDog - 1 year ago 73
HTML Question

Positioning an element next to a Bootstrap modal

I have a little arrow element that's part of a Bootstrap Modal and points to the element that triggered the modal to open.

This works fine. However, if the modal is very long and requires the user to scroll then the arrow element no longer remains stationary, pointing to the trigger element. This means I have to place the arrow outside of the

div, which means it hangs to the left side of the page.

Would anyone know how I could position the arrow so it's consistently next to the modal?



<div class="modal fade in" id="mymodal">
<div class="modal-dialog">
<div class="modal-content">
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
<div class="modal-arrow"></div>
</div><!-- /.modal -->


.modal-content {
height: 800px;
width: 400px;
margin-left: 40px;

.modal-arrow {
content: "";
display: block;
position: fixed;
top: 60px;
bottom: auto;
width: 0;
height: 0;
border-style: solid;
border-width: 25px 35px 25px 0;
border-color: transparent #ffffff transparent transparent;
-webkit-filter: drop-shadow(-2px 0px 1px rgba(0,0,0,.5));
-moz-filter: drop-shadow(0px 1px 2px rgba(0,0,0,.5));
-ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
-o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
filter: drop-shadow(0px 1px 2px rgba(0,0,0,.5));

Answer Source

Check out my fork of your fiddle.

Things to note:

  1. Removed JavaScript for positioning of arrow
  2. Added this to .modal-arrow class: top: 50vh; transform: translateY(-50%);

If you don't know, vh stands for viewport height. A value of 50 means half of the available viewport height. I added the translateY(-50%) to more precisely align the arrow object in the vertical space. Translation is a cleaner, more modern way to vertically center and is a good replacement for using negative margin-top.

Chrome/Mac 49.0.2623.112

enter image description here

enter image description here