I am using Material-Ui Appbar however when I scroll down the page the appbar goes underneath the address bar on iOS 10. And the address bar also stays open rather than collapsing. I am using the default material UI theme.
I dont assume it is supposed to work this way. Is there an example of how to do this correctly?
Ideally it would be great if the AppBar was fixed to the top of the page.
Thanks.
It's actually working as designed. If you want it to be fixed to the top of the page, you need to set CSS position to "fixed". This sticks the AppBar at the top, as desired, but since it is floating there it can obscure its own height's worth of content beneath it. So, you should compensate for that with some padding or margin (56px by default). Example using padding on outer container:
<div style={{ paddingTop: 56 }}>
<AppBar style={{ position: 'fixed', top: 0 }} />
<p>
Lots of tall/long content here...
</p>
</div>
Working jsFiddle: https://jsfiddle.net/qe141fd2/1/
Related
In JSSOR 26.5, using $ThumbnailNavigatorOptions: {$ChanceToShow: 0} is supposed to completely hide the thumbnails. However, the display:none is applied only to the thumbnavigator element, NOT the container that is injected around thumbnavigator.
As a result, the absolutely-positioned container renders atop the slider. It's invisible because its only child (the thumbnavigator) is not displayed. But it intercepts click events, so it is having an effect on my UI.
In one case, the navigator (bullets) are rendered "below" the hidden thumbnails, which makes the bullets not clickable.
In version 19.0.1. there was no wrapper injected around "thumbnavigator", so the problem was not there. We moved from 19 to 26, and that is where I see the problem.
Solution is to put the display:none on the injected thumbnavigator wrapper, rather than on thumbnavigator itself.
Please resort html order to move bullet navigator above thumbnail navigator.
<!-- Thumbnail Navigator -->
<div data-u="thumbnavigator" class="jssort101" style="position:absolute;left:0px;bottom:0px;width:980px;height:100px;background-color:#000;" data-autocenter="1" data-scale-bottom="0.75">
...
</div>
<!-- Bullet Navigator -->
<div data-u="navigator" class="jssorb032" style="position:absolute;bottom:12px;right:12px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
...
</div>
I have a page that scrolls, and I want to add a fixed div to the bottom of it in ionic2. I use the ion-fixed, and it works great on android devices staying fixed in the bottom of the page, but on iOS upon scrolling the page, it sort of jumps all the time until get the position.
I am sure someone working in ionic has forced the same issue.
I have tried to detect platform and to use a css tweak of
position: sticky;
and it moves smootly, but I am facing another bouncing issue once you are in the end of the page ( the native over-scroll ios behavior, if you continue to scroll the page from the top or the bottom area).
If you want to place a div in the bottom of the page, fixed, the best way to do it in Ionic is to put that div outside of the ion-content:
<ion-header>
<!-- ... -->
</ion-header>
<ion-content>
<!-- ... -->
</ion-content>
<div class="fixed">
<!-- ... -->
</div>
And then use some css style rules to set its position according to your needs:
div.fixed {
position: fixed;
bottom: 0px;
left: 0;
width: 100%;
z-index: 999
}
Since it's outside of the content, it will be ignored by Ionic during the scroll event.
I have a sliding toggle div that is hidden on page load and when a button is clicked gets revealed. The div is 250px in height and is positioned top 0px. I have also tried bottom 100% which sort of does the same thing. I am using several layers of z-index and have had to position some divs using absolute in order to get the layout I wanted. But I was hoping there is a way to push all of these divs down by 250px when the sliding toggle is revealed. I was thinking that instead of using toggle div, maybe there is a way to scroll the page to -250px so that all the content appears the same but is pushed down?
This is the css for the div I am using in case there is something that can be done here:
#slidingTopBar
{
background:#199651;
display:inline-block;
position: fixed;
height:250px;
width:100%;
left:0px;
top:0px;
z-index:56;
}
The script for the toggle is being used as follows:
$(document).ready(function(){
$("#slidingTopBar").hide();
$(".show_hide").css('position','absolute').show();
$('.show_hide').click(function(){
$("#slidingTopBar").css('position','absolute').slideToggle();
}); });
And the toggle is being called using this html:
<div id="TopBar">SHOW</div>
Which is all working, except it is overlaying the content that is already there whereas I want it to push it all down.
Any help appreciated.
Using the clearfix method directly below the toggle div or it's wrapper should fix this:
HTML: <div class="clearfix"></div>
CSS: .clearfix { clear: both; }
With the new App Pages on a Facebook Apps Timeline is there any way to remove the 20px white border around the iframe?
Here is an example page, https://www.facebook.com/Firefox/app_219601608073693
If you make your background white then there are not really borders ;)
But in all seriousness - what you could do is use a "Wide (810px)" layout for your tab app and then create a smaller centered div element in which you can contain your entire application.
Eg:
<div style="width:520px; margin:0 auto;">
Your 520px centered content appears here!
</div>
Please don't be lazy like me :) Don't use inline styles.
Other than that I do not believe that there is a way to remove or customize any of Facebook's styling inside a timeline/page app...
Right now on my website I have the following JavaScript that shows and hides a
<div class="commentBox"></div>
when user clicks a
Show Comments
Full Code:
<script type="text/javascript">
function toggleSlideBox(x){if($('#'+x).is(":hidden")){$(".comentBox").slideUp(200);$('#'+x).slideDown(200)}else{$('#'+x).slideUp(200)}}
</script>
Show Comments
<div class="commentBox">Content</div>
The effect can be illustrated like this:
I wanted to modify this function to act differently, but I couldn't figure it out. Basically what I wanted was to show content that is at the bottom once it starts expanding and have a fade in effect.
This is what I was hoping to achieve:
Could anyone suggest how to achieve the slide / toggle effect that is shown in image 2? so when user clicks a link it expands like that and when link is clicked again it shrinks.
The effect you describe looks just like the JQuery UI slide effect to me (rather than the blind effect that you have at present). This doesn't provide the opacity animation but provides a very simple solution otherwise. Or maybe I am misunderstanding you?
(The method accepts a parameter to slide down, rather than right-to-left of course)
$("#test").show("slide", {direction: "up"}, 1000);
JSFiddle here
If you are just animating a background image, like that rabbit just set the background position like this:
background-position: 0 100%;
This will align the background to the bottom edge rather than the top.
For text content the same principle applies. You just have to position the content absolutely to the bottom edge. For example:
<div class="container">
<div class="content">
<p>Text</p>
</div>
</div>
Then use this CSS:
.container {
position: relative;
overflow: hidden;
}
.content {
position: absolute;
bottom: 0; left: 0;
}
The only issue with this is that you need to find the height of the content so that you know how much to expand the container.
To do this, you can use this jQuery:
var height = $('.content').outerHeight();
Then on the click event just animate to the correct height:
$('.container').animate({
'height': height
});
Hope that helps :)