Is there a way to adjust the width of a Bootstrap 5 modal to be a percentage of the full screen? This method seemed effective in previous versions of Bootstrap.
<div class="modal-dialog modal-dialog-centered per80" role="document" >
.per80 {
width: 80% !important;
}
ALTERNATIVELY
$(".modal-dialog").css("width", "80%");`
I have attempted adding a custom class or inline style with "width: 80%", but neither approach has been successful in adjusting the modal width as desired.
The reason why achieving a modal size of 80% or greater is not possible is due to the presence of a maximum width property within the Bootstrap modal.
It's important to note that the percentage value is calculated based on the parent container's width, not the window's width. To adjust the modal size in relation to the window, consider using the vw unit.
You can experiment with the following CSS:
width: 80vw;
max-width: initial;
Understood! I made the adjustment by removing the max-width property from @media.
@media (min-width: 576px) {
.modal-dialog {
/*max-width: 500px;*/
margin: 1.75rem auto;
}
I am facing an issue with my items section. When I click on an item, a modal window opens allowing me to edit the text inside a textarea. However, if I make changes to the text and then cancel or close the modal, upon reopening it, the previously modified ...
<div class="custom-class1"> <div class="custom-class2" id="custom-id1">hello 1</div> <div class="custom-class3" id="custom-id2">hello 2</div> <div class="custom-class4" id="custom-id3">hello 3&l ...
Link: Please resize the browser to mobile view. Issue with Header: I am facing alignment issues in the header. The elements do not seem to be aligned properly at the center of the header. The Android logo is aligned, but the text and dash image are not. ...
I'm currently developing a basic notification system. Check out the jsfiddle I created here: https://jsfiddle.net/t9pvmzhh/3/ For some reason, jsfiddle is not showing all 4 notifications even though they display correctly on my end. I suspect there ...
Just dipping my toes into the world of Web Development. While playing around with some JavaScript within HTML, I decided to try updating the content of an element. Upon running the code below, "Updated Content" appears in the console as intended. However, ...
After successfully incorporating this SideBar into my Vuex/Laravel project, I encountered a problem. The example code provided used: <div :class="$style.sidebar"/> However, when I tried to modify it to: <div :class="$style.sidebar">Content&l ...
Looking for some help with a fixed header issue on my website. The header is supposed to stay at the top while scrolling, which works well. However, when I switch to responsive view, click the menu button, and then go back to desktop view, none of the po ...
Could use some assistance figuring out what's missing here. I've added a random photo from Wiki, similar in size to the images I'll be working with. The images will vary in size, but I want them to always remain visible within the browser w ...
I am currently working on dynamically setting the heights of elements with a specific class using JQuery in order to achieve a 16:10 ratio based on their width. However, I'm encountering an issue where the height doesn't seem to be applied and re ...
I am experiencing an issue with a select menu on mobile devices. Whenever I tap on the menu, it seems to zoom in slightly. Is there a particular -webkit property causing this behavior? How can I prevent the screen from zooming when I tap on the select me ...
I need to eliminate the link associated with the date shown in a SharePoint calendar list. Despite using developer's tools, I cannot locate an anchor tag to disable using CSS. My goal is to accomplish this task solely through CSS. Here is the code sn ...
Looking to create a standard full-width footer at the bottom of my page, I need help with the implementation. Utilizing the "Permanent drawer" from Material-UI Drawer for reference here. If you're interested in experimenting with it, CodeSandbox link ...
I'm in the midst of developing a game and have incorporated a progress bar to facilitate the incrementation of certain values on my HTML page. However, once the progress bar hits 100%, it updates the cost and level only once. After that initial update ...
Currently working on an ecommerce simulation project for a course, I successfully implemented a featured section with cards. However, when it comes to scrolling, I am facing an issue where the cards overlap with my sticky navbar as I scroll down. If anyo ...
Is there a way to hide the content within this div if the prop-value is empty? I specifically want to hide the text "First class" when Prop-value does not have any value. Any solutions? <div> <span class='prop-name'>F ...
I am interested in developing a platform where I can retrieve someone's website and present it using my own CSS. Additionally, I want to remove certain HTML tags from the retrieved content. Can you provide any guidance on how I can achieve this? What ...
Hello everyone, I need some help with my website! I can't seem to find the answer on my own. I'm currently working on making my website responsive, but I've run into an issue with the mobile navigation on phones. The navigation links are ov ...
I'm facing an issue where I want to remove each line added by the user, one by one. However, my current program is removing all the rows from the table instead of just one at a time. The objective is to allow the user to remove a specific row if they ...
I have an HTML file with some AngularJS code for a modal window. <div ng-controller="ModalDemoCtrl"> <script type="text/ng-template" id="myModalContent.html"> <div class="modal-header"> <h3>I'm a modal!</h3> ...
Is it possible to modify the fa-arrow-circle-o-down icon to have the same arrow type as the fa-arrow-circle-down icon? The current arrows on these two icons are different and I want them to be consistent. ...