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.
Related
I have a mobile menu with position:fixed and min-height of calc(100vh - 48px). Top is set to 48px. In the mobile menu I have a wrapper set to height:100% and overflow:auto. I tried setting it to min-height: 100% but it doesn't work. When the content gets taller, the content inside is hidden and there is no scroll. I have set overflow to auto and then tried scroll on the mobile menu but nothing works. What may cause the problem?
.mobile-nav__menu {
width: 100vw;
min-height: calc(100vh - 48px);
position: fixed;
top: 48px;
bottom: 0;
right: 0;
visibility: hidden;
opacity: 0;
-webkit-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
z-index: 21;
overflow: auto;
}
.mobile-nav__menu-wrapper {
min-height: 100%;
width: 100%;
background-color: #fff;
overflow-y: auto;
}
Try to set the height property on window resize javascript event something like that;
var onresize = function() {
height = document.body.clientHeight;
}
window.addEventListener("resize", onresize);
Try using percentage instead of absolute px values.
For example,if u want a header of height 10px on a screen that is 1000px tall, type in "1%" instead of "10px".
This will help the header to adapt to different screen sizes.
Also try adding background-size:cover OR background-size:100% in the css class.
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!
I have a light window with fixed position at 100% width and height on the mobile with overflow-y auto as light window is larger then most mobile displays. Following are two css classes that i have
.noscroll { // add to body when the lightwindow shows to prevent body scrolling
overflow: hidden !important;
}
.lightwindow {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow-y: auto;
}
It is working fine except on iPhone the scrolling is very choppy and jumpy, I would like it to scroll just like regular smooth scrolling on iPhone.
Thanks
You are looking for momentum type scrolling for touch devices like iphone where a flick of the finger sends the web page scrolling and it keeps going until eventually slowing down and stopping. Chris Cover has a solution explained here
To apply it to your code, you should add -webkit-overflow-scrolling: touch; your lightwindow class and also overflow-y: scroll; so it will become something like the following
.lightwindow {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;
}
Hope this helps.
I made a website that looks exactly like it should on Firefox but unfortunately not on iOS (which uses Safari webkit) and chrome on some devices of the device. It just doesn't properly display the Menu-Bar (it should be position fixed). The problem here is, that I don't really know what the issue is.
Screenshots:
White space between address bar and photo should be the menu:
Here you see that you only see the menu when it's above the parent
I can't really figure out why it behaves like this, because according to various wikis position fixed is relative to the viewport and not it's parent "the viewport is always their containing block" ( http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Summary )
*The CSS:
.main-navigation {
clear: both;
float: left;
width: 100%;
position: fixed;
width: 100vw;
height: 6rem;
background: -webkit-linear-gradient(top, #fff, #d6d6d6);
background: -moz-linear-gradient(top, #fff, #d6d6d6);
background: -ms-linear-gradient(top, #fff, #d6d6d6);
background: -o-linear-gradient(top, #fff, #d6d6d6);
top: 0;
right: 0;
z-index: 100;
overflow: visible;
}
nav {
display: block;
}
.home header.site-header {
top: 24rem;
left: 8rem;
position: absolute;
z-index: 3;
}
.home header.site-header is the parent of the menu
There are so many issues with :position: fixed; on mobile devices/with mobile browsers, that I don't even know where to start.
http://bradfrost.com/blog/mobile/fixed-position/
Check Brad Frost's article on the matter and you will see why this is not an easy task to accomplish.
What could help is Filament Group's fixed-sticky-fix:
https://github.com/filamentgroup/fixed-sticky
I've implemented a simple left-pull burger menu in a mobile webpage that lives inside an iframe. However, it's behaving strangely on iPhones. We are using Bootstrap for the general page layout and stuff.
Using WeInRe I've noticed the following behaviour: in an iframe with 320px in fixed width, if I add, say, left: 50px to the body of the page inside it, this body moves 50px to the left just fine, but also starts to display 370px in width, instead of 320px as before.
The problem is worse: as the correct left value is a percentage, the body gets that bigger width, and after that the left is recalculated, making the menu larger than the viewport.
What the hell is happening here? Is this some sort of known bug of Mobile Safari?
Unfortunately, there's no public available code for this issue yet...
This is the relevant code:
.offcanvas {
left: 0;
position: relative;
}
.offcanvas.active {
left: 75%;
overflow: hidden;
}
.sidebar {
position: fixed;
background-color: #5c008a;
top: 0;
left: -75%;
width: 75%;
height: 100%;
}
.offcanvas.active .sidebar {
left: 0;
}
$('[data-toggle="offcanvas"]').click(function() {
$('.offcanvas').toggleClass('active');
});
<body class="offcanvas">
[...]
<div class="sidebar">[...]</div>
[...]
</body>
Here's a sample, based on a series of side menus from a tutorial (click the left or right push options).