I have a modal form when I click the button I get the form with student data in it.
so the problem is when the modal is opened the sidebar is broken.
here's a screenshot of my problem :
Screen shot
modal :
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="memberModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="memberModalLabel">Edit Member Detail</h4>
</div>
<div class="dash">
</div>
</div>
</div>
</div>
I tried to remove position: relative; for the modal.
but it's not doing anything
when the sidebar is left to right the modal is not affecting the sidebar but when I change it to right to left it breaks
Any idea how I can fix this?
Solved by adding :
.modal-open[style] {
padding-right: 0px !important;
}
Related
I'm creating a bootstrap modal and I want to set the header's background color to transparent, it did work with other colors but with transparent my header's color turn black.
My CSS:
<style>
.modal-header {
background-color: transparent !important;
}
</style>
HTML:
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...abd,ajkwbldkajgwldkahgwldkjalwkjdhalkjwdhlakjwhdawdw
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
Live demo: https://codepen.io/spuft/pen/KKzZvBa
This is because the parent element .modal-content has a background-color of #161415 (which is close to black like what you described).
Since your header is transparent, it will not have a background-color on its own but the parent has a background-color so that's what you are going to see - giving the illusion that the header has a black background color.
An analogy of this in the real world is if you place a transparent sheet of plastic at the top of a black notebook. You will still see black visually despite the plastic being at the top.
So to solve this, give your .modal-content transparent as well. Since they are transparent, the modal's overlay will be the dominant color visually.
.modal-content {
background-color: transparent;
color: white;
}
I have a small modal that appears at the top of the screen periodically. When it appears it blocks typing in inputs and scrolling until it goes away. Is there a way to make the modal non-interruptive so that when it appears it doesn't cause focus change or anything else. I want it to be minimally invasive.
Below is my modal:
<div id="myModal1" class="modal fade" tabindex="-1" role="dialog" style="margin-top:10px;" data-backdrop="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
Hello World
</div>
</div>
</div>
</div>
If you want a non-interruptive modal, why not use an alert?
https://getbootstrap.com/docs/3.3/components/#alerts
A modal interrupts the user by definition.
i have a div which is dynamically generated though button click.
As follows:
`
<div id="modal4#{c.requestId}" class="modal-approval-size modal fade modal1" tabindex='-1'>
<div class="modal-dialog modal_dialog"
style="background-color: #f5f3f4;">
<div class="modal-content-new modal-content">
<div class="modal-header modal_header">
<h4 class="modal-title">Confirmation Header</h4>
</div>
<div class="modal-body modal_body">
<p>Please confirm the approval by clicking Ok. If you do not wish to approve the request please click Cancel.</p>
</div>
<div class="modal_footer">
<span><a href="#"
style="color: #000000; text-decoration: underline;"
data-dismiss="modal" aria-hidden="true">Cancel(Esc)</a></span>
<button type="button" class="btn btn-primary approve_btn"
data-dismiss="modal" id="approvalConfirm" onclick="callFunction('#{c.requestId}','C','A')">OK</button>
</div>
</div>
</div>
</div>`
I want to click on the OK button through selenium WebDriver.
I am using Xpath as below:
//*[#id="approvalConfirm"]
But its not clickable and working. Can you please tell me why and how to fix it?
I have a bootstrap modal that on a Button click I show it.
Everything works great but the Modal is displayed in the very right of the screen that I can't see even the Modal footer buttons.
I'm using a HTML Template that has a custom Bootstrap CSS and that's the reason of the issue.
Here is a screenshot:
My Modal html code is:
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
And my jQuery code is:
$('#btnSave').click(function() {
$('#myModal').modal('show')
});
Here is the jsFiddle using the custom CSS that I have (from the HTML Template).
http://jsfiddle.net/uuvgLnsx/1/
Try this...
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="position: fixed; left: 25%; width:60%;>
The problem is here:
#media screen and (min-width: 768px) {
.modal-dialog {
left: 50%;
right: auto;
width: 600px;
padding-top: 30px;
padding-bottom: 30px;
}
The 'left: 50%' pushes the your dialog box into the middle. Change left to auto.
I'm trying to make a bootstrap modal component with the awesome vue.js, but I haven't been able to find a good way to transclude- that is, I want to bundle several nested elements containing the backdrop, modal window, close button, etc. into one component. This component will then need to wrap the markup placed inside of it.
The component
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
// transcluded content goes here.
</div>
</div>
</div>
The content
<bs-modal>
<h1>Some title lol</h1>
<p>The content 'n stuff</h1>
</bs-modal>
Transcluded
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<h1>Some title lol</h1>
<p>The content 'n stuff</h1>
</div>
</div>
</div>
Ah, found it.
http://vuejs.org/guide/components.html#Content_Distribution_with_Slots
You use a special <slot></slot> element to indicate where to transclude.
So,
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<slot></slot>
</div>
</div>
</div>