Using Bootstrap Tabs in Modal causes top of modal to get cut off on content change

[engineertdog]

I'm having a problem with Modals when using tabs to change the content displayed in the modal. When the content in a tab is too much, the top of the modal is cut off on the page. I've included the testing platform below, and prepared a JSFiddle with replicated results. It's mostly HTML and some CSS for the modal.

Click on the second tab in the modal and you'll see the problem.

https://jsfiddle.net/ho80q9pk/

• Windows 10
• Chrome (v 61.0.3163.79)
• Edge (v 38.14393.1066.0)

[Johann-S]

Bootstrap 3 is essentially in maintenance mode as we focus on working towards a stable v4. As such, we're only accepting changes to v3's code on a case-by-case basis, usually only for critical bug fixes or docs improvements.

If you are able to reproduce this issue in our v4 do not hesitate to notice me 👍

[engineertdog]

Okay, well the theme I purchased to build my CMMS was built on v3, and simply replacing the v3 files with v4 files breaks the theme. And I need to find a fix for the aforementioned problem. So, what is your suggestion then?

[Johann-S]

you should create a JSFiddle with our v4 which demonstrate your issue, and if you can reproduce that issue in your JSFiddle I'll reopen your issue 👍

[patrickhlauke]

And for v3, I'd suggest asking on StackOverflow or similar if there are any hacks/workarounds - see https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md#using-the-issue-tracker

[engineertdog]

If I can't replace my v3 bootstrap (minified) CSS and JS files, then that is absolutely useless to me. Which, I've already stated doing so breaks the theme. You apparently don't understand that. But in any case, here's a v4 of the same issue.

https://jsfiddle.net/ho80q9pk/2/

[patrickhlauke]

The main point is: there won't be any more fixes/changes to v3, so any bugs found at this point in v3 are not going to be addressed / there won't be a new v3 (barring some absolutely major issue, at the discretion of @mdo). If you're bound to stick with v3, then trying to find a patch around the problem is your safest bet, and the best place for that is StackOverflow or similar. However, thanks to the reduced test case using v4, we can see if things can be addressed in v4 - and any fix there may be "backportable" to v3 (manually).

[Johann-S]

Not reproducible in our v4 see : https://codepen.io/Johann-S/pen/LzPpzW
(without your custom CSS)

EDIT :
your JSFiddle didn't use our latest release of Bootstrap 4, you used our Alpha 6 instead of our Beta

[patrickhlauke]

Ah, good catch, thanks @Johann-S. In that case I may close this again. @engineertdog I would suggest trying to see what the changes in the latest v4 styles are in relation to modals and/or tabs, and seeing if those can be applied back to your specific situation.

[engineertdog]

As I mentioned, the second JSFiddle contains the same issue using v4 CSS and JS.

[engineertdog]

@Johann-S I've come to realize it's from trying to center the modal vertically. The dynamic height from the use of tabs is messing with the ability to center when the content is too much for the screen.

.modal .modal-dialog { z-index: 10051; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) !important; }