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>
Related
I’ve created a few components that handle form submission functionality. In each of these components, I want the form submit/cancel buttons to be fixed at the bottom of the view, much like the functionality available via ion-footer. The submit button needs reference to the variables + methods in the component for [disabled] + (tap) functionality, for example [disabled]="!formGroup.valid" (tap)="submitForm()"
If the component is a child of ion-content then there is no way to add ion-footer as it will be contained within ion-content, instead of below ion-content. At first glance, having ion-footer inside ion-content appears to view properly, but the rendering can be buggy especially in scroll situations. I went as far as setting a force-bottom css class with fixed position/bottom but it looks like the ionic javascript overrides fixed positioning when inside ion-content, so a pure CSS solution does not seem to be possible.
<ion-content>
<a-form-component>
</a-form-component>
</ion-content>
<ion-footer>
<!-- add a-form-component's button here -->
</ion-footer>
Any recommendations on how to achieve the desired functionality?
TIA
Let's say you have a page called page and a component called cp
inside page.html you have the component <cp></cp>
Inside cp.html you have
<div>anything goes here</div>
<div>anything goes here</div>
<div>anything goes here</div>
<div>anything goes here</div>
<div id="the-footer">
<button>login<button>
</div>
inside page.scss:
#the-footer{
background-color: #efefef;
text-align: center;
position: fixed;
width: 100%;
bottom: 0px;
z-index: 99999;
}
This will achieve the same result as ion-footer.
The div containing the button will always be visible regardless of the scrolling.
hope it helps
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/
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; }
The likebox I created for nbglive.com is not resizable, no matter what method I use, and as such, it is causing great trouble as to how I can integrate it with our site without having it overlap the radio player.
Is it possible to get the like box to resize when the page is resized? I'm using twitter-bootstrap.
I am putting FB widgets (likebox and comments) into the Bootstrap's grid like this:
<div class="span4">
<div style="text-align: center;">
<div class="fb-like-box" data-href="{url}" data-width="234" data-show-faces="true" data-stream="false" data-border-color="#007Db7" data-header="false"></div>
</div>
</div>
where url is the variable containing web URL of the FB page.
with CSS:
div.fb-like-box,
div.fb-like-box > span,
div.fb-like-box > span > iframe[style],
div.fb-comments,
div.fb-comments > span,
div.fb-comments > span > iframe[style] {
width: 100% !important;
}
Facebook loads its component asynchronously with styles set according to the width data attribute. I set it to some safe value: looks bad but does not overflow to other elements for different view-ports. My CSS overrides all the FB's width settings that are necessary to resize the widgets (I set 100%, so it adjusts to the containing div). It is not documented and possibly it will stop to work when FB changes their designs, so choose your default width (234px for me) wisely ;)
Example with LikeBox of at the bottom of the right-hand side panel and in the sidebar. Note the responsive behavior when you change the size of the browsers window.
Here is an easy way:
$(".fb-like-box").attr("data-width", $(document).width());
Do your cording according to your CSS as below
<div class="comment-box">
<div class="fb-comments" data-href="site_url" data-width="100%" data-numposts="5" data-colorscheme="light" data-mobile="auto-detected"></div>
</div><!--comment-box-->
cut and copy java-script as fb gives in headder
I'm using GWT 2.3 and have what I think is an extremely common layout scenario that doesn't seem to be very well supported -- but I hope StackOverflow can tell me I'm looking at the problem wrong.
I'm using layout panels to arrange my app. Typically, you put a layout panel into the RootLayoutPanel, where it takes over the whole browser window.
However, I have a site header and footer that need to be outside of GWT.
The problem is, as the docs clearly say, if you insert a layout panel into an arbitrary HTML element of the page instead of using the RootLayoutPanel, you lose the automatic resize behavior. You must specify the layout panel's starting size, and do any resizing manually.
How would I achieve this manual resizing? I'm pretty sure I can track the resizing of the HTML element via javascript, but how do I then interact with GWT to tell it the new size?
Thanks!
I would recommend using css absolute positioning in your html file :
<body style='position:absolute; top:10em; bottom:10em; left:0; right:0;>
<div id="top" style="position:absolute; left:0; top:-10em; bottom:0; right:0;">
<p> THIS IS THE TOP BANNER </p>
</div>
<div id="bottom" style="position:absolute; left:0; top:100%; bottom:0; right:0;">
<p> THIS IS THE BOTTOM BANNER </p>
</div>
</body>
Your RootLayoutPanel will attach to the body, which now has a 10em top and bottom margin.
One possible pure GWT solution.
You can add a resize handler. In the resize event you can get the new dimensions and resize your component.
The GWT mail sample pre GWT 2.0 Mail used "manual" resizing (but its a bit out of date).
http://code.google.com/p/google-web-toolkit/source/browse/releases/1.7/samples/mail/src/com/google/gwt/sample/mail/client/Mail.java
Basically, you want to hook into the window resize event handler:
// Hook the window resize event, so that we can adjust the UI.
Window.addResizeHandler(new ResizeHandler() {
public void onResizeA(int width, int height) {
// Adjust each immediate child widget by calling child.onResize()
}
}