I am having some trouble with removing the footer from my modal. Although I manage to remove the contents, there is still space being taken up by the footer.
Below is the code snippet I am working with...
<div class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true>× </button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
</div>
If you omit using '<div class="modal-footer">' in your modal template, bootstrap will automatically create it for you. This could be the reason why you are seeing the footer with your code.
To resolve this issue, you can hide the footer directly in the template by adding 'style="display:none"' to the footer section:
<div class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer" style="display:none"></div>
</div>
Give this a shot
<div class="footer-modal" hidden="true"></div>I believe the issue with the "additional space" is related to the <p> margin. You can experiment with this css:
.popup .modal-content p {
margin-bottom: 0;
}
It seems like the issue may be due to the padding applied to the modal-footer class. You can attempt to override it using the following CSS:
.modal .modal-footer {
padding: 4px;
}
I have chosen to keep the padding at 4px in order to maintain the rounded corners.
Customize the modal-header and modal-footer sections of the bootstrap modal to suit your needs.
To hide the modal-footer, include the code below:
.modal-footer{display: none;}
You can easily accomplish this task with the help of jQuery.
require(
[
'jquery',
'Magento_Ui/js/modal/modal'
],
function(
$,
modal
) {
var options = {
type: 'popup',
responsive: true,
innerScroll: true,
buttons: []
};
$('#approvalsModal').modal(options,{
closed: function(){
// Add your custom action here when the modal is closed
}
});
$(".approvalsModal").click(function(){
$("#approvalsModal").modal('openModal');
});
}
);
I am utilizing the Bootstrap 5 navigation bar and trying to figure out how to remove the blue border from the "Dropdown" when clicked on. Despite my efforts to find a solution, I have been unsuccessful. <nav class="navbar navbar-expand-lg navbar ...
Hello, I am currently working on integrating a captcha image into a Bootstrap 4 form as an input group item. It is functioning correctly, but there is an issue with a border around the image causing the input field to appear larger than the others. Below i ...
What I'm trying to achieve is to restrict certain input fields to only accept integer or decimal values. Here's the code snippet that I currently have: <input type="text" pattern="[0-9]*" [(ngModel)]="myValue" pInputText class="medium-field" ...
I've gone through all the questions and conducted extensive research, but unfortunately, I haven't been able to find a solution that works. Below is the HTML code snippet: <div id="createarea"> <form id="createform" action="index/c ...
//I am trying to adjust the size of the audio player based on the 'height' and 'width' properties, but it doesn't seem to be working as expected. <audio autoplay controls height="100px" width="100px"> ...
.content { width: 600px; height: 600px; border: 4px solid lime; display: grid; grid-template-areas: 'a d' 'b d' 'c d'; } textarea, iframe { margin: 0; box-sizing: border-box; } .content > .a {gri ...
I have encountered an issue with vertically centering a span using the font-style "Luckiest Guy". https://i.sstatic.net/Lz8o3.png I attempted to use display: flex;align-items: center; on the span, but it did not work. App.vue <template> <div ...
Is it possible to pre-fill a checkbox in an HTML form using the URL? For example, if we have a URL like www.example.com/?itemname=sth Would there be a similar method to pre-select a checkbox via the URL? <ul class="list-group"> <li c ...
Currently, I am working on a project that involves making AJAX calls to load hundreds of records from the database to be displayed on a slider. Specifically, the data I am retrieving includes the 'Image Path' for all the images, as well as other ...
My folder structure is set up like this: https://i.sstatic.net/1kscd.png Included the following in my index.html: <script type="text/javascript" src="js/modules/App/lib/App.js"></script> <script src="js/modules/Cafe/lib/Cafe.js"></s ...
I'm facing an issue with a link in the horizontal navigation bar. When a user hovers over it, I want another div to slide down just below it. The problem is that using the .toggle method doesn't work as expected. It continuously toggles the div e ...
I am experiencing an issue where I can successfully insert values into the database based on what is checked, but I am encountering difficulty retrieving the values when fetching from the database. Can anyone provide me with some assistance? Thank you. Th ...
I have been following a tutorial on creating dynamic tabs using Bootstrap. I added the code below to my HTML document. <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#home">Home</a></li> < ...
Hey everyone, I could use some assistance. I'm trying to execute multiple events with a single click. Currently, I can change the image in my gallery on click, but I also want to add text labels corresponding to each image. Whenever I click on a diffe ...
I prefer using HTML over XHTML, but for some reason VS2008 is forcing me to use it. Whenever I type < br in an ASPX file, it automatically changes to < br /> Normal HTML4.01 does not have these auto-completions. Is there a way to disable this a ...
My goal is to create a grid layout with 3 columns and 2 rows using Bootstrap cards, but I'm encountering an issue where all the cards are centered and stacked on top of each other. Can someone please assist me in resolving this problem? Service.js co ...
Seeking a unique example of a div SHOW / HIDE functionality where multiple divs are populated within the main container. Specifically looking to display new paragraphs or topics of text. I have experience with standard show/hide techniques for collapsing ...
My index.html file includes a login form that submits to login.php. Once the user is verified, they are redirected back to index.html and the verified username is stored in a session variable called username. I am looking for a way to display this username ...
Here is the HTML code below: <td class=" center-align" style="padding:10px 0 0 0;" colspan="3"> <span data-bind="visible: !editing()" style="display: none;"></span> <input id="btnSaveUserProfile" class="orange-but" type="button" data- ...
When attempting to create a dynamic dropdown menu, I encountered an issue where the values were skewed in Internet Explorer if they exceeded the width of the dropdown. To fix this problem, I added select:hover{width:auto;position:absolute}. However, now th ...