Angular Material mdToast service documentation shows the position can be any combination of 'bottom', 'left', 'top', 'right', 'fit'.
How do I customize the toast to show at 'top center' position?
what is this 'fit' option for? changing the demo code to below did not help
$mdToast.simple()
.content('Simple Toast!')
.position('fit')
.hideDelay(3000)
if you want to center the toast just add
md-toast.md-top {
left: 50%;
margin-left: -150px;
}
to your CSS and you are all set. -150 is half the width of my toast
With the latest release (1.0.0 stable), this is how it's done:
Add the below to your CSS
md-toast.md-center {
left: 50%;
transform: translate3d(-50%, 0, 0);
}
and this to your angular
$mdToast.simple()
.textContent(message)
.position('top center') // or 'bottom center
.show();
Related
I have a html page containing a div that is moving in when clicking on a button by using css transition on the bottom attribute. (change of bottom value is done by jQuery) This is working fine in all browsers (including iOS on iPad). Now I am developing a second page that has to do the same thing. I copied all css properties and the jQuery function but there is always a choppy animation on iOS (only on iOS!!) when the div moves in.
I already tried solutions like:
-webkit-transform: translate3d(0, 0, 0);
or
-webkit-transform: translateZ(0);
Nothing makes the animation be smooth like in the other page where I (as I think) completely have the same code.
Now I have no idea why there is a difference and how I can solve this. Did anyone already have some similar trouble and can give me some helpful advices for that?
Full code CSS:
.animationTestObject {
width: 100px;
height: 100px;
background-color: black;
position: fixed;
left: 100px;
bottom: -100px;
transition: bottom 500ms;
-webkit-transition: bottom 500ms;
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
JS:
function startAnimation() {
$(".animationTestObject").css('bottom', '100px');
}
To get a better performance while animating, try to avoid the css properties that trigger a relayout (those marked with a purple tag).
In your case, you should animate the transform: translate property like so:
.animationTestObject {
width: 100px;
height: 100px;
position: fixed;
left: 100px;
bottom: -100px;
transition: transform 500ms ease;
transform: translate3d(0, 0, 0);
}
function startAnimation() {
$('.animationTestObject').css('transform', 'translate(0, -100px)');
}
i have a full screen layer for mobile devices and use these css lines:
#buttons{
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: yellow;
z-index: 99999;
}
Whenever I scroll the page, the fixed layer slightly moves on top until it disappears completely. Any idea how to prevent this? Thanks very much!
In my project there is a requirement that when we change language from Engish to Arabic all layout will be displayed in right to left position.So when i changed that all the components dispalyed right to left except growl messages.
I want to display growl message in left side of layout screen, how can I achieve that?
Default css for .ui-growl class is :
.ui-growl {
position: fixed;
right: 20px;
top: 20px;
width: 301px;
}
You can achieve growl on left by applying following css for .ui-growl class:
.ui-growl {
left: 20px;
position: fixed;
top: 20px;
width: 301px;
}
would work.
When using #media print highcharts seems to ignore with width and height in the screen section and instead use the values from the display section.
This is preventing me from printing my entire web page with the highcharts on it since the charts are not the right size when printed.
See jsfiddle example
#media screen
{
.cont
{
width: 50%;
height: 100%;
}
}
#media print
{
.no-Print{
display: none;
}
.cont
{
width: 5%;
height: 5%;
}
}
It doesn't ignore the styles. It just defines width in pixels for elements inside container. To see this, you can add set container's overflow to hidden:
.cont {
width: 5%;
height: 5%;
overflow: hidden;
border: 1px solid red;
}
(see: http://jsfiddle.net/6WxgG/15/embedded/result/)
AFAIK it's not possible to reasonably resize the chart using only CSS.
I've got an element #content and a child element #footer positioned outside #content. When animating #content, #footer is not visible during the animation. I've understood from another question that this was because the animation set overflow to hidden during the animation. I've then set the overflow of the wrapper created by jQuery UI (.ui-effects-wrapper) to overflow: visible !important;, but then the animated element is also visible outside #content during the animation.
So: I need overflow: visible to see my #footer element, but jQuery UI needs overflow: hidden to hide the animated part outside #content.
Anybody can help?
Thanks
#content {
position: absolute;
width: 45em;
height: 26em;
top: 8em;
left: 16em;
}
#footer {
position: absolute;
width: 200em; //larger than #content, so have to play with overflow
height: 2.375em;
bottom: 0;
left: -50em;
}
.ui-effects-wrapper {
overflow: visible !important ;
}
During the animation you can change the visibility. Example:
$('#link').click(function(){
// Do the animation
$(this).css('overflow','visible');
});
Would that help?