I am currently working on an angular application and I find myself inside a Twitter Bootstrap modal.
My goal is to relocate a button that is located within the body of the modal to the footer of the modal using fixed positioning. This particular button triggers a function unique to the current modal-body scope, and it needs to stay in view regardless of scroll position. The modal-header and modal-footer always remain visible, while the modal-body content scrolls underneath those sections.
Everything behaves as expected when using Chrome.
I have come across various issues others have faced with fixed positioning in Safari, and I have tried implementing workarounds such as:
-webkit-transform:translateZ(1px);
I have also noticed that removing
transform: translate3d(0, 0, 0);
has proven to be helpful in certain scenarios. However, this rule is automatically applied to the bootstrap modal-dialog, so removing it is not feasible for me due to a multitude of misaligned elements that result from its removal.
In addition to these attempts, I have experimented with placing the button inside a parent element with absolute positioning and then with fixed positioning. I also attempted to remove the parent element altogether and place the button directly, but none of these strategies yielded successful results for me.
The CSS:
.stickyBut{
position: fixed;
bottom: 16px;
left: 605px;
z-index: 999999;
/* -webkit-transform:translateZ(10px); failed */
}
.but-hold{
z-index: 999999;
width: 100%;
height: 25px;
position: absolute;
/* position: fixed; */
top: 0;
left: 0;
/* FAILED
-webkit-transform:translateZ(1);
*/
}
The HTML:
<div class="but-hold">
<button class="btn btn-warning stickyBut" ng-click="submitProfile()">Save + Continue</button>
</div>
Any alternative solutions or suggestions would be greatly appreciated - thank you!