I don't want the scroll to be opened when clicking the image for Lightbox
Error link : https://cdn.pbrd.co/images/HSzC8Ly.jpg
Source Code download link : https://lokeshdhakar.com/projects/lightbox2/
Problem solved.
The height is taking a very high value. This height comes from the lightbox.js file. The overflow problem is troubleshooted when you do height:100% in the css class
Add the following line to the .lightboxOverlay class in css.`
.lightboxOverlay {height:100% !important; /* for Lightbox Scroll hide */}
You need to add the option disableScrolling to prevent the page from scrolling while Lightbox is open:
lightbox.option({
'disableScrolling': true
})
Related
Has you can see here :
https://live-example.bss.design/ (live example)
When I open a modal (click on signup on the top menu, then on the button) the background move since the modal put the body overflow hidden.
How can I avoid that ?
Actually that background not moving. When Modal is open then it apply the style
body{overflow:hidden;}
So the scroll bar is disabled. So the window expanded, not only the background
is moving.
If you don't like that please use following code,
body.modal-open {
overflow: auto;
}
You can remove the background movement by using the below code
.modal-open, body {overflow: inherit !important;}
"modal-open" class is added to the body.
You need to change js that adds modal-open. I know it is a strange behavior, but you have to do it :)
Intercept modal click for show and remove class to body adding to another element:
i. Modal is first added to Body and then removed and added to another element
$('#signUpModal').on('shown.bs.modal', function (e) {
$(body).removeClass('modal-open');
$('#otherElement').addClass('modal-open');
});
ii. and then intercept also the close of the modal and add an execution of a second remove:
$('#signUpModal').on('hidden.bs.modal', function (e) {
$('#otherElement').removeClass('modal-open');
});
And you'll be fine :)
I'm using Minton Template (http://coderthemes.com/minton_2.1/blue_hori/index.html)
As you can see from the image above, the top of datepicker being blocked by the fixed header menu. It seems the datepicker not automatically being placed at the bottom of the input field.
This is the JS code that I used.
jQuery('#date-range').datepicker({
toggleActive: true
});
This happen on smaller screen. Bigger screen display correctly with the datepicker placed at the bottom of the input field as image below.
I dont want the menu blocks the datepicker. Please help.
check the z-index of datepicker. the z-index in the css should be greater for the datepicker class than for the menubar.
check this link for more information about z-index
I'm using Primefaces 5.3, and AdminLTE 2 as a template for my website (Which based on bootsrap).
The problem is when I open a dialog box, this dialog gets hidden by the top navbar, and this topbar doesn't get disabled I can still click on its links.
[![enter image description here][2]][2]
As you can see in that picture a portion of the dialog box is hidden by the top nav bar.
How can I solve this problem ?
Without a sample code to work and check your issue. Here is a probable solution that i can suggest to you. Check the z-index of the navbar and the dialog. Try setting z-index for both where the dialog box z-index value is greater than the navbar.
I'm working on a phonegap app that has a fixed sidebar behind the page and I found an behavior issue.
The sidebar is hidden, the user can see it with a tap on a menu icon. When the user tap on he icon the page go to the right and it shows the sidebar that is in a minor z-index.
If the user want to close the menu he have to drag the visible part of the page to the left.
My problem was that in the sidebar I have a block that is vertically scrollable. It works fine but the thing is, if I put the .scroll (overflow-y: scroll; -webkit-overflow-scrolling: touch;) class in this element and the user swipe horizontally from right to left over it the sidebar and the page start a drag.
We're using snap.js for the sidebar interaction.
I want to disable this drag. I tried with CSS and preventing horizontal scroll but it doesn't work.
I attach a pic for more visual details.
Use iScroll5 for scrolling.
Then hook into the onScrollStart event:
myScroll.on('beforeScrollStart', function(event)
{
if (isPanelOpen){
myScroll.disable();
}
else{
myScroll.enable();
}
});
Or - if you not wanna use iScroll5, you can set a global bool, which indicates, if a panel is open (you've gotta do this anyway).
If a Panel is open (meaning, you're showing the sidebar) set the bool to true in snap.js - this subsequently means, you've gotta tweak snap.js.
Then, on touchmove, check the bool if it is true. Then you know, a panel is open, and you can do a event.stopPropagation on touchmove in order to prevent the event bubbling up to get recognized by snap.js and avoid the panels closes too early.
Woop! We found it!
The problem was that we're catching the touchmove event for each element with .scroll class and we're stoping the propagation of it.
We had notice that when we tried to start a horizontal scroll all page was moving like a drag so we added this CSS property:
html, body, .ui-mobile .ui-page-active { overflow-x: hidden; }
And...it works fine!
P.S. we don't actually need the horizontal scroll in any element, so, this is fine for us.
I have an html page where we have images,text and two buttons
1.print page for printing the page
2.Hide/Show(toggle button) for hide/show below the image.
image in the page are generated dynamically using remote service.
In Google-Chrome
When I click Hide/Show button to hide image and click print button,print preview page comes on the same page.
Then I cancel print page and back to page.
Then I again click Hide/Show button to show image
here the problem is that image is not shown on the page.
Using firebuglite I found that inline css style like width and height for image are 0 and hence image is not shown on the page.
How can I manage the css style for image after print preview and this problem occurs only in Chrome.
Please help.
here is CSS Browser Selector using javascript:
http://rafael.adm.br/css_browser_selector/
you can use that,then add the class:
.chrome #btn{
height:30px !important;
width:100px !important;
}