i am using tabbed content inside the lightbox.
When a tab is clicked and the content dimension differs, the lightbox is resized.
How can i prevenis behaviour?
The size of the lightbox should not change after initial load?
Regards, Robert
It's not officially supported.
I think the following would work though:
delete $.Featherlight._callbackChain.onResize;
Related
Bootstrap 5 Modal does not work properly on scroll, after adding some content dynamically - which cause Modal's height exceeds than earlier.
Let me explain!
I opened a Bootstrap Modal by clicking on the 'Add Make' button.
Modal just appeared properly, and it have a form having up to 5 inputs.
See attached image
Note: Still modal is working properly on scroll.
Now I just entered values in these inputs. And there are 2 inputs of type 'file', which I am using to upload a Image (One for 'icon' and Other one is for 'thumbnail'). And I am also showing these images underneath each of this input of type file. Which is a kind of preview box for me to show that Image which is going to be uploaded.
As that preview box is hidden by default. And when we select a file then that preview box appears with the selected image.
See attached image
Note: Now, modal height has been exceeded than before. And has gone
out of windows height. And now our modal should scroll along with our
windows scroll-bar on scrolling. (This is the common behavior of
modal)
But, in my case, Modal is not getting scrolled properly. I just scroll down, and it scroll back automatically.
In short, I am facing a scrolling issue with my modal after adding dynamic content to my Bootstrap modal which change modal's dynamic height.
I have tried many solution but still failed to resolve this issue.
I have tried the following:
Adding overflow-y = auto
adding overflow-y = scroll
Note: Even already, I have overflow-y to auto.
I have added following
<div class="modal-dialog modal-dialog-scrollable">
But, still failed !
Finally, I'm here to post my issue!
Please remember to include your code when asking question Bilal. For now you could try adding .modal-dialog-scrollable alongside .modal-dialog in your HTML. Ths will add a scroll bar to the modal.
class=" modal-dialogue modal-dialog-scrollable"
I use Fancybox2 to open an iFrame popup window (content comes from the same website). Within this popup, I have tabbed content (Bootstrap tabs). Each tab has content of different heights.
I am hoping that Fancybox can resize its height accordingly when I click tabs to see content on different heights.
I tried different combinations of autoSiz, autoHeight, etc. Got no success. Googled, and it seems many people asked related questions.
Am I missing something? Or is it doable? I feel this should be an easy configuration.
Thanks!
You may need to trigger the $.fancybox.update() (fancybox v2.x) method after the tab selector event
If using iframes, try parent.$.fancybox.update()
You may also need set fitToView to false
On a computer you can easily tab through HTML checkboxes on a website, but is there any way to make it so that on an iPhone when you hit the 'next' button it goes to a checkbox? I've noticed it'll go between text boxes and drop down menus, but it won't do it for checkboxes or clickable buttons. Is this an issue with the iPhone, or is it something I can change on my website?
Can you please be a bit more precise with your question. And if its the size of the checkbox that is a concern which makes it non tappable, then as suggested by the user interface guide of apple ios, please make the size as 44x44 to make it tappable. Well thats just a suggestible size and I believe a 25x25 size may solve your issue.
I need to build a tab looking like this one:
https://www.facebook.com/auto.co.il/app_134594493332806
I know how to add an image and a comment box and i know of several "plain" ways to hide the content from non-fans, but i came across the above tab and i really like the way it shows thee content yet you cant engage it until you press the like button.
Any help please?
Thanks in advance.
Oren
Your link didn't work for me, but you can place a absolutely positioned div with a high z-index above the rest of your content to prevent the user from clicking on anything.
Update: Now that the link has been updated I see that they are doing exactly what I described above. In chrome if you right-click the background and select "inspect element" you will see the following computed style for the div:
rgba(0,0,0,0.796);
display:block;
height:1612px;
width:810px;
The content is blacked out simply with a div with a black background and some opacity. Just for fun, you can overcome their like gate (without liking) via chrome's JS console by selecting the iframe context and then entering the following:
$('.like_float_c').detach();
... now call youself a 'hacker' ;)
I have a UIWebview that I am loading with custom HTML using loadHtmlString. My HTML has a link that I intercept when tapped so that I can take control and reload the UIWebview with a different HTML string. The code works, but the area where the link text was located is replaced with a gray rectangle that is visible when the new string is loaded.
What could be going on here? How can I get rid of this behavior?
//Scott
Here it is...need to add this style statement to the link reference:
<a href=http://yourlink.com/ style = "-webkit-tap-highlight-color:rgba(0,0,0,0);">
Setting the alpha value (the last parameter to rgba) to 0 disables the tap highlight color.
Although this works, it feels like a hack. I really think the tap highlight should clear itself when my second loadHtmlString reloads new HTML code.
//Scott
You could add onclick="this.blur(); location.href=this.href;" to the link to remove the focus from the link.
I'm sure there's a better less hackish way, but this should work