I have the following for a polymer web application. The whole page scrolls. I would like for the contents of and to scroll independently. foo has a longer view and bar is generally able to fit in the page with maybe a little vertical scrolling.
How do I make the two contents of vaadin-split-layout scroll independently vertically?
<app-drawer-layout fullbleed force-narrow>
<app-drawer slot="drawer">
<app-toolbar>
<div main-title>Models</div>
</app-toolbar>
<section>
<div style="margin-bottom:90px;width:100%;"></div>
</section>
</app-drawer>
<app-header-layout>
<app-header slot="header" fixed effects="waterfall">
<app-toolbar>
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<iron-icon id="logo" src="icon.svg"></iron-icon>
<div main-title>Spliter Sample</div>
</app-toolbar>
</app-header>
<section>
<vaadin-split-layout orientation="horizontal">
<foo></foo>
<bar></bar>
</vaadin-split-layout>
</section>
</app-header-layout>
</app-drawer-layout>
Thank you for any advice.
You can style the panels of a vaadin-split-layout as any other div as the panels are in the light DOM as you can see when inspecting their examples.
Thus give them an explicit height and an overflow:auto or overflow-y:auto; to enable scrolling. The style rules be placed in your usual CSS.
I'm working on a page with four (4) separate DIV elements that all are scrolled independently of each other. Using the answer here: `-webkit-overflow-scrolling: touch` broken for initially offscreen elements in iOS7 I was able to get most of the pages working. There are still a few pages where the DIV holding the main content cannot be scrolled vertically when a side DIV is expanded.
The page structure looks like this:
...
<div id="paneTop">...</div>
<div id="paneLeft" class="expanded">...</div>
<div id="paneCenter">
<div>
<div style="overflow: hidden;">
<div id="mainContent" style="overflow: auto;">...</div>
</div>
</div>
</div>
<div id="paneRight" class="expanded">...</div>
...
Setting the touchstart event listener on #paneCenter worked for most of the pages but those didn't have the extra layer of divs. I have tried setting the touchstart event listener on #mainContent and all the way up the chain but #mainContent will not scroll when #paneLeft is expanded even though it works when #paneLeft is collapsed and it works whether paneRight is expanded or not.
Note: this issue has only been identified on an iPad running iOS7.
This is the correct behavior. If you want it to scroll vertically but hide it horizontally, then target it specifically: overflow-x: hidden (to hide horizontal excess), and don't set anything to overflow-y. This allows for some good control over elements.
I want to have an image that stick to the bottom center of the screen. I know I can use <div data-role="footer"> to do it. However the footer has a visible horizontal line on top which I want to get rid off. Any idea how to do it?
The easiest way to do this is to use the built-in jQM footer, which has the data-position="fixed" attribute to make it stick to the bottom. I'm unfamiliar with this horizontal line you say the footer has, but it'll be easy to get rid of just by overriding the default jQM stylesheet. You can view/test-edit the CSS styles using Firebug in Firefox, or the built-in developer tools in any browser.
It should look something like this:
.ui-footer {
/* Use !important to ensure the target style will be overridden! */
border: none !important;
}
And the HTML:
... <!-- rest of page -->
<div data-role="footer" data-id="fixedFooter" data-position="fixed" data-tap-toggle="false">
<img src="path/to/image.png" />
</div>
I'm using jQueryUI Tabs inside a jQueryUI Dialog box. The content in each of the tab panels can be quite large -- for example there can be a table with hundreds of rows inside each individual tab panel. So scrollbars are required to navigate the content.
By default, the dialog panel displays its own scrollbar -- which is not exactly what I want. This scrollbar causes the navigation tabs themselves to move up and out of view. What I'd prefer is for each tab panel to display its own scrollbar if necessary but to leave the navigation tabs visible. I've tried setting "overflow:hidden" for the dialog panel, and then "overflow:auto" for the individual tab panels (see below). But then the tab panels are not getting scrollbars even when the content requires it.
Below is a (reduced) test case that shows the problem -- including my attempt to use overflow styles to solve the problem. Replace "Big content..." with something that causes scrollbars to be required and you'll see it.
Hope that's clear enough. Any ideas on how to solve this problem? Many thanks...
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#dialog").dialog({height:300});
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="dialog" style="overflow:hidden;">
<div id="tabs">
<ul>
<li>tab-1</li>
<li>tab-2</li>
</ul>
<div id="tab-1" style="overflow:auto;">Big content...</div>
<div id="tab-2" style="overflow:auto;">Big content...</div>
</div>
</div>
</body>
</html>
You could limit the height of each div which contains your 'content' ie:
height:100px;
overflow:auto;
Demo: http://jsfiddle.net/AeXNP/
Which makes everything very simple.
Edit: The harder part comes when (as you requested below) that the content resizes based on the user resizing the dialog. In involves a lot more css... To use overflow in your case, you require a height of the div. As the height is changing all the time, you don't know what height it will be. Therefore you need to manually set a margins and padding so you can set the height to 'auto'. So the css for the self-expanding tab contents is:
.fixedSizedTab {
overflow:auto;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:50px;
margin-bottom:10px;
margin-right:0px;
margin-left:0px;
}
Demo: http://jsfiddle.net/AeXNP/2/
I was seeing a strange phenomena when using Scriptaculous BlindDown and SlideDown effects, where they would smoothly slide, and then at the very end, they would jump an additional amount, maybe 10% of the slide distance.
I already saw the note on the BlindDown page that you have to be sure not to use padding, which I'd already done.
I was still thinking that this must be my mistake somehow, when I noticed that I see the exact same thing happening on their demo page for Toggle when clicking on either the Blind or Slide demos:
http://wiki.github.com/madrobby/scriptaculous/effect-toggle
Firefox 3.6.7, Chrome 6, and Internet Explorer 8 all display this effect on my computer.
So I was thinking about just writing it off and either living with it or cutting the effect out, when I noticed that the page for BlindDown does not display this effect:
http://wiki.github.com/madrobby/scriptaculous/effect-blinddown
So there must be a way to make this work. On my page, the jump is occurring whether I directly use BlindDown/Slide or whether I use Toggle.
Has anyone out there used these and managed to do so without this problem? Any ideas on what the secret is?
It's usually due to margin or padding.
The element you're blind-downing mustn't have any margin or padding, or should have margin:0.1% so that contained margins don't collapse through the bounds of the element either. If you do this it'll be smooth as silk.
also - ensure you've set overflow:hidden
Enjoy.
(the other place it'll fall down is if you don't define height. If you do this little incantation before you animate it'll get and set you height without bothering anything else.
elem.setStyle({position:'absolute',visiblity:'invisible'});
elem.setStyle({'height':elem.getDimensions().height+'px'});
elem.setStyle({position:'relative',visibility:'visible'}); //or position:'static'
In my experience, the jumping is just a performance issue, which is effected by the system specs, browser, and complexity of the html content you are toggling. Some browsers like safari and chrome have a pretty good javascript engine making them more efficient.
I see this is happening for you even when using chrome though? Is the html content particularly complex, or your computer overloaded with applications running?
There is definitely a little very well known secret... Have you tried wrapping your content in an extra div container? You should consider this best practice and almost a requirement specifically when using Scriptaculous effects.
For example... Say you want to slideDown or Toggle a login form - and you have::
<div id="login-panel">
<input type="text" name="username" />
<button type="submit" name="send">Login</button>
</div>
All you have to do is add an extra inner div tag::
<div id="login-panel">
<div><!-- extra div here -->
<input type="text" name="username" />
<button type="submit" name="send">Login</button>
</div><!-- close it here -->
</div>
Now when you do something like Effect.toggle("login-panel", 'slide'); the transition should be much smoother and less jumpy. It may seem a little sloppy but it almost always helps. Hope this helps you!!
Keep in mind that when Scriptaculous begins an animation, the container that is being modified will be absolutely positioned and then a record of the height will be taken, similar to what danielsherson mentions. If however the container does not exist within a relatively positioned parent container, then the dimensions of the animating container may change quite drastically. The easiest way to test this is to modify your container using firebug to set the position to absolute. What happens? Did the height change? For the best results, there should be no change in the dimensions of your animating container when switching to absolute positioning. What happens to the rest of your document, such as content moving underneath, will not matter.
The padding/margin issue is a tricky one too since there really isn't a way to prevent the margins from overlapping and creating issues. Best way I found to address this is to set your animating container to float and then use the clearfix hack on a parent container to make sure nothing overlaps.
<body style="margin: 0 auto; width: 300px; position: relative; background: black;">
<div class="parent nonanimating clearfix">
<div class="animating" style="float: left; width: 100%; background: white;">
<div class="apply-your-margins-and-padding-here">
...content...
</div>
</div>
</div>
<div class="parent nonanimating clearfix">
<div class="animating" style="float: left; width: 100%; background: white;">
<div class="apply-your-margins-and-padding-here">
...content...
</div>
</div>
</div>
</body>
Note that the classes are not functional and just for reference to my comments with the exception of clearfix, which is the float clear hack. The backgrounds and widths are only specified to give a better example of what is happening. Add whatever animation you'd like to $$('.animating')
I use this one (there are many), all though it is old and I don't even design for many of the browsers this hack supports..
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
I don't think it's a performance issue at all. I'm having the same issue. The ONLY way I've been able to make it not jump is to define a height for the div I'm sliding. I realize that this is NOT a good solution but it's the only one I've been able to find. I've also tried adding the additional div and it had no effect on how the Effect.toggle slide worked.
If anyone else has any more info on this, I'm all ears.
To prevent a Scriptaculous effect from jumping or jerking, remove the 'style' attribute from the element which you are applying the Effect to.
This:
<div id="mydiv" style="padding:10px;margin:10px;">
<button onClick="new Effect.BlindUp('mydiv');" />
</div>
Becomes:
<div id="mydiv">
<button onClick="new Effect.BlindUp('mydiv');" />
</div>
The styling can be placed in a enclosed div like this:
<div id="mydiv">
<div style="padding:10px;margin:10px;">
<button onClick="new Effect.BlindUp('mydiv');" />
</div>
</div>
The problem is caused by Scriptaculous reapplying the element's (mydiv) inline style declarations after the effect has been performed.
I have found success with using position: relative; on the block element using the slide/blind animation. Make sure padding/margins are placed on the child elements and not the slide block element.