I have a jQuery modal window that appears upon click of a button. I have a on the close-modal box where I want to capture the editable text of the modal window upon closing and so I want to make the modal full screen so the user cannot simply click on the main page thus rendering the action on the click of the close modal defunct.
I have tried setting the position as absolute with top:0 left:0 bottom:0 right:0 as mentioned on some posts but this is not working. The modal is being displayed relative to the position of the click despite setting the values in line so I am unsure as to why this is happening. It keeps adding random values to the top style despite being specified.
Is there anyway round this?
Have you try to put the div of the modal window right after de tag? And try to aadd body, html {width:100%; height 100%; }
Related
I have a BModal component imported from from "bootstrap-vue"; Normally modal is fixed on the page, but I want my modal to work as a dropdown. so when the modal is opened I should be able to scroll the page and also when i scroll the page the modal should go up instead of staying on the same position more or like how an opened dropdown goes up when I scroll a page.
<div ref="buttonDiv">
<button/> //on click of this button the modal will be opened
</div>
<BModal id="modalDropdown" />
right now when I can make the screen scroll, but the modal stays on top. My idea is to get the top margin of the button when the page is being scrolled so that I add that top margin to the BModal so it's topmargin changes accordingly.
topMargin = this.$refs.buttonDiv.getBoundingClientRect().top; //it gives the margin top of the button when the page is scrolling
My problem: I can not add a style or class to it's not that I can not, I can but I can not see any changes on the modal dialog.
in css if I do
::v-deep .modal-dialog {
margin-top: 200px
}
it changes but I want to make the margin-top value to be dynamic and want to use the top margin that I have from the button.
also tried:
this.$nextTick(() => {
let dialogue = document.querySelector(".modal-dialog");
dialogue.style.marginTop = "100px";
});
did not work. I know I could have used BDropdown directly instead of BModal when I want the modal to act as a dropdown, but there were some compilcations using bdropdown.
Any help would be appreciated ! thank you!
Let's see if someone comes up with something. I have the following problem:
I need to know, with javascript or jquery, when an element has finished displaying on the screen.
It is a table that is displayed on the screen as a modal popup window. It has a main container div with the size of the entire viwport, with a z-index of 10000 and display flex so that the div that acts as a popup window is centered. What I need to know is the clientWidth and offsetWidth properties of the body of the table to determine the width of the scroll bar which is equal to offsetWidth - clientWidth, and apply this width to the right margin of another div.
When the table is finished filling in a javascript function, the d-flex class is added to the main container so that the popup modal window is displayed.
The problem is that until the popup is not physically seen on the screen it gives me that both properties are the same, that is, there is no scroll bar visible. Only when popup appears on the screen is that they are different because there is a scroll bar. The scroll bar only appears when the popup has been physically displayed on the screen.
If I ask for any visibility properties they tell me that everything is visible but it hasn't really been shown on the screen yet.
I've even tried with a jQuery extension of the show function, but it doesn't give me the results I need either.
Thank you very much for your collaboration.
Greetings
You could do a work around IF you never desire the two property values to be the same. You could implement a setInterval to keep checking the property values:
let x = setInterval(function(){
if (propertyValue1 !== propertyValue2){
clearInterval(x);
//do or trigger any code that you need to here
}
},100)
I am using a bootstrap modal to get some information from user. Inside the modal-content class I have given a <textarea /> field to let user provide comment. This textarea is and should remain resizable. But the problem is when the user resizes the text area and closes the modal, the textarea shows previously changed size and it does not reset to original.
Please follow the link below to reproduce the issue:
Open Modal, Resize the textarea so that it will stretch even outside the modal
Now click on close
Open the modal again, the previously changed size of textarea will be shown.
Note that CSS resize: none; is not the option I DO want the textarea should be re-sizable.
Also, I have jquery available, Is there option with jquery to reset the size when the modal closes automatically?
Edit: The duplicate suggestion is different as the textarea here comes within a bootstrap modal.
Demo
When the modal is closed (hidden.bs.modal event) reset the textarea height and width.
$('#myModal').on('hidden.bs.modal', function() {
$(this).find('textarea').css({'width': '', 'height': ''});
})
JSFiddle
http://semantic-ui.com/modules/popup.html#/examples
I have used the pop up described above and it works well. The only thing I see that I have a blue coloured page header div (width 100%, height 200px, z-index:9998).
I have a series of images below that on the page. The pop up triggers when an image is clicked. However for some reason the pop up window is popping up under the page header div when an image near the top of the page is clicked.
How can I make the pop up appear over the top of that header div?
If I need to set the z-index of the div, where do I set it and on which element/class?
I guess you need this, like document says: https://semantic-ui.com/modules/popup.html#/settings
set this attibute to false -> movePopup: false
$('#button_event_trigger').popup({
popup: $('.custom.popup'),
movePopup: false, //this here
on: 'click'
});
In my case, I had a button inside a sidebar, that needs trigger the popup, then popup appears inside the container with overflow hidden, and css z-index was not working.
Search for 1190 in semantic-UI.css. Override the value.
I have a website that uses dialogs. When I open that dialogs the body scrollbar is hidden and the scrollbar of the div that contains the dialog shows its scrollbar.
But, when I hide the body scrollbar, the content moves to the begining. How do I keep the position of the content when the dialog is opened?
For more information about this question, look the photos on Facebook. When you click a photo, I like to do that.
Can you give us the code you are using or a link to the site you are talking about? How are you hiding the scroll bar?
If it is by changing the overflow style property to hidden then am I correct in guessing that this only occurs the first time you show the dialog and subsequent appearances of the dialog do not move the content back to the top? If so I am not sure of the best way to prevent this but a quick hack would be to get your javascript to assign the overflow style property of the 'body's container div to auto upon loading.
Add the following to the top of your javascript:
window.onload = function ()
{
document.getElementById('container').style.overflow = 'auto';
}
where container is the id of the div containing your 'body' code.
try to use JavaScript to move the scroll to position:
document.getElementById('container').scrollTop = 50;
above will move scroll bar 50pix to the top, and you can get the max scroll height by:
document.getElementById('container').scrollHeight
Wait, I can't understand your question to well. If you wish to hide the scrollbars, use CSS to hide them.
<style type="text/css">
selector {
overflow: hidden;
}
</style>