SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    822
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question Bootstrap/Slimbox Conflict

    Bootstrap seems to cut off the slimbox popup that I'm using. Has anyone else encountered this problem? If at all possible, can someone tell me how I can fix this issue?

    Capture.jpg

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,513
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    I looked at your page in FF and could not identify any images that seemed to be cut off at the right edge. Is this happening in a particular browser or at a certain window width?

  3. #3
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    822
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Windows width is 1600px. I see this is FF, Chrome, IE, and Safari. If you click on one of the thumbnails, you'll see the right side of the image being cut off.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    The problem is with the slimbox script not calculating widths properly. Very odd. The easiest option is to use an older version of Slimbox, which works better:

    Code:
    /*
    	Slimbox v2.04 - The ultimate lightweight Lightbox clone for jQuery
    	(c) 2007-2010 Christophe Beyls <http://www.digitalia.be>
    	MIT-style license.
    */
    (function(w){var E=w(window),u,f,F=-1,n,x,D,v,y,L,r,m=!window.XMLHttpRequest,s=[],l=document.documentElement,k={},t=new Image(),J=new Image(),H,a,g,p,I,d,G,c,A,K;w(function(){w("body").append(w([H=w('<div id="lbOverlay" />')[0],a=w('<div id="lbCenter" />')[0],G=w('<div id="lbBottomContainer" />')[0]]).css("display","none"));g=w('<div id="lbImage" />').appendTo(a).append(p=w('<div style="position: relative;" />').append([I=w('<a id="lbPrevLink" href="#" />').click(B)[0],d=w('<a id="lbNextLink" href="#" />').click(e)[0]])[0])[0];c=w('<div id="lbBottom" />').appendTo(G).append([w('<a id="lbCloseLink" href="#" />').add(H).click(C)[0],A=w('<div id="lbCaption" />')[0],K=w('<div id="lbNumber" />')[0],w('<div style="clear: both;" />')[0]])[0]});w.slimbox=function(O,N,M){u=w.extend({loop:false,overlayOpacity:0.8,overlayFadeDuration:400,resizeDuration:400,resizeEasing:"swing",initialWidth:250,initialHeight:250,imageFadeDuration:400,captionAnimationDuration:400,counterText:"Image {x} of {y}",closeKeys:[27,88,67],previousKeys:[37,80],nextKeys:[39,78]},M);if(typeof O=="string"){O=[[O,N]];N=0}y=E.scrollTop()+(E.height()/2);L=u.initialWidth;r=u.initialHeight;w(a).css({top:Math.max(0,y-(r/2)),width:L,height:r,marginLeft:-L/2}).show();v=m||(H.currentStyle&&(H.currentStyle.position!="fixed"));if(v){H.style.position="absolute"}w(H).css("opacity",u.overlayOpacity).fadeIn(u.overlayFadeDuration);z();j(1);f=O;u.loop=u.loop&&(f.length>1);return b(N)};w.fn.slimbox=function(M,P,O){P=P||function(Q){return[Q.href,Q.title]};O=O||function(){return true};var N=this;return N.unbind("click").click(function(){var S=this,U=0,T,Q=0,R;T=w.grep(N,function(W,V){return O.call(S,W,V)});for(R=T.length;Q<R;++Q){if(T[Q]==S){U=Q}T[Q]=P(T[Q],Q)}return w.slimbox(T,U,M)})};function z(){var N=E.scrollLeft(),M=E.width();w([a,G]).css("left",N+(M/2));if(v){w(H).css({left:N,top:E.scrollTop(),width:M,height:E.height()})}}function j(M){if(M){w("object").add(m?"select":"embed").each(function(O,P){s[O]=[P,P.style.visibility];P.style.visibility="hidden"})}else{w.each(s,function(O,P){P[0].style.visibility=P[1]});s=[]}var N=M?"bind":"unbind";E[N]("scroll resize",z);w(document)[N]("keydown",o)}function o(O){var N=O.keyCode,M=w.inArray;return(M(N,u.closeKeys)>=0)?C():(M(N,u.nextKeys)>=0)?e():(M(N,u.previousKeys)>=0)?B():false}function B(){return b(x)}function e(){return b(D)}function b(M){if(M>=0){F=M;n=f[F][0];x=(F||(u.loop?f.length:0))-1;D=((F+1)%f.length)||(u.loop?0:-1);q();a.className="lbLoading";k=new Image();k.onload=i;k.src=n}return false}function i(){a.className="";w(g).css({backgroundImage:"url("+n+")",visibility:"hidden",display:""});w(p).width(k.width);w([p,I,d]).height(k.height);w(A).html(f[F][1]||"");w(K).html((((f.length>1)&&u.counterText)||"").replace(/{x}/,F+1).replace(/{y}/,f.length));if(x>=0){t.src=f[x][0]}if(D>=0){J.src=f[D][0]}L=g.offsetWidth;r=g.offsetHeight;var M=Math.max(0,y-(r/2));if(a.offsetHeight!=r){w(a).animate({height:r,top:M},u.resizeDuration,u.resizeEasing)}if(a.offsetWidth!=L){w(a).animate({width:L,marginLeft:-L/2},u.resizeDuration,u.resizeEasing)}w(a).queue(function(){w(G).css({width:L,top:M+r,marginLeft:-L/2,visibility:"hidden",display:""});w(g).css({display:"none",visibility:"",opacity:""}).fadeIn(u.imageFadeDuration,h)})}function h(){if(x>=0){w(I).show()}if(D>=0){w(d).show()}w(c).css("marginTop",-c.offsetHeight).animate({marginTop:0},u.captionAnimationDuration);G.style.visibility=""}function q(){k.onload=null;k.src=t.src=J.src=n;w([a,g,c]).stop(true);w([I,d,g,G]).hide()}function C(){if(F>=0){q();F=x=D=-1;w(a).hide();w(H).stop().fadeOut(u.overlayFadeDuration,j)}return false}})(jQuery);
    
    // AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
    if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
    	jQuery(function($) {
    		$("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
    			return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
    		});
    	});
    }

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You have a 10px border on the container holding the image which is eating up 20px of the space. If you remove the border then the image will fit.

    Code:
    #lbImage {
        background-repeat: no-repeat;
        border: 10px solid #FFFFFF;
    Try adding the border to lbCenter instead.

    Code:
    #lbCenter{border:10px solid #fff}

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    The problem with just moving the border is that the JS is still making a mess of the widths of things, so part of the image ends up hidden. The older slimbox script doesn't have that problem, so I wonder why they have ruined it. If you use that older script, you'll find that everything s sized nicely without having to change any of the CSS.

  7. #7
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    822
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Quote Originally Posted by Paul O'B View Post
    Hi,

    You have a 10px border on the container holding the image which is eating up 20px of the space. If you remove the border then the image will fit.

    Code:
    #lbImage {
        background-repeat: no-repeat;
        border: 10px solid #FFFFFF;
    Try adding the border to lbCenter instead.

    Code:
    #lbCenter{border:10px solid #fff}
    Thanks, Paul O'B. That did the trick!

    ralph.m: I don't know how it wouldn't be calculating correctly. When I disabled Bootstrap, the popup looked just fine which gave me the indication that there was a conflict somewhere between BS and the Slimbox.

    Thank you, gents, for helping me!

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Currently you are losing 20px of your images on the right and on the bottom. I was confused about that, but then realised it's because of the (presumably Bootstrap) border-box rule:

    Code:
    *, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }
    You need to override that in this instance for the full image to show.

  9. #9
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    822
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Sweet, ralph.m! I'll make a note of that for the future. Pesky box-sizing.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Currently you are losing 20px of your images on the right and on the bottom. I was confused about that, but then realised it's because of the (presumably Bootstrap) border-box rule:

    Code:
    *, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }
    Yes bootstrap uses the border-box model but moving the border as I mentioned should hide the issue. The image is still shorter than it would have been.

    To fix the issue completely you would need to do this:

    Code:
    #lbCenter, #lbCenter *,
    #lbBottomContainer, #lbBottomContainer *{
    -moz-box-sizing:content-box!important;
    -webkit-box-sizing:content-box!important;
    -ms-box-sizing:content-box!important;
    box-sizing:content-box!important;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •