I am using the ngToast to display the success messages in angularJs, but success message is displaying behind the modal popup.
How can I display the ngToast message on top of the Modal Popup?
Add the following to your CSS:
toast {
z-index: 7000;
}
Bootstrap modal has a z-index of 1040, so anything above that should make the toast message appear over the modal.
Try This
#toast-container {
z-index: 9999999;
}
Check the z-index of your modal by inspecting modal element( eg: if it is 1050). add any value above this index to your toast will work
toast {
z-index: 1051
}
EDITED:
I've found the solution.
In my case I had to use a huge number for z-index, but also I had to use in other css class, as follows:
.ng-toast {
z-index: 100000; // I don't have any ideia why, but worked!
}
Check your modal z-index. And check your toastr z-index. Anything appearing on modal should have a higher z-index than modal z-index.
if your modal z-index is 999
.modal {
z-index: 999
}
toastr z-index should be anything above 999
Related
In my project using React with Typescript I am trying to print a div with some data.
Basicaly This div is in a modal, I gave it an id (id='printablediv'). Then when you press print on the modal I run this function :
const Print = () => {
let printContents = document.getElementById('printablediv')?.innerHTML!;
let originalContents = document.body.innerHTML;
document!.body!.innerHTML! = printContents;
window.print();
document.body.innerHTML = originalContents;
setIsModalOpen(false)
}
Then problem is that when I click print and the print page opens and I print the div, after that the page freezes. and I cant do anything. I have to reload the page. Even if i don't print and press cancel, it still freezes. Has anyone encountered with problem?
I am trying not to use a library such as react-to-print.
Edit:
This is where i call the Print function:
<TicketModal
isOpen={isTicketModalOpen}
onAnulla={onCloseTicketModal}
onPrint={Print}
code={createResponseCode}
pin={createResponsePin}
id={user.uid}
currency={createResponseCurrency}
amount={createResponseAmount}
/>
the onPrint is the prop connected to the modal button
<Button size="lg"
variant="primary"
className='ticket-modal-card__button'
onClick={onPrint}
>
Print Ticket</Button>
I found the solution.
Apparently the problem is I'm removing the original content, and then replacing it with new, different content, so all the event listeners and metadata react had attached to the original content is lost. innerHTML doesn't include those things (setting innerHTML is probably never what you actually want to do in any situation).
To print just part of a page, I set up a print stylesheet that changes the styling of your page when printing, and not change the HTML itself.
.printme {
display: none;
}
#media print {
.no-printme {
display: none;
}
.printme {
display: block;
}
}
This way I can Display and hide everything I want and print only the part I need.
I use react-modal to create a open modal form (similar create post modal form facebook).
My expect:
When modal is open: scrollbar of window still show but thumb disabled (user can't scroll)
When modal is close: scrollbar of window show and thumb show.
My problem:
When modal is open, scrollbar always on top (top = 0). I know because my css body { position: fixed } but I want modal look like my expect
Here is my codesandbox for my problem: https://codesandbox.io/s/scroll-modal-form-rw2sf
Sorry about my bad english and thanks for your help.
I set the style of class ReactModalPortal and adjust the z-index. In addition remove the style of body. There is a sandbox
/* index.css */
.ReactModalPortal {
height: 100%;
width: 100%;
position: absolute;
top: 0;
z-index: -1;
}
// App.js
...
const portal = document.querySelector(".ReactModalPortal");
portal.style.zIndex = 0;
...
const portal = document.querySelector(".ReactModalPortal");
portal.style.zIndex = -1;
Maybe it is not as your expectation, but you could modify it.
I have an overlayed view in my React Native app which I need to animate on and off screen when the user pushes a button. I know how to position the view and animate it but I can't work out how to trigger the animation.
My redux store has a very simple state with an isOpen flag saying whether the panel is open or closed. I map the state to the panel component's props and when the isOpen prop changes I want to trigger the open or close animation. Obviously if the user presses the toggle button mid animation the currently running animation needs to be cancelled.
This should be simple but I can't find any examples. Any help would be much appreciated.
React Native
To begin an animation on a change of props you can simply start your animation in componentDidUpdate. Here's an example:
componentDidUpdate(prevProps) {
if (this.props.isOpen !== prevProps.isOpen) {
this.state.animation.start();
}
}
Assuming your animation is defined in the component's state.
React (Browser):
[Not relevant to this question but potentially useful.]
A simple way to do this is using CSS transitions. What you can do is give the panel component a CSS class for closed (or open but I find using the closed/collapsed as a style easier because then the default is open).
Then in your panel's render:
render() {
const { isOpen } = this.props;
return <div className={ 'panel' + (isOpen ? '' : ' closed') }></div>
}
And in your CSS:
.panel {
/* some other styles */
transition: .5s ease-in;
}
.closed {
height: 0;
}
This way CSS can handle the animation logic and your concern of clicking the open/close button before the current animation has finished is addressed.
Here are the CSS transition docs: https://developer.mozilla.org/en-US/docs/Web/CSS/transition
Edit: A disadvantage of this method is that height must be explicitly set when the panel is open.
Here's a little example snippet:
function togglePanel() {
const panel = document.querySelector('div.panel');
if (panel.classList.contains('closed')) {
panel.classList.remove('closed');
} else {
panel.classList.add('closed');
}
}
.panel {
background-color: #00c0de;
height: 4rem;
overflow: hidden;
transition: .5s ease-in;
}
.closed {
height: 0;
}
<button onclick='togglePanel()'>Toggle Panel</button>
<div class='panel closed'>
<span>Hello, I'm the panel</span>
</div>
I know that react uses its own synthetic implementation of events. However it appears to me that they are not exactly like standard html and this is a problem. In my case I have a checkbox that is a sibling of some img tags. There are two img tags, one for representing checked and another unchecked. I have some css styling that does a display none when the checkbox is in an unchecked state. Trying to get this html/css working with react is hard. It appears that the click event is not propagating onto the checkbox sibling with a react component, although it works from standard html. Note as there's some confusion I know that the non-react version of this is using css and not events. But I'm trying to implement a react evented version of the same thing, and was expecting normal html event propagation behavior--which I'm not seeing. Also note the checkbox is a sibling of the label. It's also transparent, so the user never actually clicks on the checkbox they click on the img tags.
.checkbox-image input[type="checkbox"] + label img.selected {
display: none;
}
.checkbox-image input[type="checkbox"] + label img.unselected {
display: block;
}
<div class="checkbox-image"><input id="portfolio-standard-dev" type="checkbox" data-name="PortfolioStandardDeviation"><label for="mp-chart3"><img class="unselected" src="/images/img-843599.png"><img class="selected" src="/images/img-1b9f30.png"><span>Portfolio Standard Deviation</span></label></div>
CSS has nothing to do with events. An event propagation cannot impact your styles.
You have to handle when the user check/uncheck the checkbox and manually update the class of the image.
Or you can try the following pure CSS:
.checkbox-image input[type="checkbox"]:checked + label img {
display: none;
}
.checkbox-image input[type="checkbox"] + label {
display: block;
}
Using Bootstrap and Angularjs I'd like to create a button that doesn't ever appear to be "active". I'd like the button to darken slightly when the mouse is over it, and I'd like it to darken further when it's clicked. When the mouse leaves the button, however, I'd like it to return to its original appearance.
Semantically, I'm using the button to "reset" part of my app. I want to execute some code when it's clicked. After it's been pressed, though, it doesn't make sense for the button to remain in a "depressed" state.
Here's a live example.
Any ideas?
Alternatively you could use the ng-mouseenter and ng-mosueleave directives.
For example:
<div ng-app="ButtonApp">
<div ng-controller="MainCtrl">
<button ng-class="buttonClass"
ng-mouseenter="onMouseEnter()"
ng-mouseleave="onMouseLeave()"> Click Me!
</div>
</div>
And in your controller:
var app = angular.module('ButtonApp',[]);
app.controller('MainCtrl', ['$scope',function($scope){
var defaultButtonClass = ['btn','btn-foxtrot'];
$scope.buttonClass = defaultButtonClass;
$scope.onMouseEnter = function(){
$scope.buttonClass = ['btn','btn-bravo'];
};
$scope.onMouseLeave = function() {
$scope.buttonClass = defaultButtonClass;
}
}]);
You can see my JSFiddle.
To generate the button colors you could use something like Beautiful Buttons for
Twitter Bootstrappers.
I'd give it another class, say btn-reset and add the following CSS.
// the order of these two is also important
.btn-reset:hover{
background-color: Dark !important;
}
.btn-reset:active{
background-color: Darkest !important;
}
// you need this to reset it after it's been clicked and released
.btn-reset:focus{
background-color: Normal !important;
}
It's working here http://plnkr.co/edit/QVChtJ8w70HXmyAaVY4A?p=preview
The issue is that the :focus pseudo class has a darker colour than the standard button so after it's been clicked it still has focus so still has the darker colour, if you want to stick with the standard colours you can just add a new selector for the :focus pseudo class.