It possible to change the ion-range orientation using ionic2/3?
I'm trying to change the ion-range orientation using the ionic2/3.
I changed the ion-range using the css transform:
<ion-label>Range</ion-label>
<ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range>
ion-range {
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
Visually that is work but if i need to change the ion-range value still I need to slide horizontally.
So how to solve it?
Thanks.
There is no solution yet from Ionic team regarding this. This issue was discussed on ionic team github and it is in their feature request backlog now but no commitment yet to implement.
Related
I want to apply mirror effect on my HTML 5 Video. I did this by applying this CSS
transform: scale(-1, 1);
filter: FlipH;
It's working on desktop and web, but it's not working on mobiles (when we enter into full screen).
According to #PhonicUK in this question
here's the solution most used browsers:
#videoElement
{
transform: rotateY(180deg);
-webkit-transform:rotateY(180deg); /* Safari and Chrome */
-moz-transform:rotateY(180deg); /* Firefox */
}
You can use rotateY property instead of scale for this:
transform:rotateY(180deg);
I think you should make it compatible for all web browsers. Try something like this:
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1); -o-transform: scale(-1, 1);
transform: scale(-1, 1); filter: FlipH;
See filter property compatibilities: https://caniuse.com/#feat=css-filters
If you’re able to then you should flip the actual source video and save a new version rather than trying this in code. I don’t know what performance hit this has for mobiles and I think full screen mode is ‘outside’ the browser’s context and varies per device. If you can’t edit the source video then heopfully the other answer can help.
Hey guys i have this carousel for which the arrows are created entirely in CSS , see HERE.
Now the arrow has a slight error on hover i have applied the following code to the arrow circle:
CSS:
.arrow-outer-prev:hover,
.arrow-outer-prev:focus,
.arrow-outer-prev:active {
-webkit-transform: translateX(-5px);
-ms-transform: translateX(-5px);
-o-transform: translateX(-5px);
transform: translateX(-5px);
}
(The fiddle does't show the error , so i will be sharing a link).
Now on shower my intertion is to move the circle, but an error occurs and along with the circle the arrows also tilt slightly , SEE GIF.
The error can be seen on this link too HERE.
The bug looks slightly different in FF and chrome. In chrome the bug looks even more awkward though. unfortunately i have not been able to reproduce this bug , nor has debugging in chrome using dev tools worked for me.
Can somebody point out to me what am i doing wrong here ? Why is are the arrows moving when the CSS is clearly for only the circle to move ?
We want to resize the "like" button as we have complaints from Users it's too small on smartphones. We are using HTML5 code. We cannot use iframe as we need to determine user has clicked on "like" button for out social wifi application.
As I mentioned we have constant complaints that the "like" button is too small on smartphones . . . these are users not us saying this.
You can use CSS3 transform to scale the Facebook button:
FIDDLE
#fblike {
transform: scale(2);
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
}
Note: you can use a float for scale, e.g: 1.5 = 150% of the original size.
So I am trying to rotate some text for use on a panel (slider) on a SharePoint web page.
.rot-text{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
not supported by the SPS2010 schema? is there a way to get the same thing with older method?
You could create a custom CSS file and add it as a reference to the master page used to format your site.
Erik Swenson has a good overview of the parts of the CSS structure here:
SharePoint 2010 CSS references in Master Pages
Finally here is a page from Microsoft on how to use the Master Page to customize your site:
Customize a master page to brand your site
I'm trying to implement a gauge widget for a website. The spec says only HTML/CSS is allowed, so I can't use JavaScript (don't ask me why -- maybe if there's a really simple way of doing it with JavaScript I could persuade the project lead).
So far I have a div with a background image that shows the back of the gauge. Inside this div is an img that is rotated, depending on the gauge value. This value is dynamically injected into the HTML using PHP.
The gauge works fine in Safari/FireFox, but breaks in IE. If I add a border to the image I can see why -- it appears that the IE rotation also includes an automatic translation so that the needle is off-center (see screenshot below).
So, here's the question: how do I shift the needle back to the center of the gauge in IE?
<div style="background: url('genies/gauge.png'); background-repeat: no-repeat; height: 235px; overflow: hidden;">
<img src="genies/gauge-needle.png"
style="-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678118655, M12=-0.70710678118655,M21=0.70710678118655, M22=0.70710678118655, sizingMethod='auto expand'); zoom: 1;" />
</div>
The problem here is that the image is rotating about a point that you don't expect it to.
You need to set the transform origin to the centre of your image.
For instance, you would use -moz-transform-origin, -webkit-transform-origin, -o-transform-origin, -ms-transform-origin, -etc-transform-origin...
Check out this page for information on how to deal with the Matrix filter in MSIE:
https://github.com/heygrady/transform/wiki/correcting-transform-origin-and-translate-in-ie
This is going to be difficult to solve without javascript, if your gauge only moves by a couple of increments (say, 15, 30, 45... deg), you could use this tool:
http://www.useragentman.com/IETransformsTranslator/
and manually pass the margin-left and margin-top values to IE.
Otherwise I'd recommend javascript with CSSSandPaper by the same author. http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/.
I found a solution without JS, for IE - see here