I've a 200x200 px div in which I put a background-image.
The div is resizable and keep ratio.
In recent browsers, "background-size: cover;" or "background-size: contain;" works fine but under IE7, it doesn't work.
Does anybody have a suggestion / trick to fix that ?
Thank you very much in advance.
If the image is smaller than the div could you not repeat it using the following CSS?
{
background-image:url('bg.gif');
background-repeat:repeat-y;
}
If not, could you please provide a link to the deployed code.
Try jQThumb. It was built to fix background-size issue in IE6, IE7, and IE8
Related
I've noticed in V9 of drei there is a bug when combing the <Html> elment with <ScrollControls>.
I just want bind text to a 3D element but the ScrollControll makes the text scroll out of the view: CodeSandBox Example
It works fine in v8: CodeSandBox Example
I fixed this in this PR https://github.com/pmndrs/drei/pull/1126 we just have to wait until they approve it. But you can just patch the library yourself using https://www.npmjs.com/package/patch-package, it should be easy as it is just one line change.
Edit: Now that I think about it, you could probably fix it also by sending gl.domElement.parentNode as the portal prop.
I have tried following multiple guides on Stack Overflow however none seem to work on my website. The issue I am having is hiding the following code on mobile view only.
<div class="rte nice-paragraph">{{side_title[0]}}</div>
This is in a Shopify Liquid and any help would be greatly appreciated.
Thanks in advance/
Please add following css code in the file
<style>
#media only screen and (max-width:767px){
.nice-paragraph {display:none;}
}
</style>
Thanks
The page loads without any of the images displaying on IE11 only, but refreshes them accordingly when we resize the browser intermittently (1/3 loads). We cannot replicate this with any of the other browsers. srcset works fine by itself with static content.
Here is a Plunker example of it not working in IE11.
Or quick and easy, the actual img html we're using:
<img data-ng-srcset="{{::image.url}}, {{::image.url2x}}" alt="{{::image.name}}"/>
The images or surrounding divs do not have any transitions, shadows or opacity applied.
The html renders fine with angular passing over and rewriting the srcset attribute correctly. The images just do not appear, only the alt tag. Wondering if this could be a call stack issue due to the intermittence of it, maybe a race condition with Picturefill loading before angular finishes a digest or something.
Cheers in advance!
A work around if you use PictureFill in a loop and in a specific case (not on all images of your application), is calling a function that launch PictureFill directly from HTML, after last item loaded (this is not the best practice but fix the IE11 problem) :
<picture><!-- Your image --></picture>
<span ng-if="$last">
{{ controllerAlias.launchPictureFill() }}
</span>
Came across this as a solution: http://tech.endeepak.com/blog/2014/05/03/waiting-for-angularjs-digest-cycle/
var waitForRenderAndDoSomething = function() {
if($http.pendingRequests.length > 0) {
$timeout(waitForRenderAndDoSomething); // Wait for all templates to be loaded
} else {
$window.picturefill();
}
}
$timeout(waitForRenderAndDoSomething);
The only issue that the blog post describes is here, so if anyone has anything better please let me know:
The $http.pendingRequests supposed to be used for debugging purpose only. If angular team decides to remove this, you can implement the same using http interceptors as suggested in this link.
I create simple application with window and 3 field:
Fiddle Link (Use Chrome)
When I enter a value in the field, it looks fine.
But when I change the focus,text in field moves down.
All fields work similarly.
After click on trigger (if field has it) text looks fine.
This bug only in Chrome.
IE, Opera, Firefox and Vivaldi work right.
How can I fix that?
It's a known bug for chrome. Take a look here for the workaround:
https://www.sencha.com/forum/showthread.php?301227-Visual-combobox-bug-in-Chrome-43.0.2357.65-m&p=1101244&viewfull=1#post1101244
Css fix:
.x-form-text { display: inline; }
Demo here: http://ext4all.com/post/extjs-5-textfield-chrome-bug-fix.html
I want to make a responsive layout with twitter's bootstrap v2, with a column and a map.
The idea is to build a UI like that from maps.google.com, but using a responsive design with bootstrap2.
I want to have a style for desktop with
navbar on top
1 left column (as sidebar)
height: 100% minus navbarHeight, with a scrollbar
width: .span3
content that fills the rest of the screen
Then for the responsive mobile design I want the parts that have the full height to have a height depending on the content.
I made a sketch to explain better
EDIT: Looking to do something like this but responsive, and only with north (navbar), west (sidebar), and center (content)
EDIT2: I finally made it with jquery, but I want a CSS solution. If someone asks, I will put the solution as an answer.
EDIT3: Ok, here is the solution I found using JQuery (I think it's easy to do with plain js)
$(window).bind('resize', function() {
if ( $(window).width() > 980 ) {
$("#content").height(($(window).height()-40)+"px")
$("#sidebar").height(($(window).height()-58)+"px")
$("body").css("padding-top","40px")
}
else {
$("#content").height(($(window).height()-50)+"px")
$("#sidebar").height(($(window).height()-68)+"px")
$("body").css("padding-top","0px")
}
$("#sidebar").css("overflow", "auto")
$("body").css("padding-bottom","0px")
$(".navbar").css("margin-bottom","0px")
});
The $(selector).css() functions and the conditional if could be replaced with plain css and the media queries from CSS3 http://twitter.github.com/bootstrap/scaffolding.html#responsive
But the problem is that $(window).height() is calculated runtime. That should be replaced maybe by something like a height:100% in CSS, and that could do the trick, but I couldn't find the right place to put that 100% height.
EDIT4: Here I found what it could be a CSS-only solution! If I make progress, I'll post the answer!
http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/
From my investigations this week (I'm trying to accomplish the same thing), it seems like bootstrap and a 100%-height design are incompatible from a pure CSS perspective (unless you want to make changes to bootstrap). I'd be interested in seeing your jquery solution.
I'm not sure that I totally understand what you are looking for, but take a look at http://reactivewebdesign.net/Chicago/Traffic which has a top menu (adding the bootstrap navbar should be easy).
The left column spans 3 columns and the map occupies 9 columns. There is also a link in the left menu named "Where Am I" that also uses a Google map. The css for the map is at the top of the page. If you are looking to squeeze the map into three columns, merely reverse the 3 & 9 to 9 & 3 - it should still work.
Hope this helps.
here is the solution I found using JQuery (I think it's easy to do with plain js)
$(window).bind('resize', function() {
if ( $(window).width() > 980 ) {
$("#content").height(($(window).height()-40)+"px")
$("#sidebar").height(($(window).height()-58)+"px")
$("body").css("padding-top","40px")
}
else {
$("#content").height(($(window).height()-50)+"px")
$("#sidebar").height(($(window).height()-68)+"px")
$("body").css("padding-top","0px")
}
$("#sidebar").css("overflow", "auto")
$("body").css("padding-bottom","0px")
$(".navbar").css("margin-bottom","0px")
});
The $(selector).css() functions and the conditional if could be replaced with plain css and the media queries from CSS3 http://twitter.github.com/bootstrap/scaffolding.html#responsive
But the problem is that $(window).height() is calculated runtime. That should be replaced maybe by something like a height:100% in CSS, and that could do the trick, but I couldn't find the right place to put that 100% height.