I have a react-bootstrap-modal this, I want to show my modal relative to the button clicked, I have an option in my react-bootstrap-table so when I clik on that option I am showing my modal, but it is not aligning relatively.
I am using contentClassName to override .modal-content, I don't know but it is not working as expected
<Modal
show={props.show}
onHide={props.handleClose}
contentClassName="modal_l" // this is I am doing to override
aria-labelledby="example-custom-modal-styling-title">
<div className="container_modal_options">
<div className="heading">Heading</div>
<div className="content">"content</div>
</div>
</Modal>
Here I am sharing minimal code,
.modal_l {
width: 100px !important; it is not taking styling
}
I want to show modal at the right side, near by click
This is my code sand box working code
You should change contentClassName to dialogClassName.
.modal_l {
width: 100px !important;
max-width: none !important;// set max-width, if needed.
}
Related
Sorry for my english.
I made a web component, kind of List View, and there is a button at its right. It shows only a item, when you click it, it grows and shows all the items:
The problem is, with display: inline-block when I click in the List View, it grows and pushes down the items below.
I tried to use display: absolute and bigger z-index when I click, but obviously this happens:
The button on the right moves left below the List View. While it is what i want:
Maybe it can be done putting a fixed location with JS, but, there is a easier way to do this with css?
Edit:
The buttons are inside a div, in this example called a-div.
This is the simplified code:
<div class="a-div">
<list-view style="display: inline-block;"class="wButton">
</list-view>
<button class="arrow-button" type="button">
<img src="images/arrow-right.svg" alt="">
</button>
</div>
CSS:
.a-div{
width: 50%;
display: flex;
}
.a-div > *{
margin-right: 1rem;
}
I could use a flex-end on the arrow button, but it will look like this:
a-divand b-div both are inside of another div.
And something important, the with of the List View is dynamic.
Hope you can help me, thanks on advance!
When you apply position: absolute to your list it goes outsite the flow so the button with the arrow is placed right under it. Add a margin-left to the button equal to the width of list (plus a little bit more)
I use PrimeNG AutoComplete inside PrimeNG Dialog and I list elements below the AutoComplete in this dialog.
I want to do:
The max-height of the modal dialog is 300, if the added elements' total height is bigger than it then modal's scrollbar should be visible.
When there is no element in the list, the AutoComplete's suggestion list should be visible over the dialog.
But when I set the overflow property of the modal or not, the AutoComplete suggestion list is displayed inside the modal. Is it possible to make 2 elements as shown below? I also display scrollbar when the total elements in the modal are 10. Any idea?
Here is CSS style:
body .ui-dialog {
overflow-y: auto !important;
max-height: 300px;
}
body.ui-autocomplete-panel{
position: relative;
z-index: 9998!important;
}
add appendTo="body" worked to me
Have a look at this website please ebooks.am
So when I click on a table row, the sidebar opens from right side. Here I give body disable scroll for two purposes: first is definitely to disable scroll in body when sidebar is opened and the second is to hide scroll bar in sidebar, otherwise I would have 2 scrollbars side by side.
My problem is that when a sidebar is opened, the content (centered table, search) is moved to right. So how can I fix this, to make the content stay at the same place where it is.
Thanks in regards
add "disable-scroll" class on html element and add the following code
html.disable-scroll{
height: 100vh;
overflow: hidden;
}
html.disable-scroll body{
overflow: scroll;
}
So I'm using bootstrap as my responsive framework and I have a container, row I also have two div's that I'm going to be switching between using a button. So I setup my HTML and my second div I set the display to "none" to hide it. However when using Jquery fadeIn/fadeOut you can see there is some shifting/expanding in terms of the Height.
Now I think to get around this I have to set the position to Absolute and also change the z-index of the first and second div so one is hidden behind the other. Using absolute however breaks the bootstrap container... So is there a way to switch the Div without the shifting in height when the button is clicked. Added some source so you can see what happens when to buttons are clicked.
http://www.bootply.com/hBNIHfCpxR
Try this:
http://www.bootply.com/PIG2icyErI
Relevant CSS:
.row {
position: relative;
padding-top: 50px;
}
#content-one, #content-two {
position: absolute;
width: 100%;
top: 0;
}
I have a button, once I click on that button bootstrap modal will appear and then intro.js should highlight that modal. This is my requirement. But it's not working like that.
Once I click on that button modal is appearing but intro.js is not highlighting, if I press F12 it's highlighting.
This is the code I've written:
var introInstance=introJs();
introInstance.onbeforechange(function(targetObj) {
switch(targetElementIndex){
case 1:
$('#productPlanDiv').modal();
break;
};
});
How can I fix this? Thanks.
The answer here and the answer #Victor gave could help you to solve this problem. But these two answers didn't solve my problem so I merged them.
But there are several issues for these answer to mention that I think is important;
As #Victor mentioned, introJs and DOM have to use same div. But you should use assing introJs to modal div only when you actually want to show modal. Let's think you have 4 steps and and 3rd and 4th steps show your modal's elements as follow:
HTML code:
<html>
<style>
.modal {
z-index: 999999997 !important;
}
.modal .introjs-fixedTooltip {
z-index: 99999998 !important; /*I give less value to this one. The other way introJs always blocks my modals*/
}
.modal .introjs-showElement {
z-index: 999999999 !important;
}
</style>
<body>
<div id="some-div" data-step="1" data-intro="Let's do this!">
<p>some meaningful workk</p>
</div>
<div id="some-other-div" data-step="2" data-intro="You can do it!">
<p>this is very important text</p>
</div>
<div id="yourmodal" class="modal fade" role="dialog" aria-hidden="true">ΓΌ
<form id="valuable-info" data-step="3" data-intro="use here to give info">
important labels, textboxs, lists etc...
<button id="click-here" data-step="4" data-intro="click here to click">
click
<button>
</form>
</div>
<button id="introJs-button">IntroJS</button>
</body>
JS code:
$('#introJs-button').on('click', function() {
var intro = introJs();
intro.onchange(function (targetElement){
if (targetElement.attributes["data-step"].value === "3" && targetElement.attributes["data-step"].value === "4") {
var closestContainer = $(targetElement).closest('div.modal').prop('id');
$('.introjs-overlay, .introjs-helperLayer, .introjs-tooltipReferenceLayer, .introjs-fixedTooltip').appendTo('#' + closestContainer);
}
else {
$('.introjs-overlay, .introjs-helperLayer, .introjs-tooltipReferenceLayer, .introjs-fixedTooltip').appendTo('body');
}
});
})
Like I tried to show in my JavaScript code, you should only append introJs to modal when your data-steps are defined at your modal's div. The other way, introJs will always tries to append itself to the closest container and when find nothing, it will cause error/bugs.
The other important thing I encounter is when you give your modal a high z-index value you should also give your modal's item such as select2-dropdownlist higher z-index value. Or you should reset modal's z-index value. Some of the items in select2-dropdownlist like select2-search__field, select2-results__options etc. will not understand what z-index value you give to modal. And because their z-index value will be lower than the modal itself these items never be shown on modal. My suggestion is resetting modal z-index value to prevent this.
Since all JavaScript plugins in bootstrap require jQuery you can use an event listener to trigger it automatically when the modal is shown:
$('#my-modal').on('shown', function(){
introJs().start();
});
None of the solutions on the web have fixed the problem for me.
But I came up with this solution:
/*fix interactions with modal BS3, take this on CSS file*/
.modal { z-index:999999997 !important; }
.modal .introjs-fixedTooltip { z-index: 999999998 !important; }
.modal .introjs-showElement { z-index: 999999999 !important; }
//Use this class and make sure that the modal has an ID
//introJs-Bs3-modal
//The introJs have a problem with DOM positioning and reading. It is mandatory for DIVs to work within the same element as modal.
$('.introJs-Bs3-modal').on('click', function() {
var containerClosest = $(this).closest('div.modal').prop('id');
setTimeout(function(){
$('.introjs-overlay, .introjs-helperLayer, .introjs-tooltipReferenceLayer').appendTo('#'+containerClosest);
}, 0);
});