I have a page where I have a fixed navbar in right and the content of the page.
in the content of the page I have a button when I click on him it will open a dialog in the center of the page, I'm using Angular Materiel Dialogs for this.
The problem is when I open the dialog the fixed bar is always on the top of the page :
As you can see the side bar is hiding a part of that dialog box.
And this is the code i use to diplay my dialog box :
$mdDialog.show({
clickOutsideToClose: true,
controller : DialogController,
controllerAs : 'vm',
parent : $document.find('body').eq(0),
templateUrl : templateUrl,
targetEvent : event
});
As you can see I'm using $document.find('body').eq(0), as a parent for the dialog, but why this dialog is never on top of the side bar ?
jsfiddle :
http://jsfiddle.net/jhzawjdb/17/
How can I solve this ?
#sidebar-wrapper {
z-index: 0;
}
Change z-index to 0 and this will correct the modal aka dialog box.
Override or change the z-index on #sidebar-wrapper to 0 from 1000.
http://jsfiddle.net/vcpqasyd/
Related
Say I've made a user control. I want it to have following behavior:
When its Visible property is true, users can only operate things inside it, but not anything outside of it, i.e. any other control in its containing user controls (if any) and the page is not accessible to users. (Even better if they'd also be invisible to users.)
The above effect lasts between postbacks, until its Visible is changed to false. When that happens, this user control is invisible to users, and stuff outside it are back to their normal state.
How can this be achieved?
One nice way would be to say have the UC in a div. You then pop the div with a dialog (jquery.UI dialog). When such a dialog is display, then the screen background goes gray, and only the control is visible. And if you click/use any button in that control that causes a page post-back, then it will collapse, disappear, and the page is back to normal with user being able to use.
The effect looks like this:
here is a GV to edit data. When I hit edit button, I display my UC (to edit the one row).
So, this grid:
so, this is a round about way to acheive your goal. By popping a div (with the UC inside), then we solue the "UI" for the user, focus for user in/on/looking at the pop dialog, and better yet, the whole screen background goes gray, and the user cannot select/use/click on any control on the page.
The above idea might not work for you, but if it can be adopted, then all of your messay code and handstands to disable the rest of the page is automatic done for you.
As noted, we all quite much have jQuery installed. You have to add jQuery.UI.
the code to pop the above dialog is thus then this:
<script>
function popedit() {
MyPWidth = "62em"
MyWidth = $(window).width()
if (MyWidth < 840) {
MyPWidth = (MyWidth - 25) + 'px'
}
var myDialog = $("#EditRecord");
myDialog.dialog({
title: "Edit Hotel",
width: MyPWidth,
modal: true,
appendTo: "form",
dialogClass : "dialogWithDropShadow",
close: myclose
});
}
So, above pops the "div" called EditRecord, and it does the rest for you.
It turned out to be actually pretty easy:
Lay a <div class="overlay"></div> as the topmost element inside the user control, enclosing any other elements and child controls. And define a .overlay class in the site CSS stylesheet as something like this:
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
overflow: auto;
Is it possible to continue scrolling through a webpage even if you are touching inside an iframe? This problem only happens with iOS devices and I couldn't find any solutions for this!
My current page contains an iframe in the middle with width:95% and about 500px height, so when I reach the iframe I can't scroll any more (unless I touch very close to the sides).
Thanks
In my case, I had full access to the iframe and was dynamically inserting its content. Still, none of the solutions suggested by Brandon S worked. My solution:
Create a transparent div overlaying the iframe.
Capture any click events on the overlay and replicate them within the iframe (to allow the user to click on links/buttons)
This works because the overlaying div is part of the outer document, making it respond to touch/click events normally, and prevents the user from directly interacting with the iframe content.
Html Template:
<div style="position: relative;">
<div
style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0;"
ng-click="$ctrl.handleOverlayClick($event)"
></div>
</div>
Controller (AngularJS component)
...
constructor ($document, $element) {
this.iframe = $document[0].createElement('iframe');
this.iframe.width = '100%';
this.iframe.height = '100';
this.iframe.sandbox = 'allow-same-origin allow-scripts allow-popups allow-forms allow-top-navigation';
const element = $element[0].children.item(0);
element.appendChild(this.iframe);
this.contentDocument = this.iframe.contentDocument;
}
handleOverlayClick ($event) {
// Overlay element is an invisible layer on top of the iframe. We use this to
// capture scroll events which would be in the iframe (which don't work properly on iPad Safari)
// When a click is detected, we propigate that through to the iframe so the user can click on links
const rect = $event.target.getBoundingClientRect();
const x = $event.clientX - rect.left; // x position within the iframe
const y = $event.clientY - rect.top; // y position within the iframe
// triggering click on underlaying element
const clickedElement = this.contentDocument.elementFromPoint(x, y);
clickedElement && clickedElement.click();
}
It sounds like the iframe is receiving the user's scroll event, instead of the page. This can happen when part of the iframe's content doesn't fit within the size of the iframe element.
A solution to this problem is to stop the iframe from ever trying to scroll. There are few ways to accomplish this:
In iframe's HTML, add this CSS:
html, body {
overflow: hidden
}
If you don't have access to the iframe's HTML (because maybe the iframe is loading a 3rd party's content), you can put a wrapper div around the iframe and disable scrolling that way. Add this to the parent page HTML:
<div style="overflow: hidden"><iframe src="example.com"></iframe></div>
You can add this to the parent page HTML CSS to make browser use momentum so that ends up scrolling past the bottom of the iframe and then scrolls the page:
*{
-webkit-overflow-scrolling: touch
}
Add the legacy "scrolling" attribute to the iframe to stop the iframe from trying to scroll:
<iframe src="example.com" scrolling="no"></iframe>
I want to relocate my bootstrap popover in the left side, i.e. I want to move the whole popover in the left side, while the white arrow would stay in one place.
I would like to have the effect which is on google.com website, when you click blue icon you see popover but its content is relocated while the white arrow is located under the user.
I know that I can use something like this:
.popover {
top:0 !important;
margin-top:10px;
}
Unfortunately, it relocates the whole popover altogether with white arrow.
What I have now (popover is on the right side and there's no place between screen edge and my popover)
What I want to have (small distance between popover and monitor's edge):
“I want to change the position of content of this popover so that this
arrow will be placed further on the left„
When the popover is shown the arrow position is calculated in Tooltip.prototype.replaceArrow based on width/height and placement. You can force a specific position with this CSS :
.popover .arrow {
left: 90px !important; /* or 45% etc */
}
But that will affect all popovers. Popovers is injected and removed to and from the DOM, and there is by default no way to target visible popovers individually. If you want to style the arrow on a specific popover, a workaround is to hook into the shown.bs.popover event, detect which popover that is being shown, and style the arrow for that popover if needed. Example :
.on('shown.bs.popover', function() {
var $popover = $('.popover')[0];
switch ($(this).attr('id')) {
case 'a' : $popover.find('.arrow').css('left', '10px');break;
case 'b' : $popover.find('.arrow').css('left', '40%');break;
case 'c' : $popover.find('.arrow').css('left', '180px');break;
default : break;
}
})
To get this to work, there must be only one popover shown at a time (see fiddle). It can be worked out with multiple visible popovers also, but then we need to add some HTML to the popover content.
see demo -> http://jsfiddle.net/uteatyyz/
As what I have understood so far, you want to achieve the popover to the left of the button.
Please check this Plunker Link
HTML Code:
<div class="pull-right">
<button type="button" mypopover data-placement="left" title="title">Click here</button>
</div>
Angular Code:
var options = {
content: popOverContent,
placement: "bottom",
html: true,
date: scope.date,
trigger: 'focus'
};
I have edited the answer as per the images that you have shown.
If this is not is answer, then please comment below.
Regards D.
I'm having some problems with the resize of the Google Maps JavaScript API v3. If I set the CSS "parameters" right on load (just in the documentation) the map will show 100% height and width - no problem. But when I try to get the same result by clicking on a link it's not showing the whole map.
I have tested both css() and toggleClass() in jQuery on this event. toggleClass() makes the map goes invisible (hides the map completely rather than makes it full screen) with this code:
// jQuery
$('#weather-map').toggleClass('test');
// CSS
#weather-map.test {
height : 100%;
width : 100%;
top : 0;
left : 0;
position : absolute;
z-index : 200;
}
css() works (the map goes full screen) but the image above shows how the map renders upon full screen:
$('#weather-map').css({
'height' : '100%',
'width' : '100%',
'top' : '0',
'left' : '0',
'position' : 'absolute',
'z-index' : '200'
});
I wonder now, why does it act like this? Have I missed something or is this method not the right one to toggle full screen of the map?
Thanks in advance.
It's just because of how Google's mapping Javascript works. It renders based on the container's size, and doesn't add any kind of handler to re-render in case the container gets re-sized thereafter. I imagine that in your example above, you'd have to just call the map initialization code a second time to render the map again in your resized div.
I am using addthis as a vertical toolbox with the popup to be displayed on hover in a fixed element.
But when scrolling, the popup is displayed somewhere else. I tried using configs of offset top and left, but there were of no use. Is there any solution for this ???
DEMO here ----> http://jsfiddle.net/vaakash/QzjxR/1/embedded/result/
I tried using the code using jQuery and fairly satisfied my needs. So. here i used the on "mousemove" event to position the popup and it did worked.
$('.addthis_button_compact, .addthis_bubble_style').mousemove(function(e){
$('#at15s').css({
'top': e.pageY - 200 ,
'left': e.pageX - 200
});
});
Apparently there is no fix, according to the AddThis people.
This happens because we don't
recalculate the position of the DIV
after the menu is invoked. What I
would do is disable the compact menu
and set the button to only use the
expanded (full) menu, which is auto
centered.
So change <a class="addthis_button_compact"></a> to <a class="addthis_button_expanded"></a>
http://www.addthis.com/forum/viewtopic.php?f=5&t=24157
I ran into a similar situation where I had a div that dynamicly changed from normal to fixed positioning based on the scroll position (it was a sticky menu halfway on the page).
In the end I fixed it with this code:
// begin Fix for the AddThis menu positioning..
$(".sharing").bind("mouseenter", function (e) {
var isSticky = $(".sharing").hasClass("sticky");
var buttonPos = $(".addthis_button_compact").offset();
addthis_config.ui_offset_top = isSticky ? buttonPos.top - 9 : 0;
});
// config for the AddThis menu positioning, needs to be in the global scope..
var addthis_config = { ui_offset_top: 0 }
See AddThis menu offset for help on the addthis_config parameter.