Modal footer obstructing popover in modal body

I'm facing an issue with a Bootstrap 4 modal that contains buttons, one of which is supposed to trigger a custom popover div centered below it. The popover works fine outside the modal, but within the modal, it's partially hidden.

After trying various styles like overflow: and z-index:, I still can't get the popover to display fully in its current position relative to the "Button 1" button.

How can I ensure the popover is completely visible under the "Button 1" button despite being in the modal?

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c2a0adadb6b1b6b0a3b282f6ecf4ecf0">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>


<div class="modal" tabindex="-1" data-backdrop="static" data-keyboard="false" data-show="false" data-focus="true" style="display: block;">
  <div class="modal-dialog">
    <div class="modal-content">
    
      <!-- Modal Header -->    
      <div class="modal-header" style="margin-bottom: 0px; padding: 0.5rem 1rem; border-bottom: 0px; background-color: rgb(248, 249, 252);">
        <h5 class="modal-title text-center">
          Title Here
        </h5>
        <button type="button" class="close"><span aria-hidden="true">&#215;</span></button>
      </div>
      
      <!-- Modal Body -->
      <div class="modal-body" style="padding: 0px; max-height: 80vh; overflow: auto;">
        <div class="card card-body" style="padding: 0.5em; border: 0px; margin: 0px; overflow: hidden;">
          <div style="margin: 0.5em; padding: 0px;">
            Lorem ipsum dolor sit amet consectetur adipiscing elit nec montes eleifend
          </div>
          <hr style="margin-bottom: 3px; margin-top: 3px;" />
          
          <!-- Modal Buttons --> 
          <div class="row">
            <div class="col-6 text-center">
              <button class="btn btn-sm text-muted user-comm-react-btn">Button 1</button>
              
              <!-- Button 1 Popover Div --> 
              <div class="text-center bg-light shadow" style="position: absolute; width: fit-content; margin: 0px auto; border-radius: 2em; left: 50%; transform: translateX(-50%); z-index: 999; white-space: nowrap; border: 1px solid rgb(227, 230, 240);">
                Lorem ipsum dolor sit amet consectetur adipiscing elit nec montes eleifend
              </div>
              
            </div>
            <div class="col-6 text-center">
              <button class="btn btn-sm text-muted">Button 2</button>
            </div>
          </div>
          
          <hr style="margin-bottom: 3px; margin-top: 3px;" />
        </div>
      </div>
      
      <!-- Modal Footer -->
      <div class="modal-footer" style="padding: 0.25em; border-top: medium;z-index: 4;">
        Lorem ipsum dolor sit amet consectetur adipiscing elit nec montes eleifend
      </div>
      
    </div>
  </div>
</div>

htmlcsstwitter-bootstrapbootstrap-4bootstrap-modal

Answer №1

The removal of the overflow:hidden from the .card-body resolved the issue I was facing.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I resolve the issue of the mouse x/y glitch while drawing on an HTML canvas using JavaScript/jQuery?

I've been searching all over for a solution to this issue, but I just can't seem to find out what's causing the problem... This is my first attempt at working on something like this in my spare time. I hope to apply what I learn to create a ...

javascriptjqueryhtmlcanvasdraw

Unable to authenticate an HTML form using PHP and Apache 2

In my website's footer, there is a form that I am trying to run using a PHP file located at 127.0.0.1/form.php on localhost. I learned that PHP code inside HTML is commented out, and according to the PHP Documentation, the PHP file needs to be run dir ...

phphtmlapache2

Align the emoji in the center of the absolute div horizontally

I'm currently working on a project involving placing emojis at different coordinates within a webpage. At times, the emoji is larger than its container. For instance, here is an example of HTML code that positions a house with a font size of 100px ins ...

htmlcssemoji

Having trouble getting the sorting/search function to work with a click event to display content. It seems to only work with a single item - possibly an issue with the

Creating a function that involves multiple boxes with a search function. The search function is working for the most part, but when clicking on a result, certain content should display. function filterFunction() { var input, filter, ul, li, a, i; ...

javascripthtmlcss

Button that vanishes when clicked, using PHP and HTML

I am in the process of creating an online store and I am seeking to implement a button that directs users to a new page, but then disappears permanently from all pages within the store. Here is the code snippet I have developed so far: <input class="b ...

javascriptphpjqueryhtml

Why do I see my footer displayed twice on the page?

<div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li>@Html.ActionLink("Home", "Index", "Home")</li> <li> @Ajax.ActionLink("Imagenes List", "Images", "Home", new { page = 0 }, new AjaxOptions() ...

cssajaxasp.net-mvcrazor

The function designed to create in-line TailwindCSS classNames may work inconsistently in React and NextJS environments

Currently, I am utilizing TailwindCSS to style a web application. One frustrating aspect is that when attempting to add before: and after: pseudo-elements, it must be done individually. For instance, take the navigation drop-down button styling: <span ...

javascriptcssreactjsnext.jstailwind-css

What is the process for installing a single file from an npm package, such as only the bootstrap.min.css file from Bootstrap?

While working with the bootstrap.min.css file installed from the npm bootstrap package in a react project, I wondered if there was a way to selectively install specific files from the bootstrap package instead of the entire package. Additionally, I was ...

node.jsreactjstwitter-bootstrapnpm

Tips for maintaining the parent's width during a resize operation

I have a query: I am facing an issue with an image inside a div. The image is larger than the div, so I set its height to 100% to make it appear correctly. When I resize the image, it adjusts well and looks fine. However, when I resize the browser to make ...

htmlcssimageresize

What is the best way to position the publication date of an article at the bottom of the

I am looking to have the article publishing date (1/9/2016) positioned at the bottom inside the container. Right now, the date appears just below the text, but I want it to be aligned at the bottom of the container. The website in question is watchathletic ...

htmlcss

Issues arising from script tags causing disturbances in CSS

As a newcomer to the world of web design, I recently embarked on a journey with Bootstrap and also started exploring the platform Codepen. However, after working on a project in Codepen and attempting to transfer my code to Sublime, some unexpected changes ...

csstwitter-bootstraphead

Creating an HTML slideshow banner: What you need to know

I am looking to create a slideshow for my banner that changes automatically. The banners are located in a folder, and I want the website to display them one by one without manual intervention. Currently, I have managed to display the images from the folder ...

javascriptphpjqueryhtmlslideshow

borders in motion

I am currently working with this jQuery code. //this is the main javascript $(document).ready(function(){ $('nav.menu a').hover( function () { $('nav.menu').find(".current_item").removeClass("current_item"); ...

javascriptjqueryhtmlcss

Tips for maintaining the alignment of four buttons in a single row as the size of the screen changes

I'm creating a simple browser game as part of my web development learning process. I have a set of divs that represent a warrior, and at the head of the "div table" I have a group of 4 buttons arranged horizontally. However, when the screen size is re ...

htmlcss

Tips for Keeping Footer Aligned with Content:

When checking out this website, you may notice that the footer appears to be affixed to the left side. The CSS code responsible for this is as follows: #footer { width: 800px; clear:both; float:right; position:relative; left:-50%;} I would appreciate it ...

htmlcss

Line breaking by syllables using CSS

When it comes to CSS properties, the word-break attribute is able to split words across lines at specific points (such as the first character extending beyond a certain length). Surprisingly, there seems to be no existing CSS method (even with limited supp ...

htmlcsstypographyhyphenation

Initializing the $(this) variable prior to the function declaration

I am faced with the task of performing multiple checks based on the IDs of certain elements, all of which vary slightly. So, I created several functions to handle this, and rather than repeatedly using $(this).children ..., I wanted to create a short vari ...

javascriptjqueryhtmlvariablesglobal-variables

Guide to adjusting the border-bottom-width property in Bootstrap 4 using SASS?

Recently, I've been delving into the realms of Laravel and SASS. This allowed me to revamp my old HTML template to make it more reusable by implementing SASS for the CSS rules. In my previous HTML template, I had specific border styles in place: i ...

sassbootstrap-4

Develop a custom chat feature in HTML with the powerful VueJs framework

Currently, I've been developing a chat plugin for HTML using VueJs. My dilemma lies in creating a versatile plugin that can seamlessly integrate into any website. My ultimate goal is to design a plugin that can be easily deployed on various websites ...

javascripthtmlvue.jsplugins

What could be preventing this code from automatically scrolling to the designated class when a key is pressed?

When a key is pressed on the document, the default action is prevented and the element with the ID "show-all-win" is animated to scroll to the position of the element with the class "key_" plus the key code of the pressed key. This animat ...

javascriptjquerycss