Bootstrap Masonry is not detect the correct height - twitter-bootstrap-3

I"m using the masonry plugin for my site,
but unfortantly when you enter the page and the page load its not caculate the correct height the page needed,
and there is a need to refresh.
how can i solve it?
http://halomli.co.il/index.php?page=gallery&galleryId=3

I figure out what was the problem,
I add the height to the image and it fixed.
$("div.post-box").each(function(){
$(this).find("img").height($(this).height());
});

Related

Rally HTML app always forces browser scroll bar - how to avoid this?

I've noticed that when I add an HTML app in Rally/Agile Central, the height doesn't fit/adjust within the browser windows. This means that a vertical scrollbar is always added.
I'm using Chrome and Firebox, but they both have this problem.
Is there a way to limit the height of the custom app?E.g., to (height - 25) so that the browser scroll bar is not necessary?
Can you share some of your code? It might help in diagnosing what's going on. A couple ideas though...
Are you using a layout for your app? This often can help with scrollbar issues.
This guide may be helpful for learning to work with layouts: https://docs.ca.com/ca-agile-central/saas/apps/2.1/doc/#!/guide/layouts
If you're just using auto layout (the default, if you didn't explicitly specify one) then you can also try adding autoScroll: false to your app's config. Note this may cause your content to be clipped if you do actually need a scrollbar though.
Here is an examle with the std list app - and it's the same whether there is anything to show or not.
I'm thinking that it is the HTML app that doesn't take into account that there is a page title, in this case "*test layout scroll bars" - and somehow uses the "full height" = the entire frame (I'm not an html/css expert)

markers disappear when resizing the canvas?

I'm trying to develop a responsive website and even if my Google map displays fine, no marker appear on it if I decrease the size of the window (or if I use a mobile device)…
Here is an example page: http://www.parisdigest.com/test-mobile.htm (the marker should appear on Paris).
Thanks a lot!
I found the solution. My responsive CSS contained some code to add a max-width to some elements, including "div". I just added div#map_canvas,#map_canvas div{max-width: none} and solved this issue.

How to give a fixed size to image in magnific-popup pluggin

I am using magnific-popup pluggin to display some image links in my application. It displays all the images with their actual size. However, I want to display those images with my custom width and height.. How can I do that.. Is there option to give size of content in the magnific-popup during initialization..? Do any one have an idea..
Thanks in advance.
I found the answer. It can be done by changing the respective class's css properties manually. But, that is also fixed for all images.
Thanks.

flexslider resizing issue for iphone/ipad

I've implemented flexslider before, but this time it is not resizing when I view it in i-phone or i-pad. Also its not working when I'm resizing my browser window.
Please suggest any workarounds..
For now I've made it work by adding media query in flexslider.css file.
Thanks in advance for any help.
Finally I got it, the problem was because of Bootstrap framework. Elements with classname "span1/2/3.." in bootstrap don't resize beyond a fix browser width, even when using fluid structure. Because of that my flexslider div was not getting resized.
I just changed the fixed with of .span class from "px" to "%" and it started working.

absolutely position simplemodal plugin on top of an existing div

I posted this a week or so ago:
Position simplemodal modal on top of an existing div
and thought that I had solved my problem, but when the window is scrolled, the modal container moves.
I think I need to change it from fixed to absolute positioning, but when I change it in the script, the right side of the container lines up with the left side of the div (but it does stay in the same place vertically).
Here's what I'm doing now:
$('.slider-caption #large-spot-two').click(function (e) {
$('#basic-modal-content-two').modal({appendTo:"#slider1", autoPosition: false});
return false;
});
What's the best way for me to keep the modal container above the div, whether the page is scrolled or not?
Thanks,
Wendy
The plugin was created to be fixed (not move when the page is scrolled, etc.). Changing the CSS position works until the page is resized or scrolled, as you have found.
The code required to change that behavior would require more work that I currently have time for. You might try BlockUI, as it sounds like that would fit your needs better?