I have an angular material 2 date-picker implemented in a bootstrap modal form:
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">{{title}}</h4>
</div>
<div class="modal-body">
<div class="timeline-cal">
<input class="date-field" [mdDatepicker]="picker" placeholder="Choose a date">
<md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
<md-datepicker #picker></md-datepicker>
</div>
<div class="modal-footer">
<button type="button" class="btn grey-btn pull-right" (click)="cancel()">Cancel</button>
</div>
</div>
</div>
However, upon clicking the button, the datepicker wouldn't open in the modal dialog itself but opens in the background. I tried this but didn't help:
.mat-datepicker-content{ z-index: 1200}
try,
::ng-deep .cdk-overlay-container {
z-index: 1200 !important;
}
Or this
/deep/ .cdk-overlay-container {
z-index: 1200 !important;
}
For me this worked:
::ng-deep .cdk-overlay-container {
position: fixed !important;
z-index: 100000 !important; /* set value you need */
}
You have to specify certain position for z-index.
Note: z-index only works on positioned elements (position:absolute,
position:relative, or position:fixed).
CSS z-index # W3Schools
Add this code in the component html file :
<style>
::ng-deep .cdk-overlay-container {
z-index: 2000;
</style>
Hope fully this will resolve the issue !!!
Related
I have implemented ng2-image-viewer library to my image view and it's dynamically loading many HTML components. I wish to change the CSS of some of the dynamically loaded elements.
Here is what i have by default.
The HTML component of above before rendering is as follows,
<div class="image-viewer-container">
<app-image-viewer
[images]="[artURL]"
[loadOnInit]="true"
[idContainer]="'idOnHTML'"
[showOptions]="false"
>
</app-image-viewer>
</div>
The HTML component of above after rendering is as follows,
<div _ngcontent-pyx-c10="" class="image-viewer-container">
<app-image-viewer _ngcontent-pyx-c10="" _nghost-pyx-c11="" ng-reflect-id-container="idOnHTML" ng-reflect-images="http://localhost/artworks/art/" ng-reflect-load-on-init="true" ng-reflect-show-options="false">
<div _ngcontent-pyx-c11="" class="image-gallery-2" id="idOnHTML">
<div _ngcontent-pyx-c11="" class="image-container iv-container">
<div class="iv-wrap">
<div class="iv-loader" style="display: none;"></div>
<div class="iv-snap-view" style="opacity: 0; pointer-events: none;">
<div class="iv-snap-image-wrap"><img class="iv-snap-image" src="http://localhost/artworks/art/a/aagaard/rosegard.jpg" style="width: 137.062px; height: 149px;">
<div class="iv-snap-handle" style="top: 0px; left: -130.863px; width: 398.787px; height: 149px;"></div>
</div>
<div class="iv-zoom-slider">
<div class="iv-zoom-handle" style="left: 0px;"></div>
</div>
</div>
<div class="iv-image-view">
<div class="iv-image-wrap"><img class="iv-image iv-large-image" src="http://localhost/artworks/art/a/aagaard/rosegard.jpg" style="visibility: visible; width: 597px; height: 649px; left: 570px; top: 0px; max-width: none; max-height: none;"></div>
</div>
</div>
</div>
<div _ngcontent-pyx-c11="" class="inline-icon" style="background-color: rgb(1, 118, 189);">
<div _ngcontent-pyx-c11="">
<!--bindings={
"ng-reflect-ng-if": "true"
}-->
<a _ngcontent-pyx-c11="" class="image-viewer-tooltip ng-star-inserted">
<!--bindings={
"ng-reflect-ng-if": "true"
}--><span _ngcontent-pyx-c11="" class="tooltiptext filterTooltip ng-star-inserted"><span _ngcontent-pyx-c11="">Show only PDF:</span><i _ngcontent-pyx-c11="" class="material-icons">close</i></span><i _ngcontent-pyx-c11="" class="material-icons footer-icon" style="color: white;">picture_as_pdf</i></a>
</div>
<!--bindings={
"ng-reflect-ng-if": "false"
}-->
</div><i _ngcontent-pyx-c11="" class="material-icons prev">keyboard_arrow_left</i><i _ngcontent-pyx-c11="" class="material-icons next">keyboard_arrow_right</i>
<div _ngcontent-pyx-c11="" class="footer-info" style="background-color: rgb(1, 118, 189);"><span _ngcontent-pyx-c11="" id="current">1</span>/<span _ngcontent-pyx-c11="" class="total">1</span></div>
</div>
</app-image-viewer>
</div>
All i'm trying to do is apply following to the rendered HTML by simply defining them in SCSS but it's not seem to be working.
.iv-snap-view{
visibility: visible !important;
opacity: 1;
}
.image-gallery-2{
visibility: hidden;
}
As the component's style is encapsulated (You can read more about this here), you have two options:
Create a global stylesheet and add the styles needed there, or just copy the global styles into src/styles.css
Use ::ng-deep. You can find more info here
Applying the ::ng-deep pseudo-class to any CSS rule completely disables view-encapsulation for that rule. Any style with ::ng-deep applied becomes a global style. In order to scope the specified style to the current component and all its descendants, be sure to include the :host selector before ::ng-deep. If the ::ng-deep combinator is used without the :host pseudo-class selector, the style can bleed into other components.
Note: Even though the ::ng-deep is deprecated, it is not specified when it will be removed as there is no alternative for now.
Here is the HTML Code, check out this fiddle for full working code -
https://jsfiddle.net/fmqgeqby/
<a class="" href="#popup1">Get a Quote</a>
<div id="popup1" class="myoverlay">
<div class="mypopup">
<h2>REQUEST A PHONE CALL</h2>
<a class="myclose" href="#">×</a>
Is there any possible solution for this to close popup, when user click outside of site?
Sorry the jsfiddle didn't work so I couldn't see it but can you change it to use bootstrap? Bootstrap's modal works very well.
If not, you could mimic some of what they're doing with your own code.
https://www.w3schools.com/bootstrap/bootstrap_modal.asp
One way to go with is using html labels with hidden checkbox. You will need two labels to be able to toggle the checkbox - one outside of the popup and another inside. Not the cleanest solution, but works:
HTML:
<label for="toggle">Get a Quote</label>
<input type="checkbox" id="toggle">
<div id="popup1" class="myoverlay">
<label for="toggle"></label>
<div class="mypopup">
<h2>REQUEST A PHONE CALL</h2>
<a class="myclose" href="#">×</a>
<div class="mycontent">
<p> Hello </p>
</div>
</div>
</div>
CSS:
input[type=checkbox] {
position: absolute;
left: -999em;
}
input[type=checkbox]:checked ~ #popup1 {
visibility: visible;
opacity: 1;
}
#popup1 label {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
Full example here
Is it possible to make this chili img to a "a href". The function of the pop up is working fine, but there is no "hand", when you hover the picture.
Link to my portfolio
HTML
<img
src="/images/thumbs/image1.jpg"
data-toggle="modal"
data-target="#myModal1"
alt="Trolltunga, Norway"
width="300px"
height="200px"
>
<div id="myModal1" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<img src="//placehold.it/1000x600" class="img-responsive">
</div>
</div>
</div>
</div>
JS
function centerModal() {
$(this).css('display', 'block');
var $dialog = $(this).find(".modal-dialog");
var offset = ($(window).height() - $dialog.height()) / 2;
// Center modal vertically in window
$dialog.css("margin-top", offset);
}
$('.modal').on('show.bs.modal', centerModal);
$(window).on("resize", function () {
$('.modal:visible').each(centerModal);
});
img:hover{
cursor: pointer;
}
Add this to your css
You could add this,
img{
cursor:pointer;
}
cursor:pointer indicates that as link. But actually in your codes there is no <a> tag around your image so you can change your cursor property.
Simple use this code in your css.
img:hover{
cursor: pointer;
}
So I'm making a website (suprise, suprise) and I have a button on the top of the page, and when I click it, it does nothing. I am wondering how to fix it.
The button
<button class="Learn-Link" href="#VideoSlide">Learn How
<div class="Learn-Triangle"></div>
</button>
And the part I want to travel to
<div class="Slide" id="VideoSlide">
<!--More code here, but not relevant-->
</div>
button doesn't have an href attribute you need to add an a tag inside your button
#VideoSlide{
position: relative;
top:1000px;
height: 100px;
background: pink
}
<button class="Learn-Link" >Learn How
<div class="Learn-Triangle"></div>
</button>
<div class="Slide" id="VideoSlide">
<!--More code here, but not relevant-->
</div>
You can trigger button by using javascript
Eg:-
<button type="button" onclick="alert('Hello world!')">Click Me!</button>
I want to remove the footer from my modal. But it is only removing the contents and not the space acquired by it.
Here is my code...
<div class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">× </button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
</div>
If you don't use '<div class="modal-footer">' in your modal template then bootstrap will made it for you. I think this is why you see the footer with your code.
My solution is hidding the footer in the template (last line) :
<div class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">× </button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer" style="display:none"></div>
</div>
Try this
<div class="modal-footer" hidden="true"></div>
I'm pretty sure the "extra space" is the <p> margin. Try this css :
.modal .modal-body p {
margin-bottom: 0;
}
I think its because of the padding given to modal-footer class. Try overriding it
.modal .modal-footer {
padding: 4px;
}
I have kept it as 4px to preserve round corners
You can override modal-header, modal-footer of the bootstrap modal.
Add the following code.
.modal-footer{display: none;}
This can be achievable using jQuery
require(
[
'jquery',
'Magento_Ui/js/modal/modal'
],
function(
$,
modal
) {
var options = {
type: 'popup',
responsive: true,
innerScroll: true,
buttons: []
};
$('#approvalsModal').modal(options,{
closed: function(){
// Do some action when modal closed
}
});
$(".approvalsModal").click(function(){
$("#approvalsModal").modal('openModal');
});
}
);