I tried to change the size of the paper-checkbox by changing the width and height attributes in my css-file, and by using transform: scale(2,2)
Scale makes it blurry, width and height only changes the clickable area.
How would I achieve this?
I think you found the correct solution already. You can't change the resolution, therefore there's nothing you can do.
For those who don't care about the blur, here's the css:
paper-checkbox
{
/* Double-sized Checkboxes */
-ms-transform: scale(2); /* IE */
-moz-transform: scale(2); /* FF */
-webkit-transform: scale(2); /* Safari and Chrome */
-o-transform: scale(2); /* Opera */
padding: 10px;
}
In polymer 1.0 and paper-checkbox 1.2 it works with this simple style
paper-checkbox {
--paper-checkbox-size: 30px;
}
When I was first trying to use paper-checkbox bower installed version 1.0 for me. And this version had issues. So maybe this might be the case for you as well.
Related
For a particular case, I have to zoom out on the whole body of a web page.
So I took the time to search the various possible solutions but I'm faced with a compatibility problem with the zoom CSS property that doesn't work on Mozilla. I quickly encountered the scale property but it doesn't offer the same desired result, i. e. the equivalent of a conventional zoom out (CTRL -).
Do you know an equivalent technique that works on the main browsers ?
Thank you in advance for your feedback !
https://caniuse.com/#search=zoom
This will tell you what is compatable for each browsers. Not a solution but this is why it's not working in moz.
Just a little searching comes up with using this
.zoom {
zoom: 2;
-moz-transform: scale(2);
-moz-transform-origin: 0 0;
-o-transform: scale(2);
-o-transform-origin: 0 0;
-webkit-transform: scale(2);
-webkit-transform-origin: 0 0;
transform: scale(2); /* Standard Property */
transform-origin: 0 0; /* Standard Property */
}
That should do what you're after :)
I have a site where I think
Most of my users are using desktop or laptop while they are on my site. The problem is that on some screens its only 1/4 of the screen begin used and rest is just background.
How can I make it auto scale, so it fits the screen's size??
You can use css3 transform:
-webkit-transform: scale(0.5); /* Chrome, Safari 3.1+ */
-moz-transform: scale(0.5); /* Firefox 3.5-15 */
-ms-transform: scale(0.5); /* IE 9 */
-o-transform: scale(0.5); /* Opera 10.50-12.00 */
transform: scale(0.5);
Calculate the scale ratio and apply the rules with this ratio in your script.
Do not forget to set left and top property of the transformized element as the offset ratio of the full width and height:
offsetRatio = (ratio - 1) / 2;
You would need to use CSS "responsive designs". You can find some examples here:
http://www.creativebloq.com/responsive-web-design/build-basic-responsive-site-css-1132756
Basically, you use min-width / max-width, and #media to decide what to show, and how.
If you are not comfortable doing that kinda stuff, then Bootstrap is a good way to accomplish this, with the minimum of effort:
http://getbootstrap.com/
.wrapper {
max-width:1000px;
margin:0 auto;
}
wrapper - is the main container of your site
I have this stylesheet
.rotate div img
{
-webkit-transform: translate(-18cm, 2cm) rotate(-90deg); /* WebKit */
-webkit-transform-origin: top right;
-moz-transform: translate(-18cm, 2.5cm) rotate(-90deg);/* Mozilla */
-moz-transform-origin: top right;
-o-transform: rotate(90deg); /* Opera */
-o-transform-origin: top center;
-ms-transform: translate(-18cm) rotate(-90deg); /* Internet Explorer */
-ms-transform-origin: top right;
-sand-transform: translate(-18cm, 2.5cm) rotate(-90deg);
-sand-transform-origin top right;
max-width: 100% !important;
}
I'm having trouble with IE, the transforms are applied and are showing on screen
but when I click on the print button, the printed result is without the transforms applied to it.
(added screen in the media to see the effects, before printing)
It works fine with Firefox and Chrome
EDIT
Yes, I was testing on IE9.
Having played with it a bit more yesterday, I noticed that the image did in fact do the transform part, but what is sent to the printer is the image without the transform applied to it.
-ms-transform does not exist in IE10+. IE8 and older have no support for CSS transforms, IE9 uses only -ms-transform, and IE10 and newer use only the unprefixed transform.
See http://caniuse.com/#feat=transforms2d for more info if needed.
I has same issue but resolved by setting up media attribute to style tag as follows
<style type="text/css" media="print">
No need for fancy prefixes, just use normal transform to target MS IE!
i need to rotate image in css for ie6
is it possile
i tried Below code But none of Below is working
.image-box
{
-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); /* IE6,IE7 */
-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); /* IE6,IE7 */
ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); /* IE8 */
-ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); /* IE8 */
transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-sand-transform: <rotate(180deg)>;
}
please help!!!
You're not supposed to have a hyphen before non vendor specific CSS properties. Remove the hyphen from -filter: ...:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); /* IE6,IE7 */
Additionally, you might need to trigger hasLayout by adding overflow:auto or zoom:1 to your CSS. Here is a demonstration (I've tested this in IE7 using browserlabs).
IE6 has limited support, even from MS. You probably should use IE conditional comments to provide a different image or markup for IE6. Here's the MSDN article on these http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
I have a page that houses an asp GridView and I would like to display the text vertically to allow it to print better. Currently I'm using css to do that:
.rotate { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); width: 25px; }
Which works in FF except the 25px width is ignored and in IE the width is being set correctly but the text isn't vertical. Anyone know how to make this work in both browsers?
Here's a -90 degree rotation using CSS that should work in IE:
.box_rotate {
-moz-transform: rotate(-90deg); /* FF3.5+ */
-o-transform: rotate(-90deg); /* Opera 10.5 */
-webkit-transform: rotate(-90deg); /* Saf3.1+, Chrome */
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',
M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17)"; /* IE8 */
zoom: 1;
}
For your reference http://css3please.com/ is a good tool for generating these kind of CSS effect with pretty good cross browser support.
I can't really say why the width isn't applying in FF without a concrete example, but you might try setting display:block;